title: Testing of useEffect hook with try/catch
body: <p>I need to test <code>catch</code> when fetching data request rejects but I don't understand why error is not catched and I recieved this error: <code>UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)</code></p>
  
  <p>I have situation like this:</p>
  
  <pre><code>export const Container = ({fetchFirstAsset, fetchSecondAsset}) =&gt; {
    const [status, setStatus] = useState(null);
  
    async function fetchAssets() {
      setStatus(IN_PROGRESS);
  
      try {
        await fetchFirstAsset();
        await fetchSecondAsset()
  
        setStatus(SUCCESS);
      } catch {
        setStatus(FAILURE);
      }
    }
  
    useEffect(() =&gt; {
      fetchAssets();
    }, []);
  
    ....
  };
  </code></pre>
  
  <p>And test like this:</p>
  
  <pre><code>import {mount} from 'enzyme';
  import {act} from 'react-dom/test-utils';
  
  const fetchFirstAsset = jest.fn();
  const fetchSecondAsset = jest.fn();
  
  it('should render without errors', async () =&gt; {
    fetchFirstAsset.mockReturnValueOnce(Promise.resolve());
    fetchSecondAsset.mockReturnValueOnce(Promise.reject());
    let component;
  
    await act(async () =&gt; {
      component = mount(
        &lt;Container
          fetchFirstAsset={fetchFirstAsset}
          fetchSecondAsset={fetchSecondAsset}
        /&gt;
      );
    });
  
    expect(fetchSomething).toHaveBeenCalled();
  });
  </code></pre>
  
  <p>If I test case when <code>fetchSomething</code> resolves with <code>Promise.resolve()</code> evertyhing works fine and tests are correct but when I try to <code>Promise.reject()</code> in order to test <code>catch</code> case then this error is not catched and I have <code>unhandled promise rejection</code>.
  (Why code looks like this: In other places in the app I handle changing of status with redux, so testing of catch is easy, but in one place I need to fetch 3 different assets for component and I decided to handle change of status with <code>useState</code> because extracting 3 different statuses from redux and combining it will be ugly, with <code>useState</code> is much cleaner i think)</p>
  
  <p>Thanks in advance for help! :)</p>