title: Testing with useEffect and jest.useFakeTimer()
body: <p>I'm trying to create simple refresher component here</p>
  
  <p><strong>Refresher.js</strong></p>
  
  <pre><code>import { useEffect } from 'react';
  
  const Refresher = ({ onRefresh }) =&gt; {
    useEffect(() =&gt; {
      const id = setInterval(onRefresh, 60000);
      return () =&gt; {
        clearInterval(id);
      };
    }, [onRefresh]);
  
    return null;
  };
  
  export default Refresher;
  
  </code></pre>
  
  <p>However, when i try to test it using <code>jest.useFakeTimers()</code>, somehow it's didn't work. The stub is not called even after <code>jest.runOnlyPendingTimers()</code></p>
  
  <pre><code>import React from 'react';
  import renderer from 'react-test-renderer';
  import Refresher from '../Refresher';
  
  describe('Refresher', () =&gt; {
    test('should refresh the result every 60 seconds', () =&gt; {
      jest.useFakeTimers();
  
      const onRefreshSpy = jest.fn();
  
      const refresher = renderer.create(&lt;Refresher onRefresh={onRefreshSpy} /&gt;);
  
      expect(onRefreshSpy).not.toHaveBeenCalled();
      jest.runOnlyPendingTimers();
      refresher.update(); // Trying force update here
  
      expect(onRefreshSpy).toHaveBeenCalled();
    });
  });
  </code></pre>
  
  <p>If not mistaken, the interval will not run if the component are not update, so i tried to use <code>refresher.update()</code>, but seems like it's not really work. </p>
  
  <p>Anyone know how to fix the test here?</p>