问题背景

@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 带来了许多新特性和改进,同时也能解决当前的兼容性问题。

在终端中运行以下命令,将reactreact-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 这个错误,如果还有问题,欢迎评论区讨论。