如何测试 React 组件异步方法

Question

I have a component with a method bind to onChange event of its child component. In a nutshell:

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

During a test, I want to change the value of the checkbox and trigger change event. My test looks like (using 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

Unfortunately, I can't get any solution to make this test working. Any idea how to make it work?

jsfiddle snippet

Answer 1

Putting this out there so that everyone can see.

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

Basically, the problem is that jQuery uses trigger('click') rather than change to actually change the checkbox's state. change in this case is just like another custom event you don't want.