Failing tests with react testing library, vitest and [email protected]

[dimitur2204]

Bug report

There seems to be an issue while testing with vitest and rendering Radix components.

Current Behavior

When trying to run the test an error occurs

Error: Cannot find module '/Users/dimitar.nizamov/dev/uniwise/radix-vite-testing/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/react/jsx-runtime' imported from /Users/dimitar.nizamov/dev/uniwise/radix-vite-testing/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@radix-ui/react-dialog/dist/index.mjs
Did you mean to import [email protected]/node_modules/react/jsx-runtime.js?

Expected behavior

To not fail.

Reproducible example

I did not manage to get the test running in one of the codesandboxes. This is a minimal public repo I have created, with a workflow setup where you can see the error.
https://github.com/dimitur2204/radix-vite-testing

Suggested solution

I have no idea where the problems stems from. No suggested solution
My first assumption is it has something to do with the react version. Since I have seen these react/jsx-runtime errors with react 17 before.

Additional context

I have another branch on the repository with the reproduction called npm, where I use npm instead of pnpm. The result is the same.

This error started occurring in one of my company's private repos a couple of days ago. I ran workflows on commits that were previously not failing. They started failing out of nowhere with this exact error. We have not upgraded any versions of radix components at all these past days.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	1.1.1
React	n/a	17.0.1
Node	n/a	20.11.0
pnpm	n/a	9.2.0
Operating System	MacOS	4.5 (23F79)

[nawed2611]

does upgrading react version work?

[nawed2611]

facing a similar error

ERROR in ./node_modules/@radix-ui/react-tooltip/dist/index.mjs 18:0-46
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/node_modules/@radix-ui/react-tooltip/dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@radix-ui/react-visually-hidden/dist/index.mjs 4:0-40
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/node_modules/@radix-ui/react-visually-hidden/dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[dimitur2204]

does upgrading react version work?

Haven't had the time to try. If a minor react version upgrade fixes it it will be nice

[vladmoroz]

The root of the issue is with React 17:
facebook/react#20235
vitest-dev/vitest#2468

I'd recommend to upgrade to React 18 and also pin your dependencies as this most definitely sounds like an "accidental" upgrade:

This error started occurring in one of my company's private repos a couple of days ago. I ran workflows on commits that were previously not failing. They started failing out of nowhere with this exact error. We have not upgraded any versions of radix components at all these past days.

---

Otherwise have vitest resolve your @radix-ui deps instead of Node

test: {
  deps: {
    inline: [/@radix-ui/],
  },
}