Testing async action creator in redux

Question

I have the following action creator:

export const doSomething () {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(someAction('bbb'));
    }, 3000);
  }
}

It changes some part of a state to bbb, where state is created from combined reducers. How can I test this?

import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
it('', function (done) {
  const middlewares = [ thunk ]
  const mockStore = configureMockStore(middlewares)
  const store = mockStore({}) // how should the store look like?
  return store.dispatch(someAction('bbb'))
    .then(() => {
      expect(store.getActions()).toEqual(expectedActions)
    })
});

How should mocked store look like? Is this the right apporach? How do I test this?

jony89 jony89 · Accepted Answer · 2017-01-01T11:56:08

I think you are trying to test too much within one test and even more, you are trying to test parts that you should not test ( e.g the store/dispatch ).

There a reason why it called "unit test"

I would change it into two tests :

The reducer, should be a pure function, given an input it should return an output ( forget about the state for now ), here just make sure that the reducer has inserted the value into the correct place.
The action, create a spy for the dispatch function and supply it to the action result function (myAction()) by your self, and use expect(dispatchSpy).toHaveBeenCalledWith. you can create easly also the getState function :
```
const getState = () => ({ obj1: 5, obj2: "333"})
```

Testing async action creator in redux

1 Answers