使用Enzyme测试React应用报错TypeError: Adapter is not a constructor求解

我之前在使用Enzyme测试React组件时也踩过这个坑，问题根源其实很简单——你导入适配器的方式不对。

问题原因 #

你用了import * as Adapter from 'enzyme-adapter-react-16'，这种写法会把整个适配器模块作为一个对象导入，但Enzyme需要的是模块里的默认导出（也就是Adapter类本身），不是整个模块对象。当你尝试new Adapter()时，其实是在实例化一个模块对象，而不是Adapter类，所以才会抛出「Adapter is not a constructor」的错误。

解决方案 #

只需要调整导入语句，改成默认导入即可：

1. 修正适配器导入方式
   把原来的：

   import * as Adapter from 'enzyme-adapter-react-16';
   

   替换成：

   import Adapter from 'enzyme-adapter-react-16';
   

2. 优化Enzyme方法导入（可选）
   你可以直接导入mount方法，让代码更简洁：

   import { mount } from 'enzyme';
   

   这样测试里就不用写enzyme.mount，直接用mount就行。

修正后的完整测试代码示例 #

import ProductRow from '../product_row';
import React from 'react';
import { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import * as enzyme from 'enzyme';

// 配置Enzyme适配器
enzyme.configure({ adapter: new Adapter() });

test('TodoComponent renders the text inside it', () => {
  // 记得补充完整的item测试数据，这里只是示例
  const testItem = { name: 'Sample Product', price: 59, inStock: true };
  const wrapper = mount(<ProductRow item={testItem} />);
  
  // 这里可以添加你的断言逻辑，比如：
  // expect(wrapper.text()).toContain('Sample Product');
});

额外注意事项 #

• 确保你已经正确安装了依赖：npm install enzyme enzyme-adapter-react-16 --save-dev（如果用yarn就换成yarn add）。
• 如果你的项目使用的是React 17或更高版本，enzyme-adapter-react-16会不兼容，需要安装对应的适配包，比如React 17用@wojtekmaj/enzyme-adapter-react-17，导入方式和上面一致。

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