Stubben einer React-Komponentenmethode mit Sinon

Ich versuche, die stub ein Reagieren Komponente Verfahren für die Prüfung Zweck:

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

Diese leider hält Druck "plop" auf der Konsole... und die assertion fehlschlägt.

Hinweis: Direkt stubbing der spec-Objekt-Methode funktioniert, aber dann haben Sie, um die Komponente exportieren Konstruktor und die spec getrennt, so sind Sie beide in tests... Außerdem müssten Sie stub die Skillung sogar noch vor dem erstellen der Komponente-Klasse, nur nicht so bequem:

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

Können Sie denken, eine andere Strategie zu leicht stub ein Reagieren Komponente Methode?

InformationsquelleAutor der Frage NiKo | 2014-06-18

Läufst du gegen Reagieren die auto-binding-featurewelche caches die .bind(this) die gewickelt ist, um die Klassenmethoden. Sie können Ihren code durch stubbing die zwischengespeicherte version der Methode Reagieren die __reactAutoBindMap:

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

InformationsquelleAutor der Antwort danvk

5

Dem test-framework verwenden Sie?

Wenn Sie Jasmin, die ich gefunden habe,Jasmin-reagierenum eine nützliche Bibliothek für Bespitzelung Reagieren Methoden sowie dem Austausch von Komponenten mit test-stubs.

In diesem Fall können Sie Spion auf Ihre Methode einfach von außen am Bauteil-definition.
```
//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 gibt eine gewöhnliche Jasmin spy, die Sie verwenden können, zu verfolgen, Anrufe, um ihn und seine Argumente.

Wenn Sie wollen, um tatsächlich die stub-Methode und machen Sie wieder etwas, Sie können etwas tun, wie
jasmineReact.spyOnClass(Comp, "plop").andReturn('something')

Alternativ Facebook haben vor kurzem eine test-framework Scherz (hat auch Jasmin als Abhängigkeit), die Sie selbst benutzen für die Tests Reagieren-Komponenten. Komponenten-Methoden können leicht gekürzte mit diesem Rahmen. Dieser sieht aus wie seine lohnt sich auch, aber wahrscheinlich kommt in seine eigene ein bisschen mehr, wenn Sie schreiben, Ihre Komponenten im commonJS-Module

InformationsquelleAutor der Antwort Ron

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.