title: Why is TestUtils.Simulate.click in Jest not working when used directly on React Components?
body: <p>Let's say I have 2 components. A parent that contains a child. </p>
  
  <p>The child component is a button like so:</p>
  
  <pre><code>var React = require('react');
  
  var ChildButton = React.createClass({
    onSubmitAnswer: function(e) {
      this.props.onClick(this);
    },
  
    render: function() {
      return (
        &lt;div className={this.props.visibility}&gt;
            &lt;button onClick={this.onSubmitAnswer}&gt;Click Me&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  
  });
  
  module.exports = ChildButton;
  </code></pre>
  
  <p>It lives within it's parent, which looks like this:</p>
  
  <pre><code>var React = require('react'),
      ChildButton = require('./face-submit-button');
  
  var ParentComponent = React.createClass({
    onButtonSubmit: function() {
      //Something happens here
    },
  
    render: function() {
      return (
        &lt;div&gt;
          //Some more components
          &lt;ChildButton text="Submit" onClick={this.onButtonSubmit} /&gt;
        &lt;/div&gt;
      )
    }
  
  });
  
  module.exports = ParentComponent;
  </code></pre>
  
  <p>So far so good. Everything works as expected in the UI. But I've encountered some issues in the Jest tests using TestUtils.Simulate.click().</p>
  
  <p>My test for the ChildButton component is straightforward and behaves as I would expect.</p>
  
  <pre><code>jest.dontMock('./child-button');
  
  describe('ChildButton', function() {
    var React = require('react/addons'),
        ChildButton = require('./child-button'),
        TestUtils = React.addons.TestUtils;
  
    describe('events', function() {
      var button,
          onClickStub;
  
      beforeEach(function() {
        onClickStub = jest.genMockFn();
  
        button = TestUtils.renderIntoDocument(
          &lt;ChildButton onClick={onClickStub} /&gt;
        );
      });
  
      it('should call onSubmitAnswer when the button is clicked', function() {
        var buttonTag = TestUtils.findRenderedDOMComponentWithTag(button, 'button');
  
        TestUtils.Simulate.click(buttonTag);
  
        expect(onClickStub).toBeCalled();
      });
    });
  });
  </code></pre>
  
  <p>My test for the parent component started out looking the same:</p>
  
  <pre><code>jest.dontMock('./parent-component');
  
  describe('ParentComponent', function() {
    var React = require('react/addons'),
        ParentComponent = require('./parent-component'),
        ChildButton = require('./child-button'),
        TestUtils = React.addons.TestUtils;
  
    describe('events', function() {
      var parent,
          onClickStub;
  
      beforeEach(function() {
        onClickStub = jest.genMockFn();
  
        parent = TestUtils.renderIntoDocument(
          &lt;ParentComponent onClick={onClickStub} /&gt;
        );
      });
  
      it('should call onButtonSubmit when a click is triggered', function() {
        var childButton = TestUtils.findRenderedComponentWithType(parent, ChildButton);
  
        TestUtils.Simulate.click(childButton);
  
        expect(onClickStub).toBeCalled();
      });
    });
  });
  </code></pre>
  
  <p>But this test fails. The only difference I can see between these two tests is that one uses an HTML tag directly and clicks on it, while the other triggers a click on a React component. Can I not use the click event on React components directly? Is my assumption correct? </p>
  
  <p>And if so, is there a way to trigger a click on React components differently in the tests? I tried using SimulateNative but that had the same effect, the onClickStub doesn't get called on click.</p>