`TestUtils.Simulate.click` does not fire native listeners

[neojski]

I was surprised that the below does not log anything:

document.body.innerHTML = '<div id="element">test</div>';
var el = document.getElementById('element');
el.onclick = function () {
  console.log('clicked');
};
React.addons.TestUtils.Simulate.click(el);

On the other hand, dispatching events with node.dispatchEvent(new MouseEvent(...)) doesn't seem to trigger react events.

From the general documentation I expected that these should work. It seems, however, like react event system is parallel to browser events and they don't really interact in this way.

[sophiebits]

TestUtils.Simulate only uses React's internal event system; it does not touch the actual DOM at all so it can't use any of the DOM event handlers. I'd be happy to take a pull request improving the docs to make this clearer.

[neojski]

I understand that this explains that the above code doesn't work. But why calling node.dispatchEvent doesn't call react events? Is it because react event listeners are attached higher in hierarchy than the actual node? (like to some ancestor of the node so that you can group them and then delegate to the right node)

[sophiebits]

Yes, the listeners are at the document level.