Mocking APi calls jest

Question

I have a DataService which is responsible for my API calls - I am trying to mock the api call in jest but it does not seem to be working. I am not sure what I am doing wrong - my DataService seems to be undefined.

Here is the function

const getStepData = (id) => {
  return async dispatch => {
    try {
      dispatch(fetchStepBegin());

      const res = await DataService.fetchStepData(id);
      const sortedTask = sortedTaskData(res)

      const sortedStepData = sortStepData(res)
      const newData = createSortedDataForDragAndDrop(sortedTask, sortedStepData)
      dispatch(fetchRawStepDataSuccess(res.data))
      dispatch(fetchStepDataSuccess(newData))
    }
    catch (err) {
      dispatch(fetchStepError(err))
      throw (err)
    }
  }
}

Here is the test that I have written - I am pretty sure I am mocking incorrectly

  it('Data Api end point called with corrent studyId', () => {
    jest.mock(DataService);
    DataService.fetchStepData() = jest.fn()
    CellStepManagementOperations.getStepData(5);
    expect(DataService.fetchStepData).toHaveBeenCalledWith(5);

  });

Answer 1

I think the problem here is that you are trying to test asynchronous action creators, synchronously . So your expect function doesn't wait for your getStepData to finish before running.

I've had to something very similar to what you're trying to do and I used a library called redux-testkit . Please see the part about testing async action creators with services here . You can even set mock return values for your API services which I've found very helpful when testing.

Using this library, you will be able to await for your getStepData async action creator to complete before running your expect function.

You will have to play around with your code but it might look something like this:

it('Data Api end point called with corrent studyId', () => {
  jest.mock(DataService);
  DataService.fetchStepData() = jest.fn()
  const dispatches = await Thunk(CellStepManagementOperations.getStepData).execute(5);
  expect(DataService.fetchStepData).toHaveBeenCalledWith(5);
});