爲什麼在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