Testing 反应酶测试，无法读取属性'；拥有'；未定义的

我正在用React写一个测试

我的测试非常简单：

import OffCanvasMenu from '../index';
import { Link } from 'react-router';

import expect from 'expect';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import React from 'react';

describe('<OffCanvasMenu />', () => {
  it('contains 5 <Link /> components', () => {
    const wrapper = shallow(<OffCanvasMenu />);
    expect(wrapper.find(<Link />)).to.have.length(5);
  });
});

从“../index”导入画布菜单；
从“反应路由器”导入{Link}；
从“expect”导入expect；
从“酶”导入{shall，mount}；
从“sinon”进口sinon；
从“React”导入React；
描述（“”，（）=>{
它（'包含5个组件'，（）=>{
常量包装器=浅（）；
expect（wrapper.find（））.to.have.length（5）；
});
});

此代码基本上直接取自，但返回错误：

FAILED TESTS:
  <OffCanvasMenu />
    ✖ contains 5 <Link /> components
      Chrome 52.0.2743 (Mac OS X 10.11.6)
    TypeError: Cannot read property 'have' of undefined

失败的测试：
✖ 包含5个组件
Chrome 52.0.2743（Mac OS X 10.11.6）
TypeError:无法读取未定义的属性“have”

---

我有点不清楚我在做什么不同于医生。非常感谢您的指导。

使用

链接

而不是

：

---

在他们的文档中，Ezyme使用了Chai断言，因此如果您想使用

expect（***）.to.have.length（***）

您需要安装

Chai-Enzyme

并使用其

expect

。因此，如果使用Jest快照，将导致

expect（***）.toMatchSnapshot（）

出现问题，但这将帮助您解决问题，因此您可以同时执行这两项操作

如果括号放错了位置，导致

.to.have

错误地放在

expect（…）

的括号内，则可能发生此错误：

正确：

expect(wrapper.find(<Link />)).to.have.length(5);

expect（wrapper.find（））.to.have.length（5）；

原因TypeError:无法读取未定义的属性“have”：

expect（wrapper.find（）.to.have.length（5））；

这可能是因为依赖项中没有安装chai断言库，或者没有将其导入测试文件中。因此，您需要安装并将其导入测试文件，即

npm安装柴

从“chai”导入{expect}

---

感谢您的回复-我在

链接中看到了相同的错误。虽然我使用的代码导入了Michael Jackson的
expect
，但我不确定这是否会使它失效（我也检查了那里的文档）。您使用的是什么断言库？试试这个-
console.log（'length'，wrapper.find（Link.length）），然后查看控制台中显示的内容。这样酶就可以正常工作了。试试这个-
expect（wrapper.find（Link.length）.toBe（5）。如果您正在使用expect，请不要使用chai，因为它们正在做相同的事情。@Mihir
to.have.length
是chai语法的一部分，而
.toBe（5）
是expect语法的一部分。所以这取决于你用什么来做断言。@Oridori终于通过了我的测试，非常感谢！花了几个小时在这上面，并通过酶文件。非常感谢。谢谢，这对我们这些不认识所有不同库的语法的新手很有帮助！酶文档没有更多地说明这一点。有没有更好的关于酶、柴和摩卡的reactjs单元测试的教程。。。。对于这些测试库，它有一个非常糟糕的文档。PLP混合它们，但它们的文档不考虑任何依赖关系。
it('should render three <Foo /> components', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find(Foo)).to.have.length(3);
});

it('should render three <Foo /> components', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find(Foo)).toHaveLength(3);
});

expect(wrapper.find(<Link />)).to.have.length(5);

expect(wrapper.find(<Link />).to.have.length(5));