title: React testing button property disable
body: <p>I cannot write correct test case for button property <code>disable</code>. I use <code>TestUtils</code> from <code>react-addons-test-utils</code>. </p>
  
  <p>I have very simple component:</p>
  
  <pre><code>const propTypes = {
      disabled: PropTypes.func.isRequired
  };
  
  class MyComponent extends Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              &lt;span&gt;
                  &lt;button id="my-button" type="submit" disabled={this.props.disabled}&gt;
                      MyButton
                  &lt;/button&gt;
              &lt;/span&gt;
          );
      }
  }
  
  MyComponent.propTypes = propTypes;
  
  export default MyComponent;
  </code></pre>
  
  <p>And I want to write test that check if button is disabled with given props or is not disabled. And the test looks like below:</p>
  
  <pre><code>describe('MyComponent', () =&gt; {
      it('should render disabled button when props.disabled is equal to true', () =&gt; {
          // given
          const props = {
              disabled: () =&gt; true
          };
  
          // when
          const myComponent = TestUtils.renderIntoDocument(&lt;MyComponent {...props}/&gt;);
  
          // then
          const root = ReactDOM.findDOMNode(myComponent);
          const myButton = root.querySelector('#my-button');
          expect(myButton.disabled).toEqual(true);
      });
  
      it('should render enebled button when props.disabled returns false', () =&gt; {
          // given
          const props = {
              disabled: () =&gt; false
          };
  
          // when
          const myComponent = TestUtils.renderIntoDocument(&lt;MyComponent {...props}/&gt;);
  
          // then
          const root = ReactDOM.findDOMNode(myComponent);
          const myButton = root.querySelector('#my-button');
          expect(myButton.disabled).toEqual(false);
      })
  });
  </code></pre>
  
  <p>And this implementation of test doesn't work. First test is passed but second is failed. </p>
  
  <p>But when the propTypes is set to <code>disabled: false</code> instead of <code>disabled: () =&gt; false</code> both tests are successful. </p>
  
  <p>The question is why tests are successful, when function <code>disabled</code> is a boolean constant value equal to false and doesn't work when <code>disabled</code> is a function that returns <code>false</code>?</p>
  
  <p>logs of failure test:</p>
  
  <p>expect(received).toEqual(expected)</p>
  
  <pre><code>Expected value to equal:
    false
  Received:
    true
  
    at Object.&lt;anonymous&gt; (__tests__/unit/components/create/MyComponent-test.js:90:37)
        at new Promise (&lt;anonymous&gt;)
        at &lt;anonymous&gt;
    at process._tickCallback (internal/process/next_tick.js:118:7)
  </code></pre>