Redux How to update the store in unit tests?

Question

Use of the enzyme, mocha and expectation claims.

The purpose of my unit test is to verify that the send will be called with the correct arguments when paused and not paused in mergeProps. I need to dynamically change the state of my store: paused: true .

At the moment I am trying to update a paused value by sending, but I do not think this is correct, because it is just a layout and never passes through a reducer.

I am using the redux-mock-store package.

How to do it?

 describe('Play Container', () => { const id = 'audio-player-1'; const store = configureMockStore()({ players: { 'audio-player-1': { paused: false } } }); let dispatchSpy; let wrapper; beforeEach(() => { dispatchSpy = expect.spyOn(store, 'dispatch'); wrapper = shallow( <PlayContainer className={attributes.className}> {children} </PlayContainer>, { context: { id } }, ).shallow({ context: { store } }); }); it('onClick toggles play if paused', () => { //Not Working store.dispatch(updateOption('paused', true, id)); wrapper.simulate('click'); expect(dispatchSpy).toHaveBeenCalledWith(play(id)); }); it('onClick toggles pause if playing', () => { wrapper.simulate('click'); expect(dispatchSpy).toHaveBeenCalledWith(pause(id)); }); }); 

Container:

 const mapStateToProps = ({ players }, { id }) => ({ paused: players[id].paused }); const mergeProps = (stateProps, { dispatch }, { id }) => ({ onClick: () => (stateProps.paused ? dispatch(play(id)) : dispatch(pause(id))) }); export default connectWithId(mapStateToProps, null, mergeProps)(Play); 

connectWithId:

 //getContext() is from recompose library and just injects id into props export const connectWithId = (...args) => compose( getContext({ id: React.PropTypes.string }), connect(...args), ); 

actions:

 updateOption: (key, value, id) => ({ type: actionTypes.player.UPDATE_OPTION, key, value, id, }), 

Answer 1

configureMockStore is a factory that is used to set up mock storage by using medium-term programs. returns a mockStore object.
mockStore returns an instance of the configured layout store. It does not change state through action. These are just action notes. The reason is that it is a utility for creating unit tests, and not "integration" (state + component).

However, you can simulate a state change. mockStore accepts a function, so you can 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:

 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 subscribers store.dispatch({ type: 'ANY_ACTION' }); 

Answer 2

Now it seems that thanks to pr by @catarinasoliveira you can provide your real reducer that will update the repository accordingly. This is with the owner, but I don’t know if it was in n / min yet, or, frankly, if he does what I just said, but I'm going to try it and report