title: Jest function fails to fire after network request in react component
body: <p>Full Repo</p>
  <p><a href="https://github.com/brianbancroft/sample-testing-msw-sb-jest-rtl" rel="nofollow noreferrer">https://github.com/brianbancroft/sample-testing-msw-sb-jest-rtl</a></p>
  <p>Using mock service worker (msw) to respond to a network request, I have a React login component. On submit it sends a network request and on success it is supposed to trigger a &quot;handleClose&quot; function which is a prop to the component.</p>
  <pre class="lang-js prettyprint-override"><code>async function handleSubmit(event) {
      event.preventDefault();
      setLoading(true);
  
      const { username, password } = event.target.elements;
  
      try {
        const response = await fetch(&quot;/login&quot;, {
          method: &quot;POST&quot;,
          mode: &quot;cors&quot;,
          cache: &quot;no-cache&quot;,
          credentials: &quot;same-origin&quot;,
          headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
          },
          redirect: &quot;follow&quot;,
          referrerPolicy: &quot;no-referrer&quot;,
          body: JSON.stringify({
            username: username.value,
            password: password.value,
          }),
        });
        await response.json();
  
        if (response.status === 200) {
          props.handleClose();
        } else {
          setInvalidUsernamePassword(true);
          setLoading(false);
        }
      } catch (error) {
        alert(&quot;Error detected&quot;, error);
      }
    }
  </code></pre>
  <p>When I test, I validate that the function <code>handleClose</code> is invoked.</p>
  <pre class="lang-js prettyprint-override"><code>
  const setup = async () =&gt; {
    const handleClose = jest.fn();
    const utils = await render(&lt;Primary handleClose={handleClose} /&gt;);
    const usernameField = screen.getByLabelText(/Username/);
    const passwordField = screen.getByLabelText(/Password/);
    const submitButton = screen.getByRole(&quot;button&quot;, {
      name: /Sign In/i,
    });
  
    return {
      usernameField,
      passwordField,
      submitButton,
      handleClose,
      ...utils,
    };
  };
  
  test(&quot;The handleClose function prop is triggered&quot;, async () =&gt; {
    const { usernameField, passwordField, submitButton, handleClose } =
      await setup();
    fireEvent.change(usernameField, { target: { value: faker.lorem.word() } });
    fireEvent.change(passwordField, { target: { value: faker.lorem.word() } });
  
    fireEvent.click(submitButton);
  
    expect(handleClose).toHaveBeenCalled();
  });
  </code></pre>
  <p>This fails</p>
  <pre><code>
      Expected number of calls: &gt;= 1
      Received number of calls:    0
  </code></pre>
  <p>However, when I invoke the prop function before the start of the async function, it passes, which tells me it's not how I am passing the jest.fn() into the component.</p>
  <p>I have investigated whether an error gets thrown (it doesn't), and I also know that <code>msw</code> is working as intended, and that the network request responds with a 200 unless I send a password value of &quot;badpassword&quot; which is used to simulate an incorrect email or password in another test in the same file.</p>
  <p>I also converted the function to use promises. No change.</p>