Redux How to update the store in unit tests?
configureMockStore
is a factory that is used to configure a mock store by applying the specified middlewares. This factory returns a mockStore
function.
The mockStore
function itself returns an instance of the configured mock store. It doesn't change state through actions; instead it just records which actions were passed. This is because it's a utility tool to create unit tests and not "integration" (state + component) tests.
Nonetheless, you can simulate a state change. mockStore
accepts a function, so you could do the following:
import configureMockStore from 'redux-mock-store';const middlewares = [];const mockStore = configureMockStore(middlewares);let state = { players: { 'audio-player-1': { paused: false } }};const store = mockStore(() => state);
Then in your tests, you can do:
state = NEW_STATE;// now you need to make the components update the state.// so you can dispatch any action so the mock store will notify the subscribersstore.dispatch({ type: 'ANY_ACTION' });
What you can do is use a real store in your test. First, create a reducer function:
const reducer = (state, action) => { if (action.type === actionTypes.player.UPDATE_OPTION) { return { ...state, players: { ...state.players, [action.id]: { ...state.players[action.id], [action.key]: action.value, }, }, }; } return state;};
(Note, if you're ok with not preserving other state in this test you could simplify the above and just return a new state.)
Then create a store with that reducer and the initial state:
import { createStore } from 'redux';const store = createStore(reducer, { players: { 'audio-player-1': { paused: false } }});
With that, your dispatch with updateOption
should result in the new state.
It seems now that thanks to a pr by @catarinasoliveira that you can provide your real reducer which will update the store accordingly. It's in master but I don't know if it's in npm yet, or frankly if it does what I just said, but I'm about to try it out and will report back