CODEWITHSUNDEEP
unit-testingjestjsredux-mock-store
Dream_Cap
Dream_Cap

Reputation: 2302

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:

Upvotes: 0

Views: 1365

Answers (1)

stijndepestel
stijndepestel

Reputation: 3544

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.

Upvotes: 2

Related Questions