ReactTestUtils.Simulate.click does not work with jsdom

[yanns]

When testing a react application on Nodejs with mocha and jsdom, ReactTestUtils.Simulate.click does not affect the component.

Sample app to reproduce the problem:
https://github.com/yanns/react-unit-test/tree/pb-with-jsdom

The test:
https://github.com/yanns/react-unit-test/blob/pb-with-jsdom/src/test/mocha/LabelTest.js

[sophiebits]

Related, perhaps: http://stackoverflow.com/questions/22062663/how-to-use-react-test-utilities

[josephsavona]

I recreated the issue with Simulate and jsdom and confirmed that Simulate() only works with the DOM element, not with the React component.

This fails:

var button = React.addons.TestUtils.renderIntoDocument(Button({
  onClick: function() {}
});
React.addons.TestUtils.Simulate.click(button);

This works:

var button = React.addons.TestUtils.renderIntoDocument(Button({
  onClick: function() {}
});
React.addons.TestUtils.Simulate.click(button.getDOMNode());

[josephsavona]

@yanns in your test code LabelTest.js change from

ReactTestUtils.Simulate.click(label.refs.p);

to

ReactTestUtils.Simulate.click(label.refs.p.getDOMNode());

[sophiebits]

Interesting; it should work on the DOM component.

[yanns]

@josephsavona Thanks for the feedback.
I've tried your suggestion: yanns/react-unit-test@519ae42
but it is still failling.

I tried to update React to 0.10.0: yanns/react-unit-test@1a56587
And I got following error:

  1) Label Test Check Text Assignment:
     Error: Invariant Violation: setEnabled(...): Cannot toggle event listening in a Worker thread. This is likely a bug in the framework. Please report immediately.
      at invariant (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/invariant.js:52:19)
      at Object.merge.setEnabled (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/ReactEventEmitter.js:206:46)
      at ReactReconcileTransaction.EVENT_SUPPRESSION.initialize (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/ReactReconcileTransaction.js:58:23)
      at ReactReconcileTransaction.Mixin.initializeAll (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/Transaction.js:197:30)
      at ReactReconcileTransaction.Mixin.perform (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/Transaction.js:158:12)
      at ReactComponent.Mixin.mountComponentIntoNode (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/ReactComponent.js:537:19)
      at Object.ReactMount._renderNewRootComponent (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/ReactMount.js:309:25)
      at Object._renderNewRootComponent (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/ReactPerf.js:57:21)
      at Object.ReactMount.renderComponent (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/ReactMount.js:359:32)
      at Object.renderComponent (/home/simon/projects/react.js/react-unit-test/node_modules/react/lib/ReactPerf.js:57:21)

[avh4]

I've had the same problem. It seems that .tagName is not getting set on my components under test. If I remove && !!inst.tagName from ReactTestUtils.isDOMComponent, then it seems to work okay (not sure what other implications this would have, though).

Also, in my case, I am using the browser DOM (running with karma), not jsdom.

[brigand]

This is the simplest test case I can think of. I made a test for it, and it appears that only a few elements have this problem:

http://jsfiddle.net/W3qsZ/2/

Included are button, form, input, select, option and textarea, i.e. everything you'd want to trigger events on :-)

[sophiebits]

@brigand Thanks, that's a huge help. @syranide's #877 should fix this.

[zpao]

I'm going to close this and wrap it up under #1445. Thanks a lot for all of the hunting. If anybody is interested in taking on that issue, it sounds like it would help quite a few people :)

[danawoodman]

I take it from this thread that it is currently impossible to simulate events on sub-components in react using refs? I'm able to get this to work with a top level component but as soon as I want to do it on a nested component I get the same error @yanns has

eg, this fails:

// test:
TestUtils.Simulate.click(component.refs.bar.getDOMNode())

// component:
<Foo><Bar refs='bar' onClick={this.doSomething} /></Foo>

With the error:

Error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use React.renderToString for server rendering.

But this works:

// test:
TestUtils.Simulate.click(component.getDOMNode())

// component:
<Bar onClick={this.doSomething} />

[snackycracky]

@danawoodman in <Foo><Bar refs='bar' onClick={this.doSomething} /></Foo> you wrote refs, but it should be ref.