ERROR: Not implemented navigation ( except hash changes )

[annaLucian]

Hi I am facing a problem when I trying to do a test

Tools:

• Jest, testing library
• App router

Problem:

• I want to test an user interaction with a ( a click event )

test.only('should redirect to correct pages', async () => {
    render(<Header />);

    const doctorLink = screen.getByRole('link', { name: /doctores/i });
    const characterLink = screen.getByRole('link', { name: /conoce/i });
    const contactLink = screen.getByRole('link', { name: /contact/i });
    await userEvent.click(doctorLink);
    expect(window.location.pathname).toBe('/doctors');
  });
  

ERROR:

Error: Not implemented: navigation (except hash changes)
at module.exports (/Users/manuel.ochoa/Desktop/PERSONAL/doctor-who/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at navigateFetch (/Users/manuel.ochoa/Desktop/PERSONAL/doctor-who/node_modules/jsdom/lib/jsdom/living/window/navigation.js:77:3)
at exports.navigate (/Users/manuel.ochoa/Desktop/PERSONAL/doctor-who/node_modules/jsdom/lib/jsdom/living/window/navigation.js:55:3)
at Timeout._onTimeout (/Users/manuel.ochoa/Desktop/PERSONAL/doctor-who/node_modules/jsdom/lib/jsdom/living/nodes/HTMLHyperlinkElementUtils-impl.js:81:7)
at listOnTimeout (node:internal/timers:569:17)
at processTimers (node:internal/timers:512:7) {
type: 'not implemented'
}

Thanks in advance

[washingtonsoares]

This approach solved my issue when using NextJS Link.

jest.mock("next/link", () => {
  const mockLink = ({
    children,
    href,
    onClick,
  }: {
    children: React.ReactNode;
    href: string;
    onClick: () => void;
  }) => {
    return (
      <a
        href={href}
        onClick={(e) => {
          e.preventDefault();
          onClick();
        }}
      >
        {children}
      </a>
    );
  };
  mockLink.displayName = "Link";
  return mockLink;
});