Cannot read property "then" of undefined when testing next/link with @testing-library/react

[JRasmusBm]

Bug report

Preamble

Thank you so much for this awesome library and what you do for the community! I would not be here asking this question if I didn't really appreciate what you do! The same goes for the whole testing-library community, if you think I should reach out to them with the issue instead.

What I am trying to achieve

1. I want to use the Link component in the actual app due to accessibility and performance
2. I want to test transitions from and to pages

Describe the bug

The click simulation throws an error when using @testing-library/react

To Reproduce

Reproduction available in this code sandbox:

https://codesandbox.io/embed/hello-world-u8r6s

Run npm run test and the error will appear.

Expected behavior

The simulation should work, i.e. one should be navigated to the other page in the test (An alternative would be to suggest a way to simulate that behavior myself).

Screenshots

System information

• OS: Ubuntu 18
• Version of Next.js: 9.0.6

[craigpg]

From what I can see, the issue with your test is that you're asking the link to handle the click without a router. Normally the router is created by the client when the page loads, but there's no client since you're just rendering a component in isolation.

For this test, you can setup a mock router to confirm that when the link is clicked that the correct path is pushed. For example:

import Router from 'next/router';
const routerPushed = jest.fn();
const mockedRouter = {
  push: (path) => {
    routerPushed(path);
    return new Promise((resolve, reject) => resolve());
  }
};
Router.router = mockedRouter;

And in your test...

    test("should navigate to the about page", async () => {
      const { getByText, queryByText } = result;
      fireEvent.click(getByText(/about/i));
      expect(routerPushed).toHaveBeenCalledWith('/about')

If you are trying to test page navigation, I think you're going to need a running server. See the client-navigation tests for an example of how navigation is tested.

[JRasmusBm]

Very, very helpful! 👍

Thank you for taking the time. I will indeed be using the first way predominately, but it is also nice to know that if I actually needed page navigation it is possible.

[gerarddegas]

I'm still having this issue, even when I followed the above solution it still gave me the error Cannot read property "then" of undefined, is there a reference to testing for the next/link somewhere? I checked the source code and couldn't find any

[mengyu-zhang-dev]

We are seeing same issue on 9.5.5. mock Router.router push doesn't work

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.