Next.js Discord

Discord Forum

React version conflict with react-testing-library in Next.js 15

Unanswered
Alano Español posted this in #help-forum
Open in Discord
Avatar
Alano EspañolOP
I am trying to setup tests for my Next.js 15 apps. Based on https://nextjs.org/docs/app/building-your-application/testing/jest, I need to install a few dependencies to setup jest as my test runner.

I tried to install the dependencies listed in the docs:
npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node

When trying to install @testing-library/react, I get an error because of react version conflict with Next.js 15.
Here are the logs:
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: test2@0.1.0
npm error Found: react@19.0.0-rc-66855b96-20241106
npm error node_modules/react
npm error   react@"19.0.0-rc-66855b96-20241106" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@16.0.1
npm error node_modules/@testing-library/react
npm error   dev @testing-library/react@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.


It seems that @testing-library/react uses react 18.

What I had tried:
1. Downgrading react to version 18.
This works but based on Next.js blog (https://nextjs.org/blog/next-15#react-19), it is stated that only pages router have backward compatibility for react 18. I found that the example in the docs (https://github.com/vercel/next.js/tree/canary/examples/with-jest) uses react 18 and the test ran successfully. Does using react version 18 with Next.js app router is the solution?

2. Using --legacy-peer-deps
The installation passes but I can't seem to run my test. It seems like the conflicted react might be the cause?


How should I proceed with setting up my test? Should I wait for a while for react-testing-library to be updated to support react 19?

1 Reply

Avatar
Alano EspañolOP
This problem is reproducable in a fresh Next.js repo using
npx create-next-app@latest
and trying to install react testing library
@testing-library/react