Redux Mock Store

1.5.5 · deprecated · verified Wed Apr 22

redux-mock-store is a utility package designed to facilitate testing of Redux asynchronous action creators and middleware by providing a mocked Redux store. Its primary function is to capture a log of all dispatched actions, which can then be asserted against in tests. Unlike a real Redux store, `redux-mock-store` does not process actions through reducers, meaning its internal state never updates. This library is currently at version 1.5.5. However, since this version, `redux-mock-store` has been officially deprecated by the Redux team. The recommended testing practice now involves using a real Redux store to test the combined behavior of action creators, reducers, and selectors, asserting on observable state changes rather than just dispatched actions. This package is therefore in a deprecated status, with an implied end of active development and maintenance.

Common errors

```
Expected received actions to equal [...], but actual actions were empty array or incorrect.
```
cause Actions were dispatched but not captured, often due to improper asynchronous handling or not calling `store.getActions()` after the async operation completes.

fix Ensure that `store.dispatch()` for asynchronous actions is `await`ed or returns a Promise, and `store.getActions()` is called *after* the promise resolves. Verify all necessary middlewares (e.g., `redux-thunk`) are correctly configured with `configureStore`.
```
TypeError: configureStore is not a function
```
cause This usually indicates an incorrect import statement, particularly when mixing CommonJS `require` with ESM `import` semantics or attempting to destructure a default export.

fix For ESM, use `import configureStore from 'redux-mock-store'`. For CommonJS, use `const configureStore = require('redux-mock-store').default`.

Warnings

breaking The `redux-mock-store` package, particularly its `configureStore` method, has been officially deprecated since version 1.5.5 by the Redux team. The recommended testing approach for Redux applications is now to use a real Redux store to verify observable state changes rather than solely focusing on dispatched actions.
Fix: Migrate your tests away from `redux-mock-store`. Refactor tests to utilize a real Redux store and assert against the actual state changes and selector outputs, following the latest official Redux testing documentation.
gotcha The `redux-mock-store` intentionally does not run reducers or update its internal state when actions are dispatched. Assertions made on `store.getState()` after dispatching actions will always reflect the `initialState` provided during store creation.
Fix: When using `redux-mock-store`, limit your assertions to the array of dispatched actions obtained via `store.getActions()`. If you need to test state changes, you must use a real Redux store instead.
deprecated The approach of testing Redux logic with a mock store that only captures actions, as offered by `redux-mock-store`, is now considered a suboptimal testing practice by the Redux team. This method can lead to brittle tests and a disconnect from the actual application behavior.
Fix: Adopt the Redux team's recommended testing strategy, which involves setting up a functional Redux store for tests. This allows for comprehensive testing of action creators, reducers, and selectors in an integrated manner, asserting on the final observable state.

Install

npm install redux-mock-store npm
yarn add redux-mock-store yarn
pnpm add redux-mock-store pnpm

Imports

configureStore
wrong:
```
const { configureStore } = require('redux-mock-store')
```
correct:
```
import configureStore from 'redux-mock-store'
```
The primary export is a default export. For CommonJS, use `require('redux-mock-store').default` or rely on transpilers to handle `const { configureStore } = require('redux-mock-store')`.

Quickstart

Demonstrates how to test asynchronous Redux actions and middleware (like `redux-thunk`) by initializing a mock store and asserting on the captured dispatched actions.

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';

// Mock fetch for demonstration purposes in a Node.js environment
global.fetch = async (url) => {
  if (url === '/users.json') {
    return {
      json: async () => ([{ id: 1, name: 'Test User' }]),
      ok: true,
      status: 200
    };
  }
  throw new Error('Unknown URL: ' + url);
};

const middlewares = [thunk]; // Add your Redux middleware
const mockStore = configureStore(middlewares);

// Define a simple action creator (would be imported in a real app)
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
function success(data) {
  return {
    type: FETCH_DATA_SUCCESS,
    payload: data
  };
}

// Define an async action creator (e.g., using redux-thunk)
function fetchData() {
  return (dispatch) => {
    // Simulate an async operation, e.g., an API call
    return fetch('/users.json')
      .then(response => response.json())
      .then(data => dispatch(success(data)));
  };
}

// Example test using a common testing framework (like Jest)
describe('redux-mock-store with async actions', () => {
  it('should dispatch a success action after fetching data', async () => {
    const store = mockStore({}); // Initialize mock store with an empty initial state

    // Dispatch the async action and await its completion
    await store.dispatch(fetchData());

    // Retrieve all dispatched actions from the mock store
    const actions = store.getActions();

    // Assertions on the dispatched actions
    expect(actions.length).toEqual(1);
    expect(actions[0].type).toEqual(FETCH_DATA_SUCCESS);
    expect(actions[0].payload).toEqual([{ id: 1, name: 'Test User' }]);

    console.log('Successfully tested async action dispatch:', actions);
  });
});

view raw JSON →