React项目Testing Library render报错，是否因依赖不匹配导致？

核心问题：依赖版本不兼容 #

你的package.json里存在两处关键版本不匹配：

• React（v18.0.0）和react-dom（v17.0.1）版本不一致，React 18要求react-dom必须同为18.x版本
• Testing Library依赖版本过旧（@testing-library/react v9.3.2），不支持React 18的渲染机制

具体修复步骤 #

1. 统一React和react-dom版本
   修改package.json的dependencies部分，将react-dom版本改为和react一致：

"react": "^18.0.0",
"react-dom": "^18.0.0"

2. 升级Testing Library相关依赖
   将测试库依赖升级到适配React 18的版本，替换原有的测试依赖：

"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.2.1"

3. 重新安装依赖
   删除node_modules和package-lock.json（或yarn.lock），然后执行：

npm install

4. 修正测试代码语法
   你的测试代码示例存在语法错误，缺少闭合括号，修正为：

render(<Mycomponent />);

额外排查点 #

如果以上步骤后问题仍存在，检查Mycomponent中是否使用了useRef：

• 确保ref变量通过useRef(null)初始化，而非直接声明为undefined
• 避免在组件挂载完成前（比如useEffect之外的顶层代码）访问ref.current

内容的提问来源于stack exchange，提问作者Ava Kim