redux-mock-store

What is redux-mock-store?

The redux-mock-store npm package is used for testing Redux async action creators and middleware. The package provides a mock store for your tests with a state that you can control. It allows you to dispatch actions and test the state of the store after they are dispatched without having to interact with the real Redux store.

What are redux-mock-store's main functionalities?

Creating a mock store

This code sample demonstrates how to create a mock store using redux-mock-store. The `configureStore` function is imported from the package, and then it is called with an array of middlewares (empty in this case). Finally, the `mockStore` function is used to create an instance of the store with an initial state.

const configureStore = require('redux-mock-store');
const middlewares = [];
const mockStore = configureStore(middlewares);
const store = mockStore({ todos: [] });

Dispatching actions and checking dispatched actions

This code sample shows how to dispatch an action to the mock store and then retrieve the dispatched actions using `getActions` method. The `expect` function is used to assert that the dispatched actions are as expected.

store.dispatch({ type: 'ADD_TODO', text: 'Test Redux' });
const actions = store.getActions();
expect(actions).toEqual([{ type: 'ADD_TODO', text: 'Test Redux' }]);

Resetting the state of the store

This code sample illustrates how to reset the state of the mock store. The `clearActions` method is used to clear all actions in the store, and then `getActions` is used to verify that the store's actions have been reset.

store.clearActions();
const actions = store.getActions();
expect(actions).toEqual([]);

Other packages similar to redux-mock-store

jest-redux

jest-redux is another testing utility that provides a set of Jest matchers for Redux. It is similar to redux-mock-store in that it helps with testing Redux-related code, but it is more focused on integrating with Jest and providing a different set of utilities for assertions.

README

redux-mock-store

A mock store for your testing your redux async action creators and middleware. The mock store will store the dispatched actions in an array to be used in your tests.

Old version documentation (< 1.x.x)

https://github.com/arnaudbenard/redux-mock-store/blob/v0.0.6/README.md

Install

npm install redux-mock-store --save-dev

How to use

// actions.test.js

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

const middlewares = [thunk]; // add your middlewares like `redux-thunk`
const mockStore = configureStore(middlewares);

// Test example with mocha and expect
it('should dispatch action', () => {
  const getState = {}; // initial state of the store
  const addTodo = { type: 'ADD_TODO' };

  const store = mockStore(getState);
  store.dispatch(addTodo);

  const actions = store.getActions();

  expect(actions).toEqual([addTodo]);
});

// Promise test example with mocha and expect
it('should execute promise', (done) => {
    function success() {
      return {
        type: 'FETCH_DATA_SUCCESS'
      };
    }

    function fetchData() {
      return dispatch => {
        return fetch('/users.json') // Some async action with promise
          .then(() => dispatch(success()));
      };
    }

    const store = mockStore({});

    store.dispatch(fetchData())
      .then(() => {
        expect(store.getActions()[0]).toEqual(success())
        done();
      });
})

API

- configureStore(middlewares?: Array) => mockStore: function
- mockStore(getState?: Object,Function) => store: Function
- store.dispatch(action) => action
- store.getState() => state: Object
- store.getActions() => actions: Array
- store.clearActions()

License

MIT