Moka, Enzima: Unità funzioni test personalizzate a reagire componente utilizzando enzima

voti
15

Sto lavorando sulla creazione di test di unità di reagire componenti mediante moka, enzima. Qui di seguito è un componente del campione.

Foo.js

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

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

E qui è il file di test.

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

Va tutto bene. ma non ho capito come unità di prova customFunction in Foo.js quando stiamo usando enzima

È pubblicato 01/03/2016 alle 10:24
fonte dall'utente
In altre lingue...                            


2 risposte

voti
26

La migliore risposta a questa domanda in realtà dipende da che cosa è che customFunctionsta effettivamente facendo ...

È possibile chiamare la funzione in questo modo:

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

Se si tratta di una funzione che imposta lo stato nell'istanza stessa, e quindi colpisce ciò che l'output di rendering sembra, si consiglia di chiamare .update()pure

wrapper.instance().customFunction('foo', 'bar'); // uses setState internally
wrapper.update(); // updates render tree
// do assertions on the rendered output
Risposto il 01/03/2016 a 17:32
fonte dall'utente

voti
1

È inoltre possibile utilizzare il plugin chai per spiare funzioni personalizzate in voi JSX file.

// 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 è giusto, dipende da ciò che il test sta facendo. Capire che vi aiuterà a comporre nuovi modi per manipolare il componente e quindi fare asserzioni.

Un altro esempio testando una funzione che aggiorna il tuo stato componenti.

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-spie ha anche una manciata di getter chainable che rendono le funzioni di test personalizzati molto più facile. Si prega di consultare i documenti per una spiegazione più approfondita.

Risposto il 20/06/2018 a 15:03
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more