使用自定义 { target : { value } } 数据调度“oninput”事件答案

【问题标题】：Dispatch an "oninput" event with a custom { target : { value } } data使用自定义 { target : { value } } 数据调度“oninput”事件
【发布时间】：2017-02-12 08:32:58
【问题描述】：

我正在尝试在单元测试中的<input> 元素上使用dispatchEvent，以使用自定义{target: {value: "data"}} 触发其“oninput”处理程序

This guide 只告诉你如何触发CustomEvent。但我认为这行不通，因为它只允许您指定“详细信息”属性。我实际上是在尝试用{target: {value: "data"}}

之类的东西来触发它

还有InputEvent，但它似乎也只采用相同的“详细信息”属性。

这是我的<input>：

<input
   oninput={handleOnInput} // jsx
>
...
function handleOnInput(e){
    const data = e.target.value; // << needs to be mocked
}

这是我的测试代码：

getThatInputEl().dispatchEvent(what can trigger "input" with {target: {value: "data"}} ?)

有没有一种方法可以使用自定义{target: value: "data"} 调度“输入”事件？

【问题讨论】：

标签： javascript unit-testing dom-events

【解决方案1】：

当您在实际 input 元素上调度 input 事件时，e.target 始终设置为元素，您不能覆盖它 - 您只能传递带有附加数据的对象。要解决您的问题，您只需在调度事件之前设置输入值，或者您可以测试事件处理程序本身

【讨论】：