jest mock setup with fetch-mock

Question

I am not sure why but the test fails as it says Expected mock function to have been called.. How should I setup the addFundingSource mock to have it called? I can't jest.mock the whole module like the others (for instance jest.mock('../../../../_helpers/alerts');) since the rest of the functions are also used from that module.

fetchFundingSource.js

export const addFundingSource = () => {
  ...
}

export const fetchFundingSource = (history, onNewPaymentClose) => {
  let config = {
    ....
  };

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

  try {
    const response = await fetch(fundingSourceEndpoint, config);
    const jsonResponse = await response.json();
    if (!response.ok) {
      showErrorAlert(jsonResponse);
      dispatch(fetchFundingSourceError(jsonResponse));

      throw new Error(response.statusText);
    }

    dispatch(fetchFundingSourceSuccess(jsonResponse.count, jsonResponse.results));
    addFoundingSource(jsonResponse.results, history, onNewPaymentClose);
  } 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 * as fundingSource from '../../../../dashboard/global/ducks/fetchFundingSource';
import { fundingSourceEndpoint } from '../../../../_api/companyHelpers';
import { createMemoryHistory } from 'history';

jest.mock('../../../../_api/companyHelpers');
jest.mock('../../../../_helpers/alerts');
jest.mock('../../../../_api/authHelpers');

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

describe('fetchFundingSource', () => {
  beforeEach(() => { fetch.resetMocks(); });
  const history = createMemoryHistory('/dashboard');
  const onNewPaymentClose = {};
  fundingSource.addFundingSource = jest.fn(); //Mock setup.

  it('dispatches the correct actions on successful fetch request', () => {
    const store = createMockStore({});
    fetch.mockResponse(JSON.stringify({ count, results }));

    const expectedActions = [
      fetchFundingSourceRequestObject,
      fetchFundingSourceSuccessObject
    ];

    return store.dispatch(fundingSource.fetchFundingSource(history, onNewPaymentClose))
      .then(() => {
        expect(fundingSource.addFundingSource).toBeCalled(); //THIS FAILS
        expect(store.getActions()).toEqual(expectedActions);
      });
  });
});

Andrea Carraro · Answer 1 · 2017-11-27T18:03:23.457

0

In your example I can't see where the named export addFundingSource is actually mocked. You might intercept and mock the export like this:

import * as fundingSourceReduce from '../fetchFundingSource';
fundingSourceReduce.addFundingSource = jest.fn();

More examples here.

Please note that in order to ensure that mocks are set up with the right timing, they should be declared into beforeEach or directly into test's it call.

edited Nov 27 '17 at 18:03

answered Nov 27 '17 at 16:39

Andrea Carraro

9,731
5
33
57

This is a good tip as it only mocks that one function from the module and it doesn't change the others. But for some reason it doesn't work. I updated my question accordingly. Can you take a look at it? – Sean Magyar Nov 27 '17 at 17:00
See prev comment too. I forgot to mention that the function seems to be mocked when I console log it in the test setup, still it calls the original function. Could it be because of the async fetch call? – Sean Magyar Nov 27 '17 at 17:29
Please note that in order to ensure that mocks are set up with the right timing, they should be declared into beforeEach or directly into test's it call. – Andrea Carraro Nov 27 '17 at 18:03
It's still the same :( – Sean Magyar Nov 27 '17 at 18:12

jest mock setup with fetch-mock

1 Answers1