Search code examples
javascriptreactjsreduxredux-thunkreact-testing-library

Unit testing react redux thunk dispatches with jest and react testing library for "v: 16.13.1",


I have following function.

const loadUsers= () => {
  return async (dispatch) => {
    dispatch(userRequest());
    let response= null
    try {
      response= await UserService.getUser();
      dispatch(userLoading());
    } catch (error) {
      dispatch(userError(error));
    } finally {
      dispatch(userSuccess(response));
    }
  };
};

With the following unit test I was abale to hit the "dispatch(userRequest());"

describe('user thunk', () => {
    it('dispatches a userRequest', async () => {
      const dispatch = jest.fn();

      await loadUsers()(dispatch);
      expect(dispatch).toHaveBeenCalledWith(userRequest());
    });
  });

However I couldn't figure out how to test lines and below response= await UserService.getUser();. Even though the function is not complex and I won't have much value for writing complex test, I need it for my pipeline to build.

Any help will be appreciated.

Thanks in advance.

UPDATE-> User Service

import axios from 'axios';

const USERS_ENDPOINT = '/user';

export const getUser= async () => {
  const response = await axios.get(PRODUCTS_ENDPOINT, {});
  return response.data;
};

export default getUser;

Solution

  • After days of research, I ended up testing the logic the following way.

    import thunk from 'redux-thunk';
    import configureStore from 'redux-mock-store';
    import * as reactRedux from 'react-redux';
    
    import axios from 'axios';
    const middlewares = [thunk];
    const mockStore = configureStore(middlewares);
    
    describe('load user thunk', () => {
    it('dispatches load user and error on call when API is not mocked', async () => {
      const store = mockStore({});
      const requestDispatch= userRequest();
      const errorDispatch= userError("Mock Message");
    
      await store.dispatch(await loadUsers());
      const actionsResulted = store.getActions();
      const expectedActions = [
        requestDispatch,
        errorDispatch,
      ];
      expect(actionsResulted.length).toEqual(expectedActions.length);
      expect(actionsResulted[0].type).toEqual(expectedActions[0].type);
      expect(actionsResulted[1].type).toEqual(expectedActions[1].type);
    }); 
    
    it('dispatches load user and success on call when API is mocked', async () => {
      const store = mockStore({});
      const requestDispatch= userRequest();
      const successDispatch= userSuccess("Mock Data");
      jest
      .spyOn(axios, 'get')
      .mockResolvedValue({ status: 200, data: "Mock Data"});
    
      await store.dispatch(await loadUsers());
      const actionsResulted = store.getActions();
      const expectedActions = [
        requestDispatch,
        successDispatch,
      ];
      expect(actionsResulted.length).toEqual(expectedActions.length);
      expect(actionsResulted[0].type).toEqual(expectedActions[0].type);
      expect(actionsResulted[1].type).toEqual(expectedActions[1].type);
    
     });