title: How to test React component asynchronous method
body: <p>I have a component with a method bind to <code>onChange</code> event of its child component. In a nutshell:</p>
  
  <pre><code>DOM = React.DOM
  
  Range = React.createClass
    getInitialState: -&gt;
      isRange: false
  
    render: -&gt;
      check = DOM.input
        type: "checkbox",
        onChange: @rangeChanged,
        checked: @state.isRange
        name: "isRange"
      DOM.form {}, [check]
  
    rangeChanged: React.autoBind -&gt;
      @setState
        isRange: !@state.isRange
  </code></pre>
  
  <p>During a test, I want to change the value of the checkbox and trigger <code>change</code> event.
  My test looks like (using mocha.js + expect.js):</p>
  
  <pre><code>root = $("#root")
  
  describe "test Range", -&gt;
    beforeEach -&gt;
      @range = Range()
      React.renderComponent(@range, root[0])
  
    afterEach -&gt;
      React.unmountAndReleaseReactRootNode(root[0])
  
    it "should run event", (done) -&gt;
      r = root.find("input[name=isRange]").prop("checked", true).trigger('change')
      setTimeout (=&gt; expect(@range.state.isRange).to.be.true; done()), 10
  </code></pre>
  
  <p>Unfortunately, I can't get any solution to make this test working. Any idea how to make it work?</p>
  
  <p><a href="http://jsfiddle.net/robert_zaremba/LWXhs/" rel="nofollow noreferrer">jsfiddle snippet</a></p>