title: React/Jest - Is there a way to wait for a mock to resolve before rendeing
body: <p>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 <code>{! loading &amp;&amp;</code> 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.</p>
  
  <pre><code>test('App component renders and contains prop given to it', async () =&gt; {
    jest.spyOn(window, 'fetch').mockResolvedValue({
      json: jest.fn().mockResolvedValue({ value: 'test' }) as Partial&lt;Response&gt;,
    } as Response);
  
    await act(async () =&gt; {
      const testProp = 'my test';
  
      const { container, getByText } = render(&lt;App testProp={testProp} /&gt;);
  
      const testPropElement = getByText(testProp);
      console.log('test2');
  
      expect(testPropElement).toBeInTheDocument();
    });
  });
  </code></pre>
  
  <p>The fetch looks something like:</p>
  
  <pre><code>fetch(`/api/url`)
        .then((response) =&gt; response.json())
        .then((data) =&gt; {
          console.log('test1');
          setLoading(false);
        });
  </code></pre>
  
  <p>When I console log to see the order of things, it is definitely going through with the mockResolvedValue and showing 'test1' after 'test2'.</p>
  
  <p>Anyone got any ideas?
  thanks for the help.</p>