unit-testingjestjsredux-mock-store

Why is my jest async action creator test not working?


I am very new to unit testing, and am trying to go through my react-redux project to write some tests.

Why is this test not working, and how could I make it pass?

Here is the test. I want to test my fetch posts action creator. This is for a small blog application.:

import configureStore from 'redux-mock-store'; // ES6 modules
import { findSinglePost, sendEdit, changeRedirect, checkBoxChange } from '../client/redux/actions/postActions';
import thunk from 'redux-thunk';
import axios from 'axios';

const middlewares = [thunk];
const mockStore = configureStore(middlewares);
describe('asynchronous action creators', () => {

  it('should fetch posts', () => {
    let store = mockStore({})

    //my async action creator. It uses mock data that's in the same folder.
    const fetchPosts = () => function(dispatch) {
      dispatch({type: 'FETCH_POSTS'});

      return axios.get('./MOCK.json').then((response) => {
        dispatch({type: 'FETCH_POSTS_FUFILLED', payload: response.data});
      }).catch((err) => {
        dispatch({type: 'FETCH_POSTS_REJECTED', payload: err});
      });
    };
    //this doesn't equal FETCH_POSTS_FUFILLED, it ends up equaling just "FETCH_POSTS"
    return store.dispatch(fetchPosts()).then(() => {
      const actions = store.getActions();
      expect(actions[0]).toEqual({type: 'FETCH_POSTS_FUFILLED'});
    })
  })
});

Here is jest's feedback. I want it to equal 'FETCH_POSTS_'FUFILLED', but it's returning 'FETCH_POSTS'. :

 FAIL  _test_\actions.test.js
  ● asynchronous action creators › should fetch posts

    expect(received).toEqual(expected)

    Expected value to equal:
      {"type": "FETCH_POSTS_FUFILLED"}
    Received:
      {"type": "FETCH_POSTS"}

    Difference:

    - Expected
    + Received

      Object {
    -   "type": "FETCH_POSTS_FUFILLED",
    +   "type": "FETCH_POSTS",
      }

      88 |     return store.dispatch(fetchPosts()).then(() => {
      89 |       const actions = store.getActions();
    > 90 |       expect(actions[0]).toEqual({type: 'FETCH_POSTS_FUFILLED'});
      91 |     })
      92 |   })
      93 | });

      at _test_/actions.test.js:90:26

 PASS  client\views\LoginPage\LoginPage.test.jsx

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 5 passed, 6 total
Snapshots:   0 total
Time:        1.49s
Ran all test suites related to changed files.

Also, here is the project's github repo if you want to try to run it.

Also, if there's a standard way in the industry that's more well known on how to do this, I'd love the advice.

Edit:

When I change actions[0] to actions[ 1] I get this error:

Expected value to equal:
  {"type": "FETCH_POSTS_FUFILLED"}
Received:
  {"payload": {Symbol(impl): {"message": "The string did not match the expected pattern.", "name": "SyntaxError", Symbol(wrapper): [Circular]}}, "type": "FETCH_POSTS_REJECTED"}

Difference:

- Expected
+ Received

  Object {
-   "type": "FETCH_POSTS_FUFILLED",
+   "payload": DOMException {
+     Symbol(impl): DOMExceptionImpl {
+       "message": "The string did not match the expected pattern.",
+       "name": "SyntaxError",
+       Symbol(wrapper): [Circular],
+     },
+   },
+   "type": "FETCH_POSTS_REJECTED",

Here is the picture form of jest's feedback:


Solution

  • The mocked store you are using will store all dispatched calls that have been made to it. In your case, two dispatch calls should be made, the first being FETCH_POSTS and the second being either FETCH_POST_FULFILLED or FETCH_POST_REJECTED.

    Hence when you retrieve the dispatched actions from the mocked store, the first entry (which you are using in your expect) will be the FETCH_POSTS. You should check the second value in the array, which would be either FETCH_POSTS_FULFILLED or FETCH_POSTS_REJECTED based on how the promise is resolved in the function you are testing.