如何測試 React 組件異步方法

Question

我有一個組件，其方法綁定到其子組件的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 片段

Answer 1

貼出來讓大家看看。

需要復選框更改事件以響應以編程方式完成的選中狀態的更改

基本上，問題在於 jQuery 使用trigger('click')而不是change來實際更改復選框的狀態。 在這種情況下change就像您不想要的另一個自定義事件。