title: Testing asynchronous useEffect
body: <p>My functional component uses the <code>useEffect</code> hook to fetch data from an API on mount. I want to be able to test that the fetched data is displayed correctly.</p>
  
  <p>While this works fine in the browser, the tests are failing because the hook is asynchronous the component doesn't update in time.</p>
  
  <p>Live code:
  <a href="https://codesandbox.io/s/peaceful-knuth-q24ih?fontsize=14" rel="noreferrer">https://codesandbox.io/s/peaceful-knuth-q24ih?fontsize=14</a></p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from "react";
  
  function getData() {
    return new Promise(resolve =&gt; {
      setTimeout(() =&gt; resolve(4), 400);
    });
  }
  
  function App() {
    const [members, setMembers] = React.useState(0);
  
    React.useEffect(() =&gt; {
      async function fetch() {
        const response = await getData();
  
        setMembers(response);
      }
  
      fetch();
    }, []);
  
    return &lt;div&gt;{members} members&lt;/div&gt;;
  }
  
  export default App;
  </code></pre>
  
  <p><strong>App.test.js</strong></p>
  
  <pre><code>import App from "./App";
  import React from "react";
  import { mount } from "enzyme";
  
  describe("app", () =&gt; {
    it("should render", () =&gt; {
      const wrapper = mount(&lt;App /&gt;);
  
      console.log(wrapper.debug());
    });
  });
  </code></pre>
  
  <p>Besides that, Jest throws a warning saying:
  <code>Warning: An update to App inside a test was not wrapped in act(...).</code></p>
  
  <p>I guess this is related? How could this be fixed?</p>