User event element types are more narrow than what is returned by RTS queries

• @testing-library/user-event version:13.1.1

• Testing Framework and version: Jest v26.6.3
• DOM Environment: jsdom v16.5.0

Relevant code or config

userEvent.paste(screen.getByRole('textbox'), 'Ralph');
// or
userEvent.upload(screen.getByLabelText('labelText'), file);

What you did:

Compiled using TypeScript.

What happened:

Type error

Argument of type 'HTMLElement' is not assignable to parameter of type 'HTMLInputElement | HTMLTextAreaElement'.
  Type 'HTMLElement' is missing the following properties from type 'HTMLTextAreaElement': autocomplete, cols, defaultValue, dirName, and 26 more.ts(2345)

Reproduction repository:

N/A

Problem description:

Elements returned by react-testing-library queries are of type HTMLElement but user-event functions take more narrow element types like HTMLInputElement | HTMLLabelElement. It looks like the type change was made in @testing-library/user-event v13.

Suggested solution:

The type definitions for userEvent.paste and userEvent.upload should either be relaxed to allow HTMLElement or query methods should be added that return the more narrow element types. Type casting should not be required.

[GreenGremlin]

Type casting is not ideal, since it guarantees nothing. A better solution would be to have a way to filter query results by tag name, which would guarantee the query is returning the expected type. In the meantime, it feels broken for user-event functions to be incompatible with react-testing-library queries, if they can’t be used without type casting.

[github-actions[bot]]

🎉 This issue has been resolved in version 13.1.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀