如何访问React中的方法进行单元测试

时间:2014-11-01 06:47:46

标签: javascript unit-testing jasmine reactjs

我有一个非常困难的时间用React测试任何东西。 TestUtils上的文档很少,没有例子。谷歌似乎只给我一些结果。我使用的是Jasmine,但这并不是让我感到悲痛的部分。

这是我尝试过的最简单的事情:

var BigButton = React.createClass({
  render: function () {
    return (
      <button className="big-submit" data-color={this.props.color} onClick={this.props.action}>{this.props.text}</button>
    );
  },
  foo: function () {},
  bar: function () {
    this.foo();
  }
});

我有

的测试
describe('BigButton', function () {
  describe('render', function () {
    it('creates a button', function () {
      var button = <BigButton />;
      TestUtils.renderIntoDocument(button);
      debugger;
    });
  });
});

我的问题是如何从外部访问React类中有意义的任何内容?我如何检查渲染是否返回按钮HTML元素?我知道如何使用测试间谍,但我怎么能找到方法foo来监视,我如何调用bar?一切似乎都以某种方式完全无法控制。

2 个答案:

答案 0 :(得分:4)

我不知道你是否知道,但Facebook写了自己的基于Jasmine的测试库:https://facebook.github.io/jest

他们在这里有一个测试反应教程:https://facebook.github.io/jest/docs/tutorial-react.html

我认为这是如何使用TestUtils的一个很好的例子,即使你不想使用jest。要点是:

  • renderIntoDocument()返回对分离的DOM节点的引用
  • 您使用findRenderedDOMComponentWithTag()等帮助程序(请参阅TestUtils)以获取对组件中子节点的引用
  • 您可以在断言参考上使用getDOMNode()

答案 1 :(得分:3)

监视方法,渲染组件之前,可以通过方法访问方法对象 var methods = ComponentName.prototype.__reactAutoBindMap

然后(用茉莉花)你可以说: var methodSpy = spyOn(methods, 'methodName').and.callThrough()

然后你可以渲染组件: widget = TestUtils.renderIntoDocument(React.createElement(ComponentName, params))