Error: [vite-plugin-ssr@0.4.43][Wrong Usage][`navigate(url)`] Something is wrong with your environment (it loads the wrong `vite-plugin-ssr/client/router` entry). This may be happening if you use Jest or Babel. Open a new GitHub issue to discuss a solution.

Question / Discussion

After adding import { navigate } from 'vite-plugin-ssr/client/router' to one of my components I now get the following error when trying to test it:

Error: [vite-plugin-ssr@0.4.43][Wrong Usage][`navigate(url)`] Something is wrong with your environment (it loads the wrong `vite-plugin-ssr/client/router` entry). This may be happening if you use Jest or Babel. Open a new GitHub issue to discuss a solution.

I am using React Testing Library to render and test my component. I am not using Jest or Babel.

[brillout]

Let me know if you need the fix to be released sooner rather than later.

Also, in case your employer has the financial capabilities: https://github.com/sponsors/brillout. Sponsors make a huge difference and allow me to further work on VPS.

[robinelvin]

From my investigations it looks like it’s: https://github.com/brillout/vite-plugin-ssr/blob/8f8cab47c2a229ab6161e8bb01d3fda447602ceb/vite-plugin-ssr/node/client/router.ts#L6

In tests this is being evaluated when the function is imported and as the tests run in a jsdom environment under Node it fails the assertion. If I remove this assertion my tests then run as expected. However, in a component which uses navigate I now get:

Error: [vite-plugin-ssr@0.4.43][Wrong Usage][`navigate(url)`] The `navigate(url)` function is only callable in the browser but you are calling it in Node.js.

I’m not sure what the solution is. I think I need some guidance on how testing should be done.

Fixed my test by adding:

vi.mock('vite-plugin-ssr/client/router', () => {
    return {
        navigate: vi.fn(),
    };
});