Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'

While running npm test I got following error:

Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
Required stack:
node_modules/@testing-library/react/dist/pure.js
node_modules/@testing-library/react/dist/index.js

All necessary packages seem to be installed. I reinstalled react-dom, but it didn't help. Below providing imports used in my test file:

import React from "react";
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

Additionally providing my package.json:

{
"name": "fe",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fontsource/roboto": "^4.5.3",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@mui/icons-material": "^5.5.0",
"@mui/material": "5.5.3",
"@mui/styles": "^5.5.1",
"@reduxjs/toolkit": "^1.8.0",
"@testing-library/jest-dom": "5.16.3",
"@testing-library/react": "13.0.0",
"@testing-library/user-event": "14.0.4",
"axios": "^0.26.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.28.1",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/jest": "^27.4.0",
"@types/node": "^16.11.25",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@types/styled-components": "^5.1.24",
"@typescript-eslint/eslint-plugin": "^5.12.0",
"@typescript-eslint/parser": "^5.12.0",
"eslint": "^8.9.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.4.0",
"eslint-import-resolver-typescript": "^2.5.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"prettier": "2.5.1",
"typescript": "^4.5.5"
}
}

53028

小开

最佳答案

I think it's because your @testing-library/react using the newer version, just test with version of 12.1.2

小开

I was also getting the error "Cannot find module 'react-dom/client'" without mention of @testing-library/react.

Looks like the syntax to hook up the react-redux Provider has changed here: https://react-redux.js.org/introduction/getting-started (in the code block where it mentions "// As of React 18").

To get this to work I had to make sure I was on version 18 or above for react and react-dom, and updated all other client npm packages too. Many needed to be updated with:

npm update package-name --legacy-peer-deps

Took me a few hours to figure this out. Hope it helps someone!

小开

According to @testing-library/react release notes, version 13 (and above) has dropped support for React 17 and bellow. So using this library with React <= 17 will cause this error (or maybe others).

You can downgrade to any version of @testing-library/react bellow 13 to fix it. At the time of this writing the latest would be 12.1.5 which works fine with React 17.

Another option is to upgrade React to 18 and above.