React18下Enzyme调用mount报_reactInternals空引用错误如何解决

算力阿峰

2026-8-28

问题说明

运行环境：React 18.1.0，Enzyme 采用社区适配包 @zarconontol/enzyme-adapter-react-18
触发场景：调用 mount() 执行全量渲染生成wrapper实例时抛出异常
错误信息：TypeError: Cannot read properties of null (reading '_reactInternals')
基础触发代码：

const wrapper = mount(<App />);

关联测试逻辑（自定义setup函数）：

const setup = (state = {}) => {
  const wrapper = mount(<App />);
  // 为输入框赋值
  const inputBox = findByTestAttr(wrapper, "input-box");
  inputBox.simulate("change", { target: { value: "train" } });
  // 模拟点击提交按钮
  const submitBtn = findByTestAttr(wrapper, "submit-btn");
  submitBtn.simulate("click", { preventDefault() {} });
  return wrapper;
};

报错原因

这个错误是React 18环境下Enzyme适配层的典型兼容问题，核心触发点有两个：

所用的@zarconontol/enzyme-adapter-react-18是非官方维护的社区适配包，1.0.1之前的版本存在已知bug：在读取React Fiber内部实例的_reactInternals属性时，没有对空引用做拦截，当组件渲染过程中存在懒加载、Suspense、异步状态更新逻辑时，适配器拿到的节点引用为null，直接抛出类型错误。
React 18默认采用并发渲染机制，所有状态更新都是异步批量处理的，原测试逻辑没有用act包裹渲染和交互操作，也没有在操作后同步wrapper的内部引用，导致Enzyme持有的实例和实际渲染的Fiber节点脱节，读取属性时命中空值。

修复方案

按顺序操作即可解决：

先升级适配包到修复了空引用bug的版本，执行对应安装命令：
npm用户执行：npm install @zarconontol/enzyme-adapter-react-18@^1.0.2 --save-dev
yarn用户执行：yarn add @zarconontol/enzyme-adapter-react-18@^1.0.2 -D
检查Enzyme全局配置，确保适配器只在测试初始化文件（Jest配置里setupFilesAfterEnv指向的文件）中注册一次，不要在单测文件内重复注册，标准配置代码如下：

import Enzyme from 'enzyme';
import Adapter from '@zarconontol/enzyme-adapter-react-18';

Enzyme.configure({ adapter: new Adapter() });

调整setup函数逻辑，用act包裹所有渲染、用户交互操作，每次操作后调用wrapper.update()强制同步实例引用，修正后的代码：

import { act } from 'react-dom/test-utils';

const setup = (state = {}) => {
  let wrapper;
  // 包裹首次渲染逻辑，等待所有同步更新提交
  act(() => {
    wrapper = mount(<App />);
  });
  wrapper.update();

  // 输入框赋值操作
  const inputBox = findByTestAttr(wrapper, "input-box");
  act(() => {
    inputBox.simulate("change", { target: { value: "train" } });
  });
  wrapper.update();

  // 提交按钮点击操作
  const submitBtn = findByTestAttr(wrapper, "submit-btn");
  act(() => {
    submitBtn.simulate("click", { preventDefault() {} });
  });
  wrapper.update();

  return wrapper;
};

长期方案：Enzyme官方已经明确停止对React 18及以上版本的官方适配，社区维护的适配包无法覆盖所有React新特性（比如并发渲染、Server Components等），如果后续还遇到兼容问题，建议迁移到React官方推荐的React Testing Library做组件测试，从根源上避免适配问题。

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