Confusion about entering input into text fields in V14 (user.type vs user.click + user.keyboard)

[cjenkscybercom]

I've just started using this library, using v14 as recommended in the docs since v13.5 is EOL.

A lot of what I see online in e.g. StackOverflow uses the userEvent.type(someElement, 'some text') methods, however according to the docs this is a v13 method so I assume it'll be deprecated and that there's a recommended way of doing this in v14.

However, I don't see a similar convenience method in v14, or any guideline in the v13 docs on what to do instead of this old method.

So, is it supposed to be quite literally something like this? (click on the field, then type on the keyboard)

const user = userEvent.setup();
await user.click(await findbyLabelText('some field'));
await user.keyboard('some text');

The confusing part is that I can still use the old method, e.g.

const user = userEvent.setup();
await user.type(await findbyLabelText('some field'), 'some text');

And both do what I expect them to in tests.
So, I'm not sure if there's a difference and/or if that method will eventually be deprecated.

Can anyone please help clarify this?

[ph-fritsche]

You can find the docs for .type() in v14 here: https://testing-library.com/docs/user-event/utility#type

I don't think this method will ever by removed from user-event. Any changes to the API would be a major release.

You should use keyboard() if you want to just simulate pressing buttons on the keyboard.
You can use type() if you just want to conveniently insert some text into an input field or textarea.

If you use .type() as a shortcut for "click this input element and start typing", it's fine.
If you use one of the options or use the API on a non-input element, I'd recommend to use .pointer() (or the convenience APIs) and .keyboard() to describe the interaction that you're testing.

[cjenkscybercom]

Thank you for clarifying this!
I feel silly I didn't spot that in the utilities section of the docs, then again I'm not sure of the difference between that and the convenience section either...either way, thanks!

[ph-fritsche]

Utility APIs
The following APIs don't have one-to-one equivalents in a real user interaction.
Their behavior is therefore an interpretation how the "perceived" user interaction might be translated to actual events on the DOM.

There isn't a single source of truth for these APIs. The described interaction isn't unambiguous.
E.g. .clear(): This API describes that a user removes the content of an element. But there are different ways to do so.
Most persons just associate the concrete interaction that they'd use.

user A: tabs through the page and hits Del on the keyboard
user B: triple-clicks the element and then hits Backspace on the keyboard
user C: selects everything by dragging the mouse, opens the context menu with a right-click and then clicks the "Delete" option
...

Therefore we can't determine which events would be "correct" to be dispatched here.