title: How to test react form onSubmit with formik and react testing library?
body: <p>I'm learning how to test react form and I don't understand why my test does not success ?</p>
  <pre class="lang-js prettyprint-override"><code>    Expected: {&quot;email&quot;: &quot;john.dee@someemail.com&quot;, &quot;firstName&quot;: &quot;John&quot;, &quot;lastName&quot;: &quot;Dee&quot;, &quot;password&quot;: &quot;password&quot;}
  
      Number of calls: 0
  </code></pre>
  <p>my form is simple:</p>
  <pre class="lang-js prettyprint-override"><code>const SignUpForm = () =&gt; {
    const formik = useFormik({
      initialValues: initialValues,
      validationSchema: schema,
      onSubmit: submitForm,
    });
  
    return (
      &lt;form onSubmit={formik.handleSubmit}&gt;
        &lt;label htmlFor=&quot;firstName&quot;&gt;First Name&lt;/label&gt;
        &lt; input ..&gt;
        &lt;label htmlFor=&quot;lastName&quot;&gt;Last Name&lt;/label&gt;
        &lt; input ..&gt;
        &lt;label htmlFor=&quot;password&quot;&gt;password&lt;/label&gt;
        &lt; input ..&gt;
        &lt;label htmlFor=&quot;email&quot;&gt;Email&lt;/label&gt;
        &lt; input ..&gt;
        &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    );
  };
  
  export default SignUpForm;
  </code></pre>
  <p>and the test:</p>
  <pre class="lang-js prettyprint-override"><code>test(&quot;rendering and submitting a basic Formik form&quot;, async () =&gt; {
    const handleSubmit = jest.fn();
    render(&lt;SignUpForm onSubmit={handleSubmit} /&gt;);
  
    userEvent.type(screen.getByLabelText(/First Name/i), &quot;John&quot;);
    userEvent.type(screen.getByLabelText(/Last Name/i), &quot;Dee&quot;);
    userEvent.type(screen.getByLabelText(/Email/i), &quot;john.dee@someemail.com&quot;);
    userEvent.type(screen.getByLabelText(/password/i), &quot;password&quot;);
  
    userEvent.click(screen.getByRole(&quot;button&quot;, { name: /Submit/i }));
  
    await waitFor(() =&gt;
      expect(handleSubmit).toHaveBeenCalledWith({
        email: &quot;john.dee@someemail.com&quot;,
        firstName: &quot;John&quot;,
        lastName: &quot;Dee&quot;,
        password: &quot;password&quot;,
      })
    );
  });
  </code></pre>
  <p>I did export &quot;initialValues&quot;, &quot;schema&quot; and &quot;onsubmit&quot; in others files, and when I do test myself all seems to be working properly.</p>
  <p>In the console, when the test is done I can see my form with all values filled like:</p>
  <pre class="lang-js prettyprint-override"><code> &lt;input id=&quot;email&quot; name=&quot;email&quot; type=&quot;email&quot; value=&quot;john.dee@someemail.com&quot; /&gt;
  </code></pre>
  <p>update: here is a link with all relevant code: <a href="https://pastebin.com/CbpFFzf4" rel="nofollow noreferrer">https://pastebin.com/CbpFFzf4</a></p>