Dispatch an "oninput" event with a custom { target : { value } } data

Question

I'm trying to use dispatchEvent on an <input> element in a unit test to trigger its "oninput" handler with a custom {target: {value: "data"}}

This guide only tells you how to trigger a CustomEvent . But I don't think that'll work as it only lets you specify a "details" property. I'm actually trying to trigger it with something like {target: {value: "data"}}

There's also InputEvent but it too seems to take the same "details" property only.

Here's my <input> :

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

And this is my test code:

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

Is there a way you can dispatch an "input" event with a custom {target: value: "data"} ?

Answer 1

When you dispatch input event on actual input element e.target is always set to the element, you can't override it - you can only pass object with additional data. To solve your problem you just have to set value of input before dispatching event or you can test event handler itself