title: jest testing mock history.push not called even though it was called in the component
body: <p>I have a component called <code>componentA</code> that render some text and a button like this:</p>
  <pre><code>// Do some import statements
  // ComponentA
  function ComponentA() {
    const [submitState, setState] = useState(false);
    useEffect(()=&gt; {
     if (submitState) {
       console.log(&quot;history.push called&quot;);
       history.push('/new-route');
     }
    }) 
  
    return ( &lt;div&gt;Hello 
    &lt;Button onClick ={()=&gt; setState(true}&gt; Click here &lt;/Button&gt;  
    &lt;/div&gt;);
  }
  </code></pre>
  <p>I want to test that upon clicking the button, history.push is called with the argument <code>/new-route</code>. Here is my testing:</p>
  <pre><code>import {render} from '@testing-library/react'
  
  describe(&quot;Test Component A&quot;, () =&gt; {
    const history = createMemoryHistory();
    const pushSpy = jest.spyOn(history, 'push');
  
    test(&quot;it should call history.push with correct argument&quot;, async () =&gt; {
       //render componentA
        const {container} = render(&lt;ComponentA  /&gt;)
       // Point B: click
       fireEvent.click(screen.getByText('Click here'));
       // Poin C: assert that the history.push is called
        expect(pushSpy).toHaveBeenCalledWith('/new-route');
    });
  });
  </code></pre>
  <p>I expected this to pass because the line where the <code>history.push</code> did print out that it was called which meant <code>history.push</code> did run. And when I printed out <code>history.location.pathname</code> it also returned the correct route. However the test still failed with the message:</p>
  <pre><code>expect(jest.fn()).toHaveBeenCalledWith(...expected)
  
  Number of calls: 0
  </code></pre>
  <p>Anyone knows why ? Thank you</p>