Why is TestUtils.Simulate.click in Jest not working when used directly on React Components?

Question

Let's say I have 2 components. A parent that contains a child.

The child component is a button like so:

var React = require('react');

var ChildButton = React.createClass({
  onSubmitAnswer: function(e) {
    this.props.onClick(this);
  },

  render: function() {
    return (
      <div className={this.props.visibility}>
          <button onClick={this.onSubmitAnswer}>Click Me</button>
      </div>
    )
  }

});

module.exports = ChildButton;

It lives within it's parent, which looks like this:

var React = require('react'),
    ChildButton = require('./face-submit-button');

var ParentComponent = React.createClass({
  onButtonSubmit: function() {
    //Something happens here
  },

  render: function() {
    return (
      <div>
        //Some more components
        <ChildButton text="Submit" onClick={this.onButtonSubmit} />
      </div>
    )
  }

});

module.exports = ParentComponent;

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().

My test for the ChildButton component is straightforward and behaves as I would expect.

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(
        <ChildButton onClick={onClickStub} />
      );
    });

    it('should call onSubmitAnswer when the button is clicked', function() {
      var buttonTag = TestUtils.findRenderedDOMComponentWithTag(button, 'button');

      TestUtils.Simulate.click(buttonTag);

      expect(onClickStub).toBeCalled();
    });
  });
});

My test for the parent component started out looking the same:

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(
        <ParentComponent onClick={onClickStub} />
      );
    });

    it('should call onButtonSubmit when a click is triggered', function() {
      var childButton = TestUtils.findRenderedComponentWithType(parent, ChildButton);

      TestUtils.Simulate.click(childButton);

      expect(onClickStub).toBeCalled();
    });
  });
});

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?

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.

Answer 1

There is currently an open bug for this issue: Let ReactTestUtils.Simulate.click work on non-dom components. So the answer is that due to bugs, you can only use Simulate.click on an actual DOM node. So you can workaround the bug by getting the DOM node until it is fixed.