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，但返回错误：

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。因此，如果您使用Jest快照，它将导致expect(***).toMatchSnapshot()出现问题，但此article将帮助您解决问题，因此您可以同时执行这两项操作。

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 install chai

从＆＃39; chai＆＃39;;
导入{expect}

Answer 4

如果您的括号错位，true错误地放在.to.have的括号内，则会发生此错误：

正确：

expect(...)

导致 TypeError：无法读取属性'have'of undefined ：

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

反应酶测试，无法阅读属性＆＃39;有＆＃39;未定义的

4 个答案: