考虑React组件中的以下输入元素:
<input onChange={() => console.log('onChange')} ... />
在测试React组件时,我正在模拟用户更改输入值:
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的情况下测试事件?
React使用自己的事件系统和SyntheticEvents(防止浏览器不兼容,并对事件做出更多控制).
原文链接:https://www.f2er.com/react/300867.html使用TestUtils正确创建了一个触发你的onChange监听器的事件.
另一方面,dispatchEvent函数将创建“本机”浏览器事件.但是你拥有的事件处理程序是通过反应来管理的,因此只会对(badumts)做出反应来对SyntheticEvents做出反应.
你可以在这里阅读反应事件:https://facebook.github.io/react/docs/events.html