Redux dispatch function not triggered within catch block upon testing using Jest and Enzyme

Question

I'm currently working on testing a react and redux course project using Jest and Enzyme. I'm running into an issue when I test the redux action methods. I have a function called requestRobots that performs an async operation to fetch data. Upon fetching and depending on the promise result, the action within try/catch block is dispatched. This logic is handled using the redux-thunk middleware. The issue I'm facing is that when I test this method using Jest, the dispatch within the catch block is not triggered although the error is captured and logged. I also checked if the catch block is working in the actual project and it does dispatch the action in the project when there is an error. However this is not the case when I test it using Jest. I have used redux-mock-store for setting up the mock redux store and apiCall used in the code snippet is just an abstraction of the fetch API call

Could someone please help me out in fixing this issue. I have attached snippets of my test and action code and screenshot of the logs that I get on running the test.

action.test.js

it("Test request robots action when called - unsuccessful state", async () => {
  const apiCall = jest.fn().mockReturnValue(Promise.reject("Not found"));
  const store = mockStore();
  await store.dispatch(actions.requestRobots(apiCall));
  const action = store.getActions();
  console.log(action);
  expect(apiCall).toBeCalled();
  expect(apiCall.mock.calls.length).toBeGreaterThan(0);
  console.log(apiCall.mock);
});

action.js

export const requestRobots = apiCall => dispatch => {
  dispatch({ type: REQUEST_ROBOTS_PENDING });
  apiCall("https://jsonplaceholder.typicode.com/users")
    .then(data => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
    .catch(error => {
      console.log(error);
      dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error });
    });
};

Output logs output obtained after running the action.test.js file

Thanks in advance

Answer 1

return keyword is missing. use return keyword before api call like below

export const requestRobots = apiCall => dispatch => {
  dispatch({ type: REQUEST_ROBOTS_PENDING });
  return apiCall("https://jsonplaceholder.typicode.com/users")
    .then(data => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
    .catch(error => {
      console.log(error);
      dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error });
    });
};

if this solution doesn’t work use return keyword before catch block's dispatch like below

export const requestRobots = apiCall => dispatch => {
  dispatch({ type: REQUEST_ROBOTS_PENDING });
  return apiCall("https://jsonplaceholder.typicode.com/users")
    .then(data => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
    .catch(error => {
      console.log(error);
      return dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error });
    });
};