使用create-react-app创建React项目，编写MessageBox组件单元测试遇Enzyme适配器配置错误

这个问题我之前也碰到过，其实就是Enzyme需要和你的React版本匹配的适配器来兼容不同的React渲染逻辑，解决起来很简单，分两步走：

1. 安装对应React版本的适配器依赖 #

Enzyme没有内置适配所有React版本的组件，所以你需要根据自己项目的React版本安装对应的适配器包：

• 如果你的React版本是16.x：

  npm install --save-dev enzyme-adapter-react-16
  

• 如果是17.x（官方没有推出适配包，需要用第三方维护的）：

  npm install --save-dev @wojtekmaj/enzyme-adapter-react-17
  

• 如果是18.x：

  npm install --save-dev @cfaester/enzyme-adapter-react-18
  

2. 配置Enzyme适配器 #

有两种配置方式，推荐全局配置，这样所有测试文件都不用重复写配置代码：

方式一：全局配置（推荐） #

在你的React项目的src目录下创建或修改setupTests.js文件（create-react-app会自动在运行测试前执行这个文件），添加以下代码：

import Enzyme from 'enzyme';
// 注意这里引入的适配器要和你安装的包对应
import Adapter from 'enzyme-adapter-react-16'; 
// 如果是React17就改成@wojtekmaj/enzyme-adapter-react-17，React18同理

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

方式二：单个测试文件内配置 #

如果你只想给当前测试文件配置，就在你的MessageBox测试文件开头添加配置代码：

import MessageBox from "../MessageBox"; 
import { shallow } from 'enzyme'; 
import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'; // 对应你的适配器包

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

test('message box', () => { 
  const app = {setState: jest.fn()}; 
  const wrapper = shallow(<MessageBox app={app}/>); 
  wrapper.find('button').at(0).simulate('click'); 
  expect(app.setState).toHaveBeenLastCalledWith(/* 这里补充你预期的参数 */);
});

配置完成后，再运行你的测试命令，这个错误应该就消失啦～

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