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 [email protected]) 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 [email protected] 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.

[brophdawg11]

That's super odd - I still get it on a fresh clone of my fork branch. Going to check in with a few other team members and see what behavior they get and if we can figure out why it would still be failing for me

[brookslybrand]

I can confirm @rothsandro, I cloned @brophdawg11's repo, switched to the rr-experimental branch, ran npm i && npm run test and got the error

[rothsandro]

@brookslybrand Hm, weird. Could a different node/npm version be the problem?

[rothsandro]

Looks like it depends on the node version, just tested it with different versions.
The fix works with Node 21.5.0 and also with 22.5.1 but the error still occurs with 22.15.0

[markdalgleish]

Is this the same issue as #12785?

[rothsandro]

@markdalgleish Hm not sure. The other issue mentions two conditions which don't apply here:

• if your project depends on react-router and a dependency which in turn has a peer-dependency on react router
• It also only affects node 22.12 and newer

[brophdawg11]

@markdalgleish I do think this is related to #12785. With the fix in #13497, the test no longer fails on node 22.11 and continues to fail on 22.12. I just confirmed against a fresh experimental release on my form branch: https://github.com/brophdawg11/repro.react-router-provider-vitest/tree/rr-experimental

You can clone that and:

> n 22.11 && npm ci && npm run test ## ✅
> n 22.12 && npm ci && npm run test ## 💥

Therefore, I'm going to merge my linked PR and close this ticket out as resolved and we can continue to track the node 22.12 issue in #12785.

[brophdawg11]

@markdalgleish To clarify - I think this bundling issue was standalone and caused breakages on node <22.12. Once we fixed that, I think we now exposed the same issue as #12785 where node 22.12 and above seem to end up with both CJS and ESM modules being loaded.

[github-actions]

🤖 Hello there,

We just published version 7.6.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!