score:53

Accepted answer

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

score:3

this error can happen when you've got a parenthesis misplaced such that .to.have incorrectly is placed within the parenthesis of expect(...):

correct:

expect(wrapper.find(<link />)).to.have.length(5);

causes typeerror: cannot read property 'have' of undefined:

expect(wrapper.find(<link />).to.have.length(5));

score:11

this could be because you don't have the chai assertion library installed in your dependencies or have not imported it in your tests file. therefore, you need to install chai-enzyme and import it in your test file i.e.

npm install chai

import { expect } from 'chai';

score:39

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.


Related Query

More Query from same tag