Testing Async Redux Action Jest

Question

I'm having trouble getting the correct output from the async redux action. I use Jest, redux-mock-adapter and thunk as tools.

According to redux documentation on testing asynchronous thunks ( https://redux.js.org/docs/recipes/WritingTests.html#async-action-creators ), my tests should return an array of two actions. However, my test returns only the first action, and not the second, which should return if the selection was successful. I think I just missed something small here, but it was annoying, to say the least.

Redux Action

export const getRemoveFileMetrics = cacheKey => dispatch => {
    dispatch({ type: IS_FETCHING_DELETE_METRICS });
    return axios
        .get("GetRemoveFileMetrics", { params: { cacheKey } })
        .then(response => dispatch({ type: GET_REMOVE_FILE_METRICS, payload: response.data }))
        .catch(err => err);
};

Test

it("getRemoveFileMetrics() should dispatch GET_REMOVE_FILE_METRICS on successful fetch", () => {
        const store = mockStore({});
        const cacheKey = "abc123doremi";
        const removeFileMetrics = {
            cacheKey,
            duplicateFileCount: 3,
            uniqueFileCount: 12,
        };
        const expectedActions = [
            {
                type: MOA.IS_FETCHING_DELETE_METRICS,
            },
            {
                type: MOA.GET_REMOVE_FILE_METRICS,
                payload: removeFileMetrics,
            }
        ];
        mockRequest.onGet(`/GetRemoveFileMetrics?cacheKey=${cacheKey}`).reply(200, removeFileMetrics);
        return store.dispatch(MOA.getRemoveFileMetrics(cacheKey)).then(() => {
            const returnedActions = store.getActions();
            expect(returnedActions).toEqual(expectedActions);
        });
    });

Output

Expected value to equal:
    [{ "type": "IS_FETCHING_DELETE_METRICS" }, { "payload": { "cacheKey": "abc123doremi", "duplicateFileCount": 3, "uniqueFileCount": 12 }, "type": "GET_REMOVE_FILE_METRICS" }]
Received:
    [{ "type": "IS_FETCHING_DELETE_METRICS" }]

Answer 1

jest-fetch-mock axios. . async await . .

, (showErrorAlert(jsonResponse);). showErrorAlert ( ), , . , , - .

export const submitTeammateInvitation = (data) => {
  const config = {
    //.....
  };

  return async (dispatch) => {
    dispatch(submitTeammateInvitationRequest());

    try {
      const response = await fetch(inviteTeammateEndpoint, config);
      const jsonResponse = await response.json();

      if (!response.ok) {
        showErrorAlert(jsonResponse);
        dispatch(submitTeammateInvitationError(jsonResponse));

        throw new Error(response.statusText);
      }

      dispatch(submitTeammateInvitationSuccess());
    } catch (error) {
      if (process.env.NODE_ENV === 'development') {
        console.log('Request failed', error);
      }
    }
  };
};

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

// jest.mock('../../../../_helpers/alerts', ()=> ({ showAlertError: jest.fn() }));

const middlewares = [thunk];
const createMockStore = configureMockStore(middlewares);

......

it('dispatches the correct actions on a failed fetch request', () => {
  fetch.mockResponse(
    JSON.stringify(error),
    { status: 500, statusText: 'Internal Server Error' }
  );

  const store = createMockStore({});
  const expectedActions = [
    {
      type: 'SUBMIT_TEAMMATE_INVITATION_REQUEST',
    },
    {
      type: 'SUBMIT_TEAMMATE_INVITATION_FAILURE',
      payload: { error }
    }
  ];

  return store.dispatch(submitTeammateInvitation(data))
    .then(() => {
      // expect(alerts.showAlertError).toBeCalled();
      expect(store.getActions()).toEqual(expectedActions);
    });
});