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

【问题标题】：How do I access methods in React for unit testing如何访问 React 中的方法进行单元测试
【发布时间】：2014-12-28 11:51:51
【问题描述】：

我在使用 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？一切似乎都以某种完全无法测试的方式包装起来。

【问题讨论】：

标签： javascript unit-testing jasmine reactjs

【解决方案1】：

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

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

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

renderIntoDocument() 返回对分离的 DOM 节点的引用
您可以使用 findRenderedDOMComponentWithTag() 之类的助手（请参阅 TestUtils）从组件中获取对子节点的引用
您可以在引用中使用getDOMNode() 进行断言

【讨论】：

谢谢，第一点让我能够测试事件和 DOM 道具，但我仍然不确定如何监视函数。似乎正常的 Jasmine 间谍活动并没有真正起作用。说它从未被调用，但它肯定被调用。我猜它没有使用传递给它的函数的相同实例。比如克隆它什么的……
你有没有找到监视组件功能的答案？
也在寻找答案

【解决方案2】：

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

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

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

【讨论】：