title: Warning: An update to App inside a test was not wrapped in act(...) in enzyme and hooks
body: <p>I have written this component. it fetchs data using hooks and state. Once it is fetched the loading state is changed to false and show the sidebar.</p>
  <p>I faced a problem with Jest and Enzyme, as it does throw a warning for Act in my unit test. once I add the act to my jest and enzyme the test is failed!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// @flow
  import React, { useEffect, useState } from 'react';
  import Sidebar from '../components/Sidebar';
  import fetchData from '../apiWrappers/fetchData';
  
  const App = () =&gt; {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
  
    useEffect(() =&gt; {
      const getData = async () =&gt; {
        try {
          const newData = await fetchData();
          setData(newData);
          setLoading(false);
        }
        catch (e) {
          setLoading(false);
        }
      };
      getData();
      // eslint-disable-next-line
    }, []);
    return (
      &lt;&gt;
        {!loading
          ? &lt;Sidebar /&gt;
          : &lt;span&gt;Loading List&lt;/span&gt;}
      &lt;/&gt;
    );
  };
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>And, I have added a test like this which works perfectly.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { mount } from 'enzyme';
  import fetchData from '../apiWrappers/fetchData';
  import data from '../data/data.json';
  import App from './App';
  
  jest.mock('../apiWrappers/fetchData');
  
  const getData = Promise.resolve(data);
  fetchData.mockReturnValue(getData);
  
  describe('&lt;App/&gt; Rendering using enzyme', () =&gt; {
    beforeEach(() =&gt; {
      fetchData.mockClear();
    });
  
    test('After loading', async () =&gt; {
      const wrapper = mount(&lt;App /&gt;);
      expect(wrapper.find('span').at(0).text()).toEqual('Loading List');
  
      const d = await fetchData();
      expect(d).toHaveLength(data.length);
  
      wrapper.update();
      expect(wrapper.find('span').exists()).toEqual(false);
      expect(wrapper.html()).toMatchSnapshot();
    });
  });</code></pre>
  </div>
  </div>
  </p>
  <p>So, I got a warning:</p>
  <pre><code>Warning: An update to App inside a test was not wrapped in act(...).
  
  When testing, code that causes React state updates should be wrapped into act(...):
  
  act(() =&gt; {
    /* fire events that update state */
  });
  </code></pre>
  <p>I did resolve the warning like this using { act } react-dom/test-utils.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { act } from 'react-dom/test-utils';
  import { mount } from 'enzyme';
  import fetchData from '../apiWrappers/fetchData';
  import data from '../data/data.json';
  import App from './App';
  
  jest.mock('../apiWrappers/fetchData');
  
  const getData = Promise.resolve(data);
  fetchData.mockReturnValue(getData);
  
  describe('&lt;App/&gt; Rendering using enzyme', () =&gt; {
    beforeEach(() =&gt; {
      fetchData.mockClear();
    });
  
    test('After loading', async () =&gt; {
      await act(async () =&gt; {
        const wrapper = mount(&lt;App /&gt;);
        expect(wrapper.find('span').at(0).text()).toEqual('Loading List');
  
        const d = await fetchData();
        expect(d).toHaveLength(data.length);
  
        wrapper.update();
        expect(wrapper.find('span').exists()).toEqual(false);
        expect(wrapper.html()).toMatchSnapshot();
      });
    });
  });</code></pre>
  </div>
  </div>
  </p>
  <p>But, then my test is failed.</p>
  <pre><code>&lt;App/&gt; Rendering using enzyme › After loading
  
  expect(received).toEqual(expected) // deep equality
  
  Expected: false
  Received: true
  
    35 | 
    36 |       wrapper.update();
  &gt; 37 |       expect(wrapper.find('span').exists()).toEqual(false);
  </code></pre>
  <p>Does anybody know why it fails? Thanks!</p>
  <pre><code>&quot;react&quot;: &quot;16.13.1&quot;,
  &quot;enzyme&quot;: &quot;^3.11.0&quot;,
  &quot;enzyme-adapter-react-16&quot;: &quot;^1.15.3&quot;,
  </code></pre>