Question

我有一个非常困难的时间用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？一切似乎都以某种方式完全无法控制。

Answer 1

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

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

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

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

Answer 2

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

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

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

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

2 个答案: