React enzyme testing, Cannot read property 'have' of undefined
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.
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);
});