React测试中出现TypeError: (0 , _reactDom.render) is not a function错误求助

兄弟，我刚学React写测试的时候也踩过这个一模一样的坑！这问题我太熟了，给你捋捋怎么解决：

首先看你测试文件里的导入逻辑，你用了react-dom的render方法对吧？这个错误要么是你用的React版本太新（React 18及以后），要么是你选错了测试场景该用的render方法——react-dom里的render本来就是给生产环境挂载组件到页面DOM用的，根本不是为测试场景设计的呀！

问题原因拆解 #

• React 18发布之后，react-dom里的旧render方法直接被移除了，换成了createRoot API，所以你再从react-dom里导入render，肯定会报错说它不是函数
• 就算是React 17及以前的版本，测试组件也不该用react-dom的render，应该用专门的测试工具，比如React Testing Library的render，它给测试做了很多优化：比如自动清理测试后的DOM、提供各种便捷的元素查询方法，用起来比直接操作原生DOM顺手多了

解决方法（推荐用测试库的写法，最规范） #

1. 先确保你装了React Testing Library，没装的话在项目根目录跑这个命令：

   npm install --save-dev @testing-library/react
   

2. 然后修改你的测试文件代码，把react-dom的render换成测试库的：

   import React from 'react';
   // 这里换成测试库的render
   import { render } from '@testing-library/react';
   import Timestamp from '../components/Timestamp'; // 补全你组件的正确路径
   
   test('时间戳组件能正常渲染', () => {
     // 用测试库的render挂载组件
     const { getByText } = render(<Timestamp />);
     // 这里可以加你的断言逻辑，比如检查时间戳格式是否符合预期
     // 示例：expect(getByText(/\d{4}-\d{2}-\d{2}/)).toBeInTheDocument();
   });
   

如果你非要用react-dom的挂载方法（不推荐） #

要是你就是想试试用react-dom的方式挂载组件，那如果是React 18的话，得改成createRoot的写法：

import React from 'react';
import { createRoot } from 'react-dom/client';
import Timestamp from '../components/Timestamp';

// 创建一个临时DOM容器
const container = document.createElement('div');
// 创建root实例
const root = createRoot(container);
// 挂载组件
root.render(<Timestamp />);

但还是强烈建议用测试库的写法，毕竟测试场景下用专门的工具才是正确的打开方式~

内容来源于stack exchange