なぜReactイベントハンドラがdispatchEventで呼び出されないのですか？

Question

が反応成分の次の入力要素検討：反応させコンポーネントのテスト中

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

を、Iは、入力値を変更するユーザをエミュレートしている：

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

このとして、ログインする'onChange'を引き起こします期待される。 'change'イベントを直接送出されたときに

しかし、（私はjsdomを使用しています）：

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

onChangeハンドラが呼び出されません。

なぜですか？

TestUtils.SimulateではなくdispatchEventを使用する私の動機は、TestUtils.Simulateがイベントのバブリングをサポートしておらず、コンポーネントの動作がそれに依存しているためです。私はTestUtils.Simulateなしでイベントをテストする方法があるのだろうか？

Answer 1

ReactはSyntheticEventsという独自のイベントシステムを使用しています（ブラウザの非互換性を防ぎ、イベントの制御をより効果的に行います）。

TestUtilsを使用すると、お客様のonChangeリスナーがトリガーされるようなイベントが正しく作成されます。

一方、dispatchEvent関数は、 "ネイティブ"ブラウザイベントを作成します。しかし、あなたが持っているイベントハンドラは反応することによって管理されているので、反応するのはバッドゥーム（反応する）だけですSyntheticEvents。 ReactTestUtils.Simulateせずにそれを行うにhttps://facebook.github.io/react/docs/events.html

Answer 2

一つの方法：あなたがここにイベントを反応上に読むことができます

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