CODEWITHSUNDEEP
reactjsreduxjestjs
ln09nv2
ln09nv2

Reputation: 1343

Unit test Redux async actions

This is my async action that involves api calls and action creators

export const getPosts = () => (dispatch) => {
  dispatch({ type: LOADING_DATA });
  axios
    .get(`/posts`)
    .then(res => {
      dispatch({
        type: SET_POSTS,
        payload: res.data
      });
    })
    .catch(err => {
      dispatch({
        type: SET_POSTS,
        payload: []
      });
    });
};

I'm testing that when getPosts is called, it will dispatch LOADING_DATA, then SET_POSTS.

import axios from 'axios';
import moxios from 'moxios';
import expect from 'expect';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';
import { getPosts } from '../actions/dataActions';
import { LOADING_DATA, SET_POSTS } from '../actions/actionTypes';

describe('dataActions', () => {
    const middlewares = [thunk];
    const mockStore = configureMockStore(middlewares);

    beforeEach(() => {
        moxios.install();
    });

    // getPosts - when calling LOADING_DATA, we dispatch SET_POSTS with expected payload
    it('should dispatch an action to get posts', () => {
      moxios.wait(() => {
      const request = moxios.requests.mostRecent();
      request.respondWith({
        status: 200
      });
        });

        const expectedActions = [
            { type: LOADING_DATA},
            { type: SET_POSTS}
        ]

        const store = mockStore({ posts: [] })

        return store.dispatch(getPosts()).then(() => {
        expect(store.getActions()).toEqual(expectedActions);
      });
    })

    afterEach(() => {
    moxios.uninstall();
  });
})

However, I'm receiving TypeError: Cannot read property 'then' of undefined. I appreciate any help given.

Upvotes: 0

Views: 171

Answers (1)

Sagar Darekar
Sagar Darekar

Reputation: 1014

Your action is not returning any promise so that you can handle it inside your test case using then.
You need to add the return statement to your action just before call to axios.

export const getPosts = () => (dispatch) => {
  dispatch({ type: LOADING_DATA });
  //Just add return statement
  return axios
    .get(`/posts`)
    .then(res => {
      dispatch({
        type: SET_POSTS,
        payload: res.data
      });
    })
    .catch(err => {
      dispatch({
        type: SET_POSTS,
        payload: []
      });
    });
};

I was facing same issue, and I solved it this way!

Upvotes: 1

Related Questions