如何测试 React 组件的异步方法答案

【问题标题】：How to test React component asynchronous method如何测试 React 组件的异步方法
【发布时间】：2013-07-09 00:06:11
【问题描述】：

我有一个组件，其方法绑定到其子组件的onChange 事件。简而言之：

DOM = React.DOM

Range = React.createClass
  getInitialState: ->
    isRange: false

  render: ->
    check = DOM.input
      type: "checkbox",
      onChange: @rangeChanged,
      checked: @state.isRange
      name: "isRange"
    DOM.form {}, [check]

  rangeChanged: React.autoBind ->
    @setState
      isRange: !@state.isRange

在测试期间，我想更改复选框的值并触发change 事件。我的测试看起来像（使用 mocha.js + expect.js）：

root = $("#root")

describe "test Range", ->
  beforeEach ->
    @range = Range()
    React.renderComponent(@range, root[0])

  afterEach ->
    React.unmountAndReleaseReactRootNode(root[0])

  it "should run event", (done) ->
    r = root.find("input[name=isRange]").prop("checked", true).trigger('change')
    setTimeout (=> expect(@range.state.isRange).to.be.true; done()), 10

很遗憾，我无法找到任何解决方案来使该测试正常运行。知道如何使它工作吗？

jsfiddle snippet

【问题讨论】：

标签： javascript jquery reactjs mocha.js

【解决方案1】：

把它放在那里让每个人都可以看到。

Need checkbox change event to respond to change of checked state done programmatically

基本上，问题在于 jQuery 使用 trigger('click') 而不是 change 来实际更改复选框的状态。 change 在这种情况下就像您不想要的另一个自定义事件。

【讨论】：