title: Testing for a button's disabled state in React
body: <p>I have a simple component that I want to test using React and ReactUtils.</p>
  
  <pre><code>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 the confirm button, disable both the input and button.
      this.setState({ buttonEnabled: false, inputEnabled: false });
    },
  
    render: function() {
      return (
        &lt;div&gt;
          &lt;input onChange={this.handleChange} disabled={!this.state.inputEnabled} type='text' ref='text' placeholder={this.state.confirmText} /&gt;
          &lt;button onClick={this.handleConfirm} disabled={this.state.inputText !== this.state.confirmText} className='btn btn-danger'&gt;Delete&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  })
  </code></pre>
  
  <p>Is there a way to test for a button's disabled state?</p>
  
  <p>I've attempted:</p>
  
  <pre><code>var TestUtils = React.addons.TestUtils;
  
  describe('TextConfirmButton', function () {
    it('starts with confirm button disabled', function () {
      var onConfirmClick = function() {
        console.log("Confirm click");
      }
  
      var textConfirmButton = TestUtils.renderIntoDocument(
        &lt;TextConfirmButton confirmText="example" onConfirmClick={this.onConfirmClick} /&gt;
      );
  
      var textConfirmButtonNode = ReactDOM.findDOMNode(textConfirmButton);
  
      expect(textConfirmButtonNode.disabled).toEqual('disabled');
    });
  });
  </code></pre>
  
  <p>But the test fails, with the error: <code>textConfirmButtonNode.disabled undefined</code>. So <code>.disabled</code> is obviously the wrong way to go about this.</p>
  
  <p>Any suggestions?</p>