问题背景
@testing-library/react
是一个非常流行的 react 组件测试库,用于编写与用户交互相关的测试代码。它可以模拟用户行为来验证组件的行为是否符合预期。
在开发组件时集成 @testing-library/react 报了以下错误:
Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
从错误信息来看,@testing-library/react
尝试从react-dom
中引入client
模块,但未能找到。
问题原因
React 17 和 React 18 在模块结构上有显著差异。React 18 引入了新的模块(如react-dom/client
),而这些模块在 React 17 中并不存在。如果你的项目使用的是 React 17,但@testing-library/react
的版本依赖于 React 18 的特性,就会导致模块找不到。
解决方法
升级到 React 18
如果你的项目允许升级到 React 18,这是最直接的解决方案。React 18 带来了许多新特性和改进,同时也能解决当前的兼容性问题。
在终端中运行以下命令,将react
和react-dom
升级到最新版本:
npm install react@latest react-dom@latest
降级@testing-library/react
如果你的项目需要保持在 React 17,或者升级到 React 18 会带来过多的改动,可以考虑降级@testing-library/react
到与 React 17 兼容的版本。
@testing-library/react的 12.x 版本与 React 17 兼容。我们只需要降级
@testing-library/react`
在终端中运行以下命令,将@testing-library/react
降级到兼容的版本:
npm install @testing-library/react@12.1.5
通过上述方法应该就可以解决 Cannot find module'react-dom client 这个错误,如果还有问题,欢迎评论区讨论。