testing - troponina - enzimas cardiacas wikipedia

Reactuar la prueba de enzimas, no se puede leer la propiedad ''tener'' de indefinido

Question

Estoy escribiendo una prueba usando Enzyme for React.

Mi prueba es extremadamente sencilla:

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

Básicamente, este código se toma directamente de los documentos de airbnb / enzima , pero devuelve el error:

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

Estoy un poco confuso sobre lo que estoy haciendo diferente de los documentos. Cualquier orientación muy apreciada.

Answer 1

En su documentación, Enzyme está utilizando la aserción de Chai, por lo que si desea usar expect(***).to.have.length(***) necesita instalar chai-enzyme y usar su expect . Por lo tanto, dará lugar a problemas con expect(***).toMatchSnapshot() si usa instantáneas de Jest, pero este article lo ayudará a resolverlo, para que pueda hacer ambas cosas.

Answer 2

Este error puede ocurrir cuando tiene un paréntesis fuera de lugar, de manera que .to.have se coloca incorrectamente dentro del paréntesis de expect(...) :

Correcto:

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

Causas TypeError: No se puede leer la propiedad ''have'' de undefined :

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

Answer 3

Esto podría deberse a que no tiene instalada la biblioteca de aserciones chai en sus dependencias o no la ha importado en su archivo de pruebas. Por lo tanto, debe instalar chai-enzima e importarlo en su archivo de prueba, es decir,

npm instalar chai

importar {espera} de ''chai'';

Answer 4

Use Link lugar de <Link /> :

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

Aparece en el 1er ejemplo en los documentos de airbnb / enzima:

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