javascript - react - sinon js

Stubbing un método componente React con Sinon

Question

Estoy tratando de aplastar un método de componente React para propósitos de prueba:

var Comp = React.createClass({
  displayName: "Comp",

  plop: function() {
    console.log("plop");
  },

  render: function() {
    this.plop();
    return React.DOM.div(null, "foo");
  }
});

var stub = sinon.stub(Comp.type.prototype, "plop");
React.addons.TestUtils.renderIntoDocument(Comp());
sinon.assert.called(stub); // throws

Lamentablemente, esto sigue imprimiendo "plop" en la consola ... y la afirmación falla.

Nota: el aplazamiento directo del método del objeto de especificación funciona, pero luego tiene que exportar el constructor del componente y la especificación por separado para que ambos estén disponibles en las pruebas ... Además, debe apilar la especificación antes de crear la clase de componente; no es tan conveniente:

var CompSpec = {
  displayName: "Comp",

  plop: function() {
    console.log("plop");
  },

  render: function() {
    this.plop();
    return React.DOM.div("foo");
  }
};

var stub = sinon.stub(CompSpec, "plop");
var Comp = React.createClass(CompSpec);
React.addons.TestUtils.renderIntoDocument(Comp());

// plop() is properly stubbed, so you can
sinon.assert.called(stub); // pass

¿Puedes pensar en otra estrategia para aplastar fácilmente un método de componente React?

Answer 1

¿Qué marco de prueba estás usando?

Si usas jazmín, he descubierto que jasmine-react es una biblioteca útil para espiar métodos React y también para reemplazar componentes con talones de prueba.

En este caso, puede espiar su método fácilmente fuera de la definición del componente.

//Component Definition
var Comp = React.createClass({

    displayName: "Comp",

    plop: function() {
       console.log("plop");
    },

    render: function() {
       this.plop();
       return React.DOM.div(null, "foo");
    }
});

//test
it("should call plop method on render", function(){
   //spy on method
   jasmineReact.spyOnClass(Comp, "plop");
   React.addons.TestUtils.renderIntoDocument(Comp());
   expect(Comp.plop).toHaveBeenCalled();
})

jasmineReact.spyOnClass devuelve un espía jasmine normal que puede usar para rastrear las llamadas y sus argumentos.

Si realmente quieres aplazar el método y hacerlo devolver algo, puedes hacer algo como jasmineReact.spyOnClass(Comp, "plop").andReturn(''something'')

Como alternativa, Facebook ha lanzado recientemente un marco de prueba Jest (también tiene jazmín como una dependencia) que ellos mismos usan para probar los componentes React. Los métodos de componentes pueden ser fácilmente eliminados usando este marco. Parece que también vale la pena echarle un vistazo, pero es probable que surja un poco más cuando escribes tus componentes dentro de los módulos commonJS

Answer 2

Se está ejecutando en contra de la función de enlace automático de React, que almacena en caché el .bind(this) que se envuelve alrededor de sus métodos de clase. Puede hacer que su código funcione al aplazar la versión en caché del método en __reactAutoBindMap de React:

var Comp = React.createClass({
  displayName: "Comp",

  plop: function() {
    console.log("plop");
  },

  render: function() {
    this.plop();
    return React.DOM.div(null, "foo");
  }
});

// with older versions of React, you may need to use
// Comp.type.prototype instead of Comp.prototype
var stub = sinon.stub(Comp.prototype.__reactAutoBindMap, "plop");  // <--
React.addons.TestUtils.renderIntoDocument(React.createElement(Comp));
sinon.assert.called(stub);  // passes