Skip to content

docs(user-event): fix a typo #1036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 5, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 15 additions & 19 deletions docs/user-event/intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@ events that would happen if the interaction took place in a browser.

:::note Latest version

These docs describe `user-event@14`.
We recommend updating your projects to this version, as it includes important
bug fixes and new features. You can find the docs for `[email protected]`
[here](../ecosystem-user-event.mdx).
These docs describe `user-event@14`. We recommend updating your projects to this
version, as it includes important bug fixes and new features. You can find the
docs for `[email protected]` [here](../ecosystem-user-event.mdx).

:::

Expand All @@ -22,36 +21,33 @@ with any framework as long as there is a DOM.
## Difference to `fireEvent`

The built-in [`fireEvent`](dom-testing-library/api-events.mdx#fireevent) is a
utility to easier dispatch events.
It dispatches exactly the events you tell it to and just those - even if those
exact events never had been dispatched in a real interaction in a browser.
utility to easier dispatch events. It dispatches exactly the events you tell it
to and just those - even if those exact events never had been dispatched in a
real interaction in a browser.

`user-event` on the other hand dispatches the events like they would happen if a
user interacted with the document.
That might lead to the same events you previously dispatched per `fireEvent`
directly, but it also might catch bugs that make it impossible for a user to
trigger said events.
This is
user interacted with the document. That might lead to the same events you
previously dispatched per `fireEvent` directly, but it also might catch bugs
that make it impossible for a user to trigger said events. This is
[why you should use `user-event`](https://ph-fritsche.github.io/blog/post/why-userevent)
to test interaction with your components.

## Writing tests with `userEvent`

We recommend to use [`userEvent.setup()`](setup.mdx) when rendering your
component and inline that rendering and setup in your test or use a setup
function.
We discourage rendering or using any `userEvent` functions outside of the test
itself - e.g. in a `before`/`after` hook - for reasons described in
function. We discourage rendering or using any `userEvent` functions outside of
the test itself - e.g. in a `before`/`after` hook - for reasons described in
["Avoid Nesting When You're Testing"](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing).

```js
test('trigger some awesome feature when clicking the button', async () => {
const user = userEvent.setup()
render(<MyComponent/>)
const user = userEvent.setup()
render(<MyComponent />)

await user.click(screen.getByRole('button', name: /click me!/))
await user.click(screen.getByRole('button', {name: /click me!/i}))

// ...assertions...
// ...assertions...
})
```

Expand Down