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

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

这令人遗憾地继续将"plop"打印到控制台上......并且断言失败了.

注意:直接存在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的自动绑定功能,它会缓存.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方法以及用测试存根替换Components.

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

//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模块中编写组件时可能会有更多的东西