用事件反应开玩笑单元测试子组件答案

【问题标题】：react jest unit testing children components with events用事件反应开玩笑单元测试子组件
【发布时间】：2015-06-28 18:49:22
【问题描述】：

如果我有一个具有 onclick 事件的子组件，该事件又调用父事件处理程序，那么对此进行单元测试的最佳方法是什么？在我的例子中，当用户点击按钮时，按钮的文本值会发生变化——这是在 this.props.myEvent 中处理的。

我的单元测试在测试初始值时有效

expect(button.getDOMNode().textContent).toEqual('startValue');

，但是当用户单击按钮并且按钮值更新为某个值时，我如何创建单元测试？

就我而言，我有一个按钮：

var React  = require('react');

module.exports = React.createClass({
  myEvent: function(a,b){
    this.props.myEvent(a, b);
  },
  render: function() {
    return (
        <button name="myButton" id={this.props.id} onClick={this.myEvent.bind(this.props.a,this.props.b)}>{this.props.value}</button>
    )
  }
});

谢谢

【问题讨论】：

标签： unit-testing reactjs jestjs

【解决方案1】：

您可以使用TestUtils 插件模拟点击：

React.addons.TestUtils.Simulate.click(button.getDOMNode());

【讨论】：

所以在我的例子中，按钮的值会在用户点击后发生变化。在我的单元测试中，我使用 'expect(button.getDOMNode().textContent).toEqual('initialValue');' 检查按钮文本的初始值然后我按照您的建议进行操作（.Simulate.Click() ） - 但是，当我在模拟点击后检查按钮文本的值时，该值保持不变。