title: React testing-library - Testing a promise that set states in the first useEffect hook
body: <p>I have a useEffect hook that loads when the component is mounted, as so:</p>
  
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
     listFiles().then(keys =&gt; {
        setKeys(keys)
        console.log(keys)
     }).catch(err =&gt; {
          showFail(err.message)
     })
  }, [])
  </code></pre>
  
  <p>I'm trying to test the function with react testing-library, simply using the render function:</p>
  
  <pre class="lang-js prettyprint-override"><code>beforeEach(() =&gt; {
    render(&lt;Dashboard /&gt;)
  })
  </code></pre>
  
  <p>However, when I run any test that resolves the promise and sets the state: </p>
  
  <pre class="lang-js prettyprint-override"><code>jest.mock('../utils/storage', () =&gt; ({
      listFiles: jest.fn(() =&gt; Promise.resolve([])),
  }))
  </code></pre>
  
  <p>I end up with a weird warning message about using <code>act</code> to to wrap the event:</p>
  
  <pre class="lang-js prettyprint-override"><code>  Warning: An update to Dashboard 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 */
      });
      /* assert on the output */
  
      This ensures that you're testing the behavior the user would see in the browser. Learn more at .. 
          in Dashboard
  
        18 |     useEffect(() =&gt; {
        19 |         listFiles().then(keys =&gt; {
      &gt; 20 |             setKeys(keys)
           |             ^
        21 |             console.log(keys)
        22 |         }).catch(err =&gt; {
        23 |             showFail(err.message)
  </code></pre>
  
  <p>I have tried wrapping the render in an <code>act</code>, but it doesn't seem to change anything. </p>
  
  <p>Any suggestions as to what I'm doing wrong here? Should I be rendering in some other way?</p>
  
  <p>Thanks in advance! </p>