Реакция на ферментное тестирование, Невозможно прочитать свойство "иметь" из undefined

Я пишу тест, используя 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/physe 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

Я немного не понимаю, что я делаю иначе, чем документы. Любое руководство было высоко оценено.

Ответ 1

Используйте Link вместо <Link />:

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

Он появляется в первом примере в документах airbnb/farme:

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

Ответ 2

В своей документации Enzyme использует утверждение Chai, поэтому, если вы хотите использовать expect(***).to.have.length(***), вам нужно установить chai-enzyme и использовать его expect. Таким образом, это приведет к проблемам с expect(***).toMatchSnapshot(), если вы используете снимки Jest, но эта статья поможет вам решить ее, поэтому вы может сделать и то и другое.