用Sinon存根React组件方法

小编典典

用Sinon存根React组件方法

reactjs

我正在尝试存根React组件方法以进行测试：

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

可悲的是，这一直在控制台上打印“ plop”……而断言失败。

注意：直接对spec对象方法进行存根工作是可行的，但是您必须分别导出组件构造函数和spec，以便它们在测试中都可用。此外，您甚至需要在创建组件类之前对spec存根。不太方便：

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

您能想到另一种轻松添加React组件方法的策略吗？

阅读 224

2020-07-22

共1个答案

小编典典

您遇到了React的自动绑定功能，该功能会缓存.bind(this)包装在您的类方法周围的内容。您可以通过在React的存根中存入方法的缓存版本来使代码正常工作__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

2020-07-22