userEvent@14 Setup doc clarification

[Fullchee]

I'm struggling to understand the setup page of the userEvent docs

When users interact in the browser by e.g. pressing keyboard keys, they interact with a UI layer the browser shows to them.

Q1: What are some examples of the UI layer that needs to be mocked?

• Is this referring to how the displayed value can be different than the value property?
  • feat: setup and state #714
• What would be another example of the UI layer?

The browser then interprets this input, possibly alters the underlying DOM accordingly and dispatches trusted events.

Q2: What's an example of the UI layer altering the DOM?

• Would an example of this be clicking play and pause on a <video> element which modifies the shadow DOM inside that <video> tag?

---

Background

Similar question

• How did `userEvent` work before v14 and the `#setup` method? #962

I'm trying to understand why the API changed from v13 to v14

Example inline usage

+ const user = userEvent.setup()
render(<MyComponent />)
const myInput = screen.getByLabel('My Input')
- userEvent.click(myInput)
+ await user.click(myInput)

My high level understanding is that

1. we want more user events to be even more similar to a real user
2. this new API allows us to mock more user events
   • https://github.com/testing-library/user-event/releases/tag/v14.0.0
   • looks like we can now tab around and type cmd/ctrl A among other things