diff --git a/docs/user-event/intro.mdx b/docs/user-event/intro.mdx index ff397ad1f..e854c9498 100644 --- a/docs/user-event/intro.mdx +++ b/docs/user-event/intro.mdx @@ -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 `user-event@13.5.0` -[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 `user-event@13.5.0` [here](../ecosystem-user-event.mdx). ::: @@ -22,16 +21,14 @@ 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. @@ -39,19 +36,18 @@ to test interaction with your components. 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() + const user = userEvent.setup() + render() - await user.click(screen.getByRole('button', name: /click me!/)) + await user.click(screen.getByRole('button', {name: /click me!/i})) - // ...assertions... + // ...assertions... }) ```