如何测试React组件异步方法

How to test React component asynchronous method

本文关键字：React 组件 异步方法 测试 何测试      更新时间：2023-09-26

我有一个组件，它的方法绑定到其子组件的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片段

把它放在那里，让每个人都能看到。

需要复选框更改事件来响应以编程方式完成的选中状态的更改

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

相关文章：