Next.js Discord

Discord Forum

Trouble with setting up Jest in Nextjs 15 with React 19

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:
Using --force
The installation passes but I can't seem to run my test. It seems like the conflicted react might be the cause?

Error output:
    Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

       6 | describe("Page", () => {
       7 |   it("renders a heading", () => {
>  8 |     render(
         |           ^
       9 |       <Suspense>
      10 |         <Page />
      11 |       </Suspense>,



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?

3 Replies

Avatar
African Slender-snouted Crocodile
The usual answer to this question seems to be to follow the recommendation of npm and use --legacy-peer-deps. In this case there might also be suggestions that using Jest with Next.js is tricky, and your time might be better spent using e2e and Playwright or similar?
Your specific problem seems to involve a Suspense tag, so there may be a real issue too...
Avatar
Alano EspañolOP
Update: I have decided to downgrade my Next.js version to v14. Unit testing with jest works in this version.
I guess it is better to wait for React Testing Library to be updated with React 19 support if I were to use Next.js v15 with unit test via jest.