title: Warning: An update to UsernameForm inside a test was not wrapped in act(...)
body: <p>I have 2 components, one in function style and one in class style. I am testing them with jest and react/testing library. When I ran the function component I get this error. When I ran the class component I don't get this error. What is the difference between the function and class component here?</p>
  <blockquote>
  <p>Warning: An update to UsernameForm inside a test was not wrapped in
  act(...).</p>
  <pre><code>  When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() =&gt; {
      /* fire events that update state */
    });
    /* assert on the output */
  </code></pre>
  </blockquote>
  <p><strong>Function Component</strong></p>
  <pre><code>function UsernameForm({ updateUsername }) {
    const [{ status, error }, setState] = React.useState({
      status: &quot;idle&quot;,
      error: null,
    });
  
    async function handleSubmit(event) {
      event.preventDefault();
      const newUsername = event.target.elements.username.value;
      setState({ status: &quot;pending&quot; });
      try {
        await updateUsername(newUsername);
        setState({ status: &quot;fulfilled&quot; });
      } catch (e) {
        setState({ status: &quot;rejected&quot;, error: e });
      }
    }
  
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;label htmlFor=&quot;username&quot;&gt;Username&lt;/label&gt;
        &lt;input id=&quot;username&quot; /&gt;
        &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
        &lt;span&gt;{status === &quot;pending&quot; ? &quot;Saving...&quot; : null}&lt;/span&gt;
        &lt;span&gt;{status === &quot;rejected&quot; ? error.message : null}&lt;/span&gt;
      &lt;/form&gt;
    );
  }
  </code></pre>
  <p><strong>Class Component</strong></p>
  <pre><code>class UsernameFormClass extends React.Component {
    state = { status: &quot;idle&quot;, error: null };
    handleSubmit = async (event) =&gt; {
      event.preventDefault();
      const newUsername = event.target.elements.username.value;
      this.setState({ status: &quot;pending&quot; });
      try {
        await this.props.updateUsername(newUsername);
        this.setState({ status: &quot;fulfilled&quot; });
      } catch (e) {
        this.setState({ status: &quot;rejected&quot;, error: e });
      }
    };
    render() {
      const { error, status } = this.state;
  
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;label htmlFor=&quot;username&quot;&gt;Username&lt;/label&gt;
          &lt;input id=&quot;username&quot; /&gt;
          &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;span&gt;{status === &quot;pending&quot; ? &quot;Saving...&quot; : null}&lt;/span&gt;
          &lt;span&gt;{status === &quot;rejected&quot; ? error.message : null}&lt;/span&gt;
        &lt;/form&gt;
      );
    }
  }
  
  
  test(&quot;calls updateUsername with the new username&quot;, async () =&gt; {
    const handleUpdateUsername = jest.fn();
    const fakeUsername = &quot;sonicthehedgehog&quot;;
  
    render(&lt;UsernameForm updateUsername={handleUpdateUsername} /&gt;);
  
    const usernameInput = screen.getByLabelText(/username/i);
    user.type(usernameInput, fakeUsername);
    user.click(screen.getByText(/submit/i));
  
    expect(handleUpdateUsername).toHaveBeenCalledWith(fakeUsername);
  });
  </code></pre>