React enzyme testing、不明のプロパティ 'have'を読み取ることができません

Question

私はReactにEnzymeを使ってテストを書いています。

私のテストは非常に簡単です：

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 

をドキュメントとは異なります。どんな指針も大変ありがとう。代わりに<Link />の

Answer 1

使用Link：

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

Airbnb /酵素のドキュメントで第一例に表示されます。そのドキュメントの酵素で

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

Answer 2

はチャイのアサーションを使用しているので、あなたがしたい場合expect(***).to.have.length(***)を使用するにはchai-enzymeをインストールし、expectを使用する必要があります。したがって、Jestスナップショットを使用する場合は、expect(***).toMatchSnapshot()の問題が発生しますが、このarticleは解決に役立ちます。そのため、両方を実行できます。