title: Testing a fetch.catch in custom hook
body: <p>I've got this custom hook:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { useMessageError } from 'components/Message/UseMessage';
  
  export interface Country {
    code: string;
    name: string;
  }
  
  export default function useCountry(): Array&lt;Country&gt; {
    const [countries, setCountries] = React.useState&lt;Country[]&gt;([]);
    const { showErrorMessage } = useMessageError();
  
    React.useEffect(() =&gt; {
      fetch('/api/countries', {
        method: 'GET',
      })
        .then(data =&gt; data.json())
        .then(function(data) {
          // ..
        })
        .catch(() =&gt; showErrorMessage());
    }, []);
  
    return countries;
  }
  </code></pre>
  
  <p>I want to test catching an error if there will be invalid response. With that, error message should appear thanks to <code>showErrorMessage()</code>. And I've got this test:</p>
  
  <pre class="lang-js prettyprint-override"><code>const showErrorMessage = jest.fn();
  
  jest.mock('components/Message/UseMessage', () =&gt; ({
    useMessageError: () =&gt; ({
      showErrorMessage: showErrorMessage,
    }),
  }));
  
  import useCountry from 'components/Country/useCountry';
  import { renderHook } from '@testing-library/react-hooks';
  import { enableFetchMocks } from 'jest-fetch-mock';
  enableFetchMocks();
  
  describe('The useCountry hook', () =&gt; {
    it('should show error message', async () =&gt; {
      jest.spyOn(global, 'fetch').mockImplementation(() =&gt;
        Promise.resolve({
          json: () =&gt; Promise.reject(),
        } as Response),
      );
  
      const { result, waitForNextUpdate } = renderHook(() =&gt; useCountry());
      await waitForNextUpdate();
  
      expect(fetch).toHaveBeenCalled();
      expect(showErrorMessage).toHaveBeenCalled();
      expect(result.current).toEqual([]);
    });
  });
  
  </code></pre>
  
  <p>But with that, I'm getting an error:</p>
  
  <blockquote>
    <p>Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error</p>
  </blockquote>
  
  <p>What I'm doing wrong in here? I assume it is somehow related with <code>await waitForNextUpdate();</code>, but I really don't know for sure and how to manage with it.</p>