0

I am testing a component that uses an external Api.js file. When testing the component, I'm mocking the function using

import { apiCall, } from './Api';

jest.mock('./Api');

I want to test a case where the Api call fails, to check that my component shows the correct error. In order to do that, I'm faking the Api response to be:

apiCall.mockImplementation( () => Promise.reject({ error: 'This is my error' }), );

However, when mocking the response in this way, I am not able to make it execute before the test case is evaluated. Is there any way to wait for that response to happen before finishing the test?

I have created a codesandbox as simple as I can showing the issue. Since seems that codesandbox does not allow to use jest.mock, I'm just making the original API call to return Promise.reject.

https://codesandbox.io/s/6y0rn74mzw

The behaviour is simple: A text "No error" and a button, that when clicked it calls to the API method that automatically returns Promise.reject. In the response, we change the text to "There is an error". The first test just looks for the word 'error' to make the test pass and show the full evaluation of the code (the test stops if something fails), and the second test is the test I would expect to pass if the correct order was applied.

What would be the way to assure the proper execution order in the test case?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
andersuamar
  • 193
  • 10

2 Answers2

0

When it comes to dealing with Promises in jest tests, what I've done is as follows:

it('test script description', (done) => {
  apiCall()
    .then((response) => {
      // Verify the response from the promise
      done();
    });
});

I'm obviously not saying that this is the best solution (perhaps someone can point you in a better direction) but it's the only one that worked for me!

AJC24
  • 3,280
  • 2
  • 19
  • 30
0

So the solution is to use setImmediate.

If I change the test case to be:

it("should pass but fails due to execution order", done => {
  console.log("-----------");
  expect(true).toBe(true);
  const wrapper = mount(<App />);
  wrapper.find("button").simulate("click");
  setImmediate(() => {
    const newWrapper = wrapper.update();
    expect(newWrapper.html()).toContain("There is an error");
    done();
  });
  console.log("Third");
  console.log("-----------");
});

It passes.

A good explanation here: https://github.com/kentcdodds/react-testing-library/issues/11

andersuamar
  • 193
  • 10