Reaction enzyme testing, Kann Eigenschaft 'have' von undefined nicht lesen

Question

Ich schreibe einen Test mit Enzyme für React.

Mein Test ist extrem einfach:

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

Dieser Code ist im Grunde direkt von airbnb/enzyme docs genommen, aber gibt den Fehler:

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

ich auf ein wenig unklar bin, was ich tue anders als die Dokumente. Jede Anleitung sehr geschätzt.

Answer 1

Verwenden Link statt <Link />:

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

Es erscheint im ersten Beispiel in den airbnb/Enzym-docs:

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

Answer 2

In ihrer Dokumentation Das Enzym wird Chai Behauptung verwenden, wenn Sie so wollen Um expect(***).to.have.length(***) zu verwenden, müssen Sie chai-enzyme installieren und expect verwenden. Es wird daher zu Problemen mit expect(***).toMatchSnapshot() führen, wenn Sie Jest-Snapshots verwenden, aber diese article wird Ihnen helfen, es zu lösen, so dass Sie beides tun können.