title: Test Nextjs <Link /> with Jest + Testing-Library
body: <p>When I'm testing the <code>&lt;Link /&gt;</code> behavior, expecting it to redirect to a certain route, there's a TypeError (<code>Cannot read property 'push' of null</code>).</p>
  <p>This is the component I'm currently testing:</p>
  <pre><code>import React from &quot;react&quot;
  import Link from &quot;next/link&quot;
  
  const Sandbox = () =&gt; {
    return (
      &lt;div&gt;
        &lt;Link href=&quot;/about&quot;&gt;
          &lt;a data-testid=&quot;mytest&quot;&gt;Click Me&lt;/a&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    )
  }
  
  export default Sandbox
  </code></pre>
  <p>And this is the test I'm running:</p>
  <pre><code>import React from &quot;react&quot;
  import { render, fireEvent } from &quot;@testing-library/react&quot;
  import { useRouter } from &quot;next/router&quot;
  import Sandbox from &quot;..&quot;
  
  jest.mock(&quot;next/router&quot;, () =&gt; ({
    useRouter: jest.fn(),
  }))
  
  describe(&quot;Sandbox&quot;, () =&gt; {
    it.only(&quot;should navigate accordingly&quot;, () =&gt; {
      const push = jest.fn()
      useRouter.mockImplementationOnce(() =&gt; ({
        asPath: &quot;/&quot;,
        push,
      }))
  
      const { getByTestId } = render(&lt;Sandbox /&gt;)
  
      const mytest = getByTestId(&quot;mytest&quot;)
      fireEvent.click(mytest)
      expect(push).toHaveBeenCalledWith(&quot;/about&quot;)
    })
  })
  </code></pre>
  <p>I believe that I've mocked everything I need, so I don't really understand why the router can't actually &quot;push&quot;.
  What am I missing here?</p>