React/Jest - 有没有办法在渲染之前等待模拟解决

Question

In my react component I have loading set to true by default, and then a fetch which on the return sets loading to false. When I return my jsx code I have a check like {! loading && {! loading && which works, but in my test, the fetch is being mocked and called through but it calls the render first so it doens't render the components.

test('App component renders and contains prop given to it', async () => {
  jest.spyOn(window, 'fetch').mockResolvedValue({
    json: jest.fn().mockResolvedValue({ value: 'test' }) as Partial<Response>,
  } as Response);

  await act(async () => {
    const testProp = 'my test';

    const { container, getByText } = render(<App testProp={testProp} />);

    const testPropElement = getByText(testProp);
    console.log('test2');

    expect(testPropElement).toBeInTheDocument();
  });
});

The fetch looks something like:

fetch(`/api/url`)
      .then((response) => response.json())
      .then((data) => {
        console.log('test1');
        setLoading(false);
      });

When I console log to see the order of things, it is definitely going through with the mockResolvedValue and showing 'test1' after 'test2'.

Anyone got any ideas? thanks for the help.

Answer 1

You are observing this because your fetch mock (and fetch itself) returns Promise which you are not resolving in your test, but rather Jest automatically resolves it for you after it's finished. You want to resolve it before your expect so it can go to then callback, change a state and do the re-render of a component.

React-testing-library (which I see you are using) is providing utility function for this occasion: waitFor . It would just wait some time for your promise to resolve and element to appear.

Alternatively you can use findByText , which you can await (basically just a promisified version of getBy* functions) and it would also do the same as above.