DEV Community

Ashutosh Sarangi
Ashutosh Sarangi

Posted on

Unit Testing For Your Redux, React

Introduction

  • To test the Redux Toolkit store, you can use the configureStore function from the Redux Toolkit to create a mock store.
  • Then, you can dispatch actions to this store and check if the state changes as expected.

We need to have a separate store.mock.js

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './path_to_your_reducer'; // replace with the path to your reducer

export const mockStore = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware => getDefaultMiddleware(),
});
Enter fullscreen mode Exit fullscreen mode

Then, in your test file, you can import this mock store and use it to dispatch actions and check the state:

import { mockStore } from './store.mock';
import { yourAction } from './path_to_your_actions'; // replace with the path to your actions

describe('Redux Toolkit Store', () => {
  it('should handle yourAction', () => {
    const expectedState = { /* your expected state after dispatching the action */ };

    mockStore.dispatch(yourAction(/* your action payload */));
    expect(mockStore.getState()).toEqual(expectedState);
  });
});
Enter fullscreen mode Exit fullscreen mode

To Avoid Confusion

  • when you dispatch an action to the mock store created by configureStore in your tests, it will indeed "hit" the reducer.

  • The reducer will run with the current state and the dispatched action, and return a new state.

  • This is the same behavior as in your actual application. However, this does not have any consequences for your** actual application state**.

  • The mock store you create in your tests is completely separate from the actual Redux store in your application.

-Any actions you dispatch in your tests will not affect the actual application state.

  • As for clearing the store, it's not necessary to clear the mock store after each test. Each test runs in isolation, and if you create a new mock store in a beforeEach block (as is common practice), each test will get its own fresh instance of the store.

  • Therefore, the state from one test will not leak into another.

Feel free to reach out to me if you have any queriers.

Top comments (0)