使用Enzyme测试React组件时出现‘Cannot read property 'have' of undefined’错误原因咨询

这个报错的核心原因很明确：你混用了不同断言库的语法。

你当前代码里用的是Jest自带的expect方法，但to.have.length()是Chai断言库的链式写法——Jest本身并不支持这种to.have的调用结构，所以to对象下找不到have属性，就抛出了这个undefined错误。

下面给你两种可行的解决办法：

方法1：改用Jest原生断言语法 #

直接用Jest支持的断言方式，不需要额外安装依赖，修改测试代码如下：

describe("counter", () => {
  it("test truty", () => {
    const wrapper = shallow(<Counter />);
    // 写法一：使用Jest的toHaveLength断言
    expect(wrapper.find("p")).toHaveLength(1);
    // 写法二：直接断言元素的length属性
    expect(wrapper.find("p").length).toBe(1);
  });
});

方法2：配置Chai+chai-enzyme使用原语法 #

如果你更习惯Chai的to.have风格，可以安装对应的依赖并配置：

1. 安装开发依赖：

npm install chai chai-enzyme --save-dev

2. 在测试文件顶部引入并配置：

import React from "react";
import { shallow, mount } from "enzyme";
import Counter from "./Counter";
// 引入Chai和chai-enzyme
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
// 启用chai-enzyme插件
chai.use(chaiEnzyme());
// 替换Jest的expect为Chai的expect
const expect = chai.expect;

describe("counter", () => {
  it("test truty", () => {
    const wrapper = shallow(<Counter />);
    // 现在可以正常使用to.have语法了
    expect(wrapper.find("p")).to.have.length(1);
  });
});

另外提醒一下，确保你的Enzyme版本和React版本是兼容的，比如React 16需要搭配Enzyme 3.x版本，避免出现其他隐性问题。

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