RouterProvider not working in tests (Vitest)

[rothsandro]

I'm using React Router as a...

library

Reproduction

1. Clone the repo https://github.com/rothsandro/repro.react-router-provider-vitest
2. Install dependencies npm install
3. Run the tests npm run test

There is a simple test that renders the RouterProvider with a memory router.
We then click on a button that triggers a navigation with flushSync: true using the useNavigate() hook.

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 35.43 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.12.3 - /opt/homebrew/bin/pnpm
    bun: 1.0.36 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 131.1.73.97
    Chrome: 130.0.6723.70
    Safari: 17.2.1
  npmPackages:
    react-router: ^7.0.2 => 7.0.2 
    vite: ^5.4.11 => 5.4.11

Used Package Manager

npm

Expected Behavior

The test should run successfully and without error or warning.

Actual Behavior

The tests throws an error:

useNavigate() may be used only in the context of a <Router> component.

The upgrade guide mentions that for non-DOM the router provider should be imported from react-router instead of react-router/dom. The repro uses Vitest with happy-dom so it's a DOM environment. There is a 2nd test that uses the router provider from react-router. This solves the error from above but will log a warning to the console that the router provider from react-router/dom should be used for flushSync (skip the failing test to see the warning).

[steven-muniz]

I am literally having this same issue! Weird part is all the test work fine in local, once I load them to the CI/CD that's when I see if fail.

[hermaneyd]

In a similar case, adding react-router-dom dependency and importing everything from that package solved my error.

package.json

{
...
  "dependencies": {
    ...
    "react-router": "7.1.1",
    "react-router-dom": "7.1.1",
  }
}

...test.tsx

import { createMemoryRouter, RouterProvider, useNavigate } from "react-router-dom";

[rothsandro]

@hermaneyd That's the old package and is only used for a smooth upgrade.

[samuelsantia-vass]

Hey, I have the same issue upgrading one of my projects. I've just fixed it updating my imports to use in all cases react-router instead react-router-dom

It might be something on how vite treat the modules, but yes is very weird 🤔

I'm using the createRoutesStub helper

[brophdawg11]

So I think the linked PR should fix our end of this and stop bundling react-router inside the react-rouyter/dom CJS export. But when I update your reproduction to use an experimental from that brach (npm i react-router@0.0.0-experimental-b2bc694a6) I still see the error and I've traced it down to the following:

• vitest seems to be resolving the node_modules/react-router/dist/development/dom-export.js CJS file for react-router/dom
• This now require's (instead of bundles) the core of react-router:
  • var import_react_router = require("react-router");
• But that require seems to be resolving to the node_modules/react-router/dist/development/index.mjs ESM file

This usage of both CJS/ESM files is causing duplicate React contexts which is the source of the error. I'll keep digging but unsure if this is still something on our bundler end or something about the vite or project setup?

[rothsandro]

@brophdawg11 I just installed react-router@0.0.0-experimental-b2bc694a6 in my reproduction and the test is green now 🤔

[brophdawg11]

oh - weird. Let me try again in my clone - maybe I messed up my install. I was doing a lot of local copying around of built files and such but I thought I did a fresh npm install of the experimental at the end.

[brophdawg11]

Hm - yeah I'm still getting the error. If you pull my branch fresh and npm install && npm run test does it work for you?

https://github.com/brophdawg11/repro.react-router-provider-vitest/tree/rr-experimental

[rothsandro]

I don't get the original context error anymore with your branch.

I get an error from testing library but that's just because of the missing clean up, adding afterEach(() => cleanup()); solves the problem.

The warning You provided the flushSync option... from the 2nd test stays but that's expected.