ReactTestUtils Simulate.Change parameter type SyntheticEventData error

Question

I have this code below written in typescript which use ReactTestUtils from "react-dom/test-utils".

let nameInput = TestUtilsExtended.findRenderedDOMComponentWithTag(root, "input");

TestUtilsExtended.Simulate.change(nameInput, {
    target: {
        value : "alice"
    }
} as any);

It works fine and the result is as intended when I put that as any casting. If I remove the casting, this error occurs:

[ts] Argument of type '{ target: { value: string; }; }' is not assignable to parameter of type 'SyntheticEventData'. Types of property 'target' are incompatible. Type '{ value: string; }' is not assignable to type 'EventTarget'. Object literal may only specify known properties, and 'value' does not exist in type 'EventTarget'.

Here is the intellisense for Simulate.change I got from @types/react-dom (version: ^15.5.4):

const Simulate.change: (element: React.ReactInstance, eventData?: SyntheticEventData) => void

In the declaration of the SyntheticEventData interface, I found that the target property's type is Javascript EventTarget:

export interface OptionalEventProperties {
    // ....
    target?: EventTarget;
}

export interface SyntheticEventData extends OptionalEventProperties {
    // ....
}

Since the code works as intended when I put the as any casting, I don't quite get how this EventTarget interface works.

Do you guys know the workaround to remove the as any casting? Because if possible I'd like to minimize casting anything to any in my code. I want to make the code strongly typed.

Answer 1

you need to cast as unknown and then cast it to EventTarget

let nameInput = TestUtilsExtended.findRenderedDOMComponentWithTag(root, "input");

TestUtilsExtended.Simulate.change(nameInput, {
    target: {
        value : "alice"
    }
} as unknown as EventTarget);