@@ -9,10 +9,9 @@ events that would happen if the interaction took place in a browser.
9
9
10
10
:::note Latest version
11
11
12
- These docs describe ` user-event@14 ` .
13
- We recommend updating your projects to this version, as it includes important
14
- bug fixes and new features. You can find the docs for
` [email protected] `
15
- [ here] ( ../ecosystem-user-event.mdx ) .
12
+ These docs describe ` user-event@14 ` . We recommend updating your projects to this
13
+ version, as it includes important bug fixes and new features. You can find the
14
+ docs for
` [email protected] ` [ here
] ( ../ecosystem-user-event.mdx ) .
16
15
17
16
:::
18
17
@@ -22,36 +21,33 @@ with any framework as long as there is a DOM.
22
21
## Difference to ` fireEvent `
23
22
24
23
The built-in [ ` fireEvent ` ] ( dom-testing-library/api-events.mdx#fireevent ) is a
25
- utility to easier dispatch events.
26
- It dispatches exactly the events you tell it to and just those - even if those
27
- exact events never had been dispatched in a real interaction in a browser.
24
+ utility to easier dispatch events. It dispatches exactly the events you tell it
25
+ to and just those - even if those exact events never had been dispatched in a
26
+ real interaction in a browser.
28
27
29
28
` user-event ` on the other hand dispatches the events like they would happen if a
30
- user interacted with the document.
31
- That might lead to the same events you previously dispatched per ` fireEvent `
32
- directly, but it also might catch bugs that make it impossible for a user to
33
- trigger said events.
34
- This is
29
+ user interacted with the document. That might lead to the same events you
30
+ previously dispatched per ` fireEvent ` directly, but it also might catch bugs
31
+ that make it impossible for a user to trigger said events. This is
35
32
[ why you should use ` user-event ` ] ( https://ph-fritsche.github.io/blog/post/why-userevent )
36
33
to test interaction with your components.
37
34
38
35
## Writing tests with ` userEvent `
39
36
40
37
We recommend to use [ ` userEvent.setup() ` ] ( setup.mdx ) when rendering your
41
38
component and inline that rendering and setup in your test or use a setup
42
- function.
43
- We discourage rendering or using any ` userEvent ` functions outside of the test
44
- itself - e.g. in a ` before ` /` after ` hook - for reasons described in
39
+ function. We discourage rendering or using any ` userEvent ` functions outside of
40
+ the test itself - e.g. in a ` before ` /` after ` hook - for reasons described in
45
41
[ "Avoid Nesting When You're Testing"] ( https://kentcdodds.com/blog/avoid-nesting-when-youre-testing ) .
46
42
47
43
``` js
48
44
test (' trigger some awesome feature when clicking the button' , async () => {
49
- const user = userEvent .setup ()
50
- render (< MyComponent/ > )
45
+ const user = userEvent .setup ()
46
+ render (< MyComponent / > )
51
47
52
- await user .click (screen .getByRole (' button' , name: / click me!/ ))
48
+ await user .click (screen .getByRole (' button' , { name: / click me!/ i } ))
53
49
54
- // ...assertions...
50
+ // ...assertions...
55
51
})
56
52
```
57
53
0 commit comments