@testing-library/react is a highly popular testing library for React components, which is used to write test code related to user interactions. It can simulate user behavior to verify whether the behavior of components meets the expected criteria.
When integrating @testing-library/react during component development, the following error occurred:
Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'Based on the error message, @testing-library/react attempted to import the client module from react-dom but failed to locate it.
Problem Cause
There are significant differences in the module structure between React 17 and React 18. React 18 introduced new modules (such as react-dom/client), which do not exist in React 17. If your project is using React 17 while the version of @testing-library/react depends on the features of React 18, it will lead to the issue of the module not being found.
Solutions
Upgrade to React 18
If your project permits an upgrade to React 18, this is the most straightforward solution. React 18 brings numerous new features and improvements, and it can also resolve the current compatibility issue.
Run the following commands in the terminal to upgrade react and react-dom to the latest versions:
npm install react@latest react-dom@latestDowngrade @testing-library/react
If your project needs to remain on React 17, or if upgrading to React 18 would result in excessive modifications, you can consider downgrading @testing-library/react to a version that is compatible with React 17.
The 12.x version of @testing-library/react is compatible with React 17. All we need to do is downgrade @testing-library/react.
Run the following command in the terminal to downgrade @testing-library/react to a compatible version:
npm install @testing-library/react@12.1.5The error "Cannot find module'react-dom/client'" should be resolved through the above methods. If you still encounter problems, feel free to discuss them in the comment section.
