redux-thunk structure and test side effects

2019-07-28 21:27发布

问题:

I am using redux-thunk and not sure if side effects (showAlertError function) are structured properly. Although my jest test setup seems to be fine at first glance, I get jest.fn() value must be a mock function or spy. Received: undefined error.

Is the showAlertError function is at the right place or it should be in the actionCreator, or somewhere else? Also if this is the right place for it then how I can test if it's called.

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

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

    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(jsonResponse));
    } catch (error) {
      if (process.env.NODE_ENV === 'development') {
        console.log('Request failed', error);
      }
    }
  };
};

test

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

import { showAlertError } from '../../../../_helpers/alerts';
jest.mock('../../../../_helpers/alerts');

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

describe('submitTeammateInvitation', () => {
   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 = [
      submitTeammateInvitationRequestObject,
      submitTeammateInvitationErrorObject
    ];
    const showAlertError = jest.fn();

    return store.dispatch(submitTeammateInvitation(inviteTeammateEndpoint))
      .then(() => {
        expect(showAlertError).toBeCalled(); // this doesn't work
        expect(store.getActions()).toEqual(expectedActions); // this works
      });
  });
});