React+Enzyme单元测试shallow()报错求助：npm test执行失败

嘿，我猜你大概率是没正确配置Enzyme的适配器——这是Enzyme 3.x版本之后的必填步骤，好多人第一次用都会踩这个坑！下面一步步给你搞定：

第一步：配置Enzyme适配器（核心解决点） #

你已经装了enzyme-adapter-react-16，但还需要把适配器注册到Enzyme里，不然shallow方法根本没法正常工作。有两种配置方式：

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

在你的Login组件测试文件最开头加上这段代码：

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

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

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

如果项目里有多个测试文件，不想每个都重复写配置，可以在项目src目录下创建setupTests.js文件（Create React App会自动加载这个文件），把上面的配置代码放进去，这样所有测试都会自动生效。

第二步：检查组件代码的小问题 #

看你贴的组件片段，还有两个可能导致失败的细节：

• 你的Login类没显式继承React.Component，得改成这样：

  import React, { Component } from 'react'; // 别忘了导入Component
  class Login extends Component {
    // ... 你的组件逻辑
  }
  

• 你写的this.setState({input: eve...明显是拼写错误，应该是event.target.value之类的正确写法，比如：

  onChange={(event) => { this.setState({ input: event.target.value }); }}
  

  这种语法错误也会直接导致测试失败，一定要修正。

第三步：确认测试代码的正确性 #

最后检查下你的测试文件有没有正确导入shallow，比如：

import { shallow } from 'enzyme';
import Login from './Login';

describe('Login Component', () => {
  it('renders without crashing', () => {
    const wrapper = shallow(<Login />);
    expect(wrapper.exists()).toBe(true);
  });
});

如果做完这些还是有问题，可以把终端的具体错误信息贴出来，但按照经验，上面这几步应该能解决大部分shallow()相关的失败问题了。

内容的提问来源于stack exchange，提问作者Great Khan 2016