React 酶测试，无法读取未定义的属性 'have'

Question

我正在使用 Enzyme 为 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);
  });
});

这段代码基本上直接取自airbnb/enzyme docs，但是returns错误：

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

我有点不清楚我所做的与文档有何不同。非常感谢任何指导。

Answer 1

使用Link代替<Link />:

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

它出现在 airbnb/enzyme 文档的第一个示例中：

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

语法 .to.have.length 用于 Chai Assertion Library. For Jest 使用 .toHaveLength:

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

Answer 2

在他们的文档中，Enzyme 使用的是 Chai 断言，因此如果您想使用 expect(***).to.have.length(***)，您需要安装 chai-enzyme 并使用它的 expect。因此，如果您使用 Jest 快照，它将导致 expect(***).toMatchSnapshot() 出现问题，但是这个 article 将帮助您解决它，因此您可以两者兼顾。

Answer 3

如果括号错位，例如 .to.have 错误地放在 expect(...):

的括号内，就会发生此错误

正确：

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

原因类型错误：无法读取未定义的属性 'have':

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

Answer 4

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

npm install chai

import { expect } from 'chai';

React 酶测试，无法读取未定义的属性 'have'

React enzyme testing, Cannot read property 'have' of undefined

testing

reactjs

enzyme

React 酶测试，无法读取未定义的 属性 'have'

React enzyme testing, Cannot read property 'have' of undefined

testing

reactjs

enzyme

React 酶测试，无法读取未定义的属性 'have'