reactjs - Mocha, Enzima: Unidades que prueban funciones personalizadas en el componente de reacción usando enzima

enzyme

Question

Estoy trabajando en la creación de pruebas unitarias de componentes reactivos usando moca, enzima. A continuación se muestra un componente de muestra.

Foo.js

class Foo extends React.Component {
    customFunction=() => {
    }

    render() {
        return (<div className={this.props.name}/>);
   }
}

Y aquí está el archivo de prueba.

Foo-Test.js

import React from ''react'';
import { expect } from ''chai'';
import { shallow, mount, render } from ''enzyme'';
import Foo from ''../src/Foo'';

describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(shallow(<Foo />).contains(<div className="foo" />)).to.equal(true);
    });

    it("contains spec with an expectation", function() {
        expect(shallow(<Foo />).is(''.foo'')).to.equal(true);
    });
});

Todo es bueno. pero no entendía cómo realizar una prueba unitaria de CustomFunction en Foo.js cuando estamos usando enzima

Answer 1

La mejor respuesta a esta pregunta realmente depende de qué es lo que customFunction está haciendo customFunction ...

Puedes llamar a la función así:

wrapper.instance().customFunction(''foo'', ''bar'');

Si es una función que establece el estado en la instancia en sí misma y, por lo tanto, afecta el aspecto de la salida renderizada, es posible que desee llamar a .update() también

wrapper.instance().customFunction(''foo'', ''bar''); // uses setState internally
wrapper.update(); // updates render tree
// do assertions on the rendered output

Answer 2

También puede usar el complemento chai para espiar funciones personalizadas en su archivo jsx.

// to use this pluggin add this to the top of your testing file

const chai = require("chai"), spies = require("chai-spies");
chai.use(spies);
import Foo from "./<path to component>/Foo.jsx";

describe("Foo", () => {
  it("a call to customFunction will not error", () => {
    let spy = chai.spy(Foo.prototype, "customFunciton"); // spy
    const wrapper = mount(<Foo/>);
    wrapper.setProps({bar: "baz"}); // manipulate you component in some way
    expect(spy).to.have.been.called.once();
  });
});

@leland-richardson tiene razón, depende de lo que esté haciendo la prueba. Comprensión que le ayudará a redactar nuevas formas de manipular su componente y, por lo tanto, hacer afirmaciones.

Otro ejemplo que prueba una función que actualiza el estado de sus componentes.

it("function will assert new state", () => {
  const wrapper = shallow(<Foo {...props}/>);
  wrapper.instance.customFunction(); // call custom function
  wrapper.update();
  expect(wrapper.state("bar")).to.equal("new-state");
});

Chai-spies también tiene un puñado de captadores que pueden hacer que las pruebas de funciones personalizadas sean mucho más fáciles. Por favor, consulte los docs para una explicación más detallada.