web-dev-qa-db-fra.com

Réagir aux tests enzymatiques, impossible de lire la propriété 'ont' de non définie

J'écris un test en utilisant Enzyme pour React.

Mon test est extrêmement simple:

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

Ce code provient essentiellement de airbnb/enzyme docs , mais renvoie l'erreur:

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

Je ne comprends pas bien ce que je fais différemment de la documentation. Toute orientation grandement appréciée.

testingreactjsenzyme
27
Toby

Utilisez Link au lieu de <Link />:

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

Il apparaît dans le 1er exemple dans les documents airbnb/enzyme:

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

Dans leur documentation, Enzyme utilise l'assertion Chai. Par conséquent, si vous souhaitez utiliser expect(***).to.have.length(***), vous devez installer chai-enzyme et utiliser sa expect. Cela entraînera donc des problèmes avec expect(***).toMatchSnapshot() si vous utilisez des instantanés Jest, mais cet article vous aidera à le résoudre afin que vous puissiez faire les deux. 

17
Khrystyna Skvarok

Cela peut être dû au fait que la bibliothèque d'affirmations chai n'est pas installée dans vos dépendances ou que vous ne l'avez pas importée dans votre fichier de test. Par conséquent, vous devez installer chai-enzyme et l’importer dans votre fichier de test, c.-à-d. 

npm installer chai

importer {expect} de 'chai';

3
Awesome

Cette erreur peut se produire lorsque vous avez mal placé une parenthèse telle que .to.have est placé de manière incorrecte dans la parenthèse de expect(...):

Correct:

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

Causes TypeError: Impossible de lire la propriété 'have' of indéfinie :

expect(wrapper.find(<Link />).to.have.length(5));
0
Jon Schneider