javascript - Testing for a button's disabled state in React -

i have simple component want test using react , reactutils.

var textconfirmbutton = react.createclass({   getinitialstate: function() {     return {       inputtext: '',       confirmtext: this.props.confirmtext,       buttonenabled: false,       inputenabled: true     }   },    handlechange: function(event) {     this.setstate({ inputtext: event.target.value });   },    handleconfirm: function() {     this.props.onconfirmclick();     // when user clicks confirm button, disable both input , button.     this.setstate({ buttonenabled: false, inputenabled: false });   },    render: function() {     return (       <div>         <input onchange={this.handlechange} disabled={!this.state.inputenabled} type='text' ref='text' placeholder={this.state.confirmtext} />         <button onclick={this.handleconfirm} disabled={this.state.inputtext !== this.state.confirmtext} classname='btn btn-danger'>delete</button>       </div>     )   } }) 

is there way test button's disabled state?

i've attempted:

var testutils = react.addons.testutils;  describe('textconfirmbutton', function () {   it('starts confirm button disabled', function () {     var onconfirmclick = function() {       console.log("confirm click");     }      var textconfirmbutton = testutils.renderintodocument(       <textconfirmbutton confirmtext="example" onconfirmclick={this.onconfirmclick} />     );      var textconfirmbuttonnode = reactdom.finddomnode(textconfirmbutton);      expect(textconfirmbuttonnode.disabled).toequal('disabled');   }); }); 

but test fails, error: textconfirmbuttonnode.disabled undefined. .disabled wrong way go this.

any suggestions?

you need use testutils#findrendereddomcomponentwithtag in order able query dom generated testutils.

var textconfirmbuttonnode =  testutils.findrendereddomcomponentwithtag(textconfirmbutton, 'button');  expect(textconfirmbuttonnode.disabled).toequal(true);