Question

我试图将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

这令人遗憾地继续印刷＆＃34; plop＆＃34;在控制台上...断言失败。

注意：直接存根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组件方法的策略吗？

Answer 1

你正在反对React的auto-binding feature，它会缓存你的类方法所包含的.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

Answer 2

您使用的是哪个测试框架？

如果您使用jasmine，我发现jasmine-react是一个有用的库，用于监视React方法以及用测试存根替换组件。

在这种情况下，您可以在组件定义之外轻松监视您的方法。

//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返回一个普通的茉莉花间谍，你可以用它来跟踪对它及其参数的调用。

如果你想实际存根该方法并让它返回一些东西，你可以做类似的事情 jasmineReact.spyOnClass(Comp, "plop").andReturn('something')

另外，Facebook最近推出了一个测试框架Jest（也有茉莉花作为依赖项），他们将自己用于测试React组件。使用此框架可以轻松地对组件方法进行存根。这看起来也值得一试，但是当你在commonJS模块中编写组件时可能会有更多的东西

使用Sinon对React组件方法进行存根

2 个答案: