反应酶测试,无法读取属性'have'的undefined

Question

我正在使用Enzyme for 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,但返回错误:

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

在他们的文档中,Enzyme正在使用Chai断言,所以如果你想使用,expect(***).to.have.length(***)你需要安装chai-enzyme和使用它expect.因此,expect(***).toMatchSnapshot()如果您使用Jest快照,它将导致问题,但本文将帮助您解决它,因此您可以做到这两点.

Answer 2

使用Link而不是<Link />:

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

它出现在airbnb/enzyme docs的第一个例子中:

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

Answer 3

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

NPM安装柴

从“ chai”导入{Expect}；