为什么在dispatchEvent上不调用React事件处理程序？

Question

考虑一个阵营组件的以下输入元件：

<input onChange={() => console.log('onChange')} ... /> 

虽然测试阵营组分，我模拟用户改变输入值：

input.value = newValue; 
TestUtils.Simulate.change(input); 

这导致'onChange'被记录，如预期。

然而，当'change'事件直接发送（我使用jsdom）：

input.value = newValue; 
input.dispatchEvent(new Event('change')); 

的onChange处理程序不被调用。

为什么？

我使用dispatchEvent而不是TestUtils.Simulate的动机是因为TestUtils.Simulate不支持事件冒泡，而且我的组件的行为依赖于此。我想知道是否有方法来测试没有TestUtils.Simulate事件？

Answer 1

React使用自己的事件系统与SyntheticEvents（防止浏览器不兼容，并给予更多的事件控制）。

使用TestUtils正确地创建了这样一个事件，它将触发您的onChange侦听器。

另一方面dispatchEvent函数将创建一个“本机”浏览器事件。但是，您拥有的事件处理程序是通过反应进行管理的，因此只会作出反应（badumts）以反应SyntheticEvents。

您可以在反应事件读到这里：https://facebook.github.io/react/docs/events.html

Answer 2

一种方式做到这一点不ReactTestUtils.Simulate：

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'https://unpkg.com/react-trigger-change/dist/react-trigger-change.js'; 
document.head.appendChild(script); 
input.value = value; 
reactTriggerChange(input); 

• https://github.com/vitalyq/react-trigger-change
• https://github.com/facebook/react/issues/3249#issuecomment-292919084