Enzyme v3.9.0中.to.have方法报错，为何与文档不符？

这个问题的核心是你使用的断言库和Enzyme官方文档默认假设的不一致，具体细节和解决方法如下：

为什么文档里的写法会报错？ #

Enzyme官方文档的很多示例默认搭配的是Chai断言库，再加上chai-enzyme这个扩展插件——正是这个插件提供了.to.have.lengthOf()这类链式断言语法。

而你的测试环境里，应该是默认使用Jest自带的断言API（.toBe()就是Jest的原生断言方法），并没有安装和配置Chai+chai-enzyme，所以当你尝试调用.to.have时，Jest的expect对象根本没有have这个属性，自然会抛出TypeError: Cannot read property 'have' of undefined的错误。

为什么你的当前写法能正常运行？ #

你现在用的：

expect(component.find("#vehMenuSelect").length).toBe(1);

是Jest原生断言的标准写法：先通过component.find(...).length获取到元素的数量，再用Jest的.toBe()方法验证数值是否符合预期。这种写法不需要额外依赖，是Jest+Enzyme组合下非常常用的断言方式，完全没问题。

如果想使用文档里的链式断言写法怎么办？ #

如果你习惯Chai的语法，想要用上.to.have.lengthOf()这类写法，需要完成以下步骤：

1. 安装依赖

npm install chai chai-enzyme --save-dev

2. 在测试配置文件中启用插件
   找到你的测试初始化文件（比如src/setupTests.js，如果没有可以新建），添加以下配置：

import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';

chai.use(chaiEnzyme());

3. 即可使用链式断言
   之后你的测试代码就可以和文档里的写法保持一致了：

it('Should render the Select Vehicle entry', () => {
  let component = shallow(<VehicleMenu {...initialState} />);
  expect(component.find("#vehMenuSelect")).to.have.lengthOf(1);
});

额外说明 #

两种断言方式都能实现相同的测试目的，如果你已经适应了Jest的原生断言，完全可以继续使用当前的写法，没必要强行切换到Chai的语法。

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