How to test React component asynchronous method

Envato Authors CodeCanyon
1

Hi, I have an component with a method bind to onChange event of its child component. In a nutshell of React js:

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 a value of 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 for to make this test working. Any idea how to make it working?

Thank you.

2

I think you can contact with your item author hope it will helpful for you.