React enzyme testing, Cannot read property 'have' of undefined
Use Link
instead of <Link />
:
describe('<OffCanvasMenu />', () => { it('contains 5 <Link /> components', () => { const wrapper = shallow(<OffCanvasMenu />); expect(wrapper.find(Link)).to.have.length(5); });});
It appears in the 1st example in the airbnb/enzyme docs:
it('should render three <Foo /> components', () => { const wrapper = shallow(<MyComponent />); expect(wrapper.find(Foo)).to.have.length(3);});
The syntax .to.have.length
is for the Chai Assertion Library. For Jest use .toHaveLength
:
it('should render three <Foo /> components', () => { const wrapper = shallow(<MyComponent />); expect(wrapper.find(Foo)).toHaveLength(3);});
In their documentation Enzyme is using Chai assertion, so if you want to use expect(***).to.have.length(***)
you need to install chai-enzyme
and use its expect
. It will, therefore, lead to issues with expect(***).toMatchSnapshot()
if you use Jest snapshots, but this article will help you to solve it, so you can do both.