Testy enzymatyczne w reakcji, Nie można odczytać właściwości "have" z undefined

Question

Piszę test z użyciem Enzyme dla React.

Mój test jest niezwykle prosta:

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); 
    }); 
}); 

Kod ten jest w zasadzie pobierane bezpośrednio z airbnb/enzyme docs, ale zwraca błąd:

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

Jestem trochę niejasna, co robię inaczej niż docs. Wszelkie wskazówki bardzo doceniane.

Answer 1

Zastosowanie Link zamiast <Link />:

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

Wydaje się w 1. przykład w docs Airbnb/enzymatycznych:

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

Answer 2

W ich dokumentacji enzym jest za pomocą Chai twierdzenie, więc jeśli chcesz aby użyć expect(***).to.have.length(***), musisz zainstalować chai-enzyme i użyć jej expect. Będzie to zatem prowadzić do problemów z expect(***).toMatchSnapshot(), jeśli używasz migawek Jest, ale ten article pomoże ci go rozwiązać, więc możesz zrobić jedno i drugie.