@@ -29,24 +29,24 @@ title: Examples
29
29
```
30
30
31
31
``` js
32
- import {render , fireEvent } from ' @testing-library/vue'
32
+ import {render , fireEvent , screen } from ' @testing-library/vue'
33
33
import Component from ' ./Component.vue'
34
34
35
35
test (' increments value on click' , async () => {
36
- // The render method returns a collection of utilities to query your component.
37
- const {getByText } = render (Component)
36
+ render (Component)
38
37
38
+ // screen has all queries that you can use in your tests.
39
39
// getByText returns the first matching node for the provided text, and
40
40
// throws an error if no elements match or if more than one match is found.
41
- getByText (' Times clicked: 0' )
41
+ screen . getByText (' Times clicked: 0' )
42
42
43
- const button = getByText (' increment' )
43
+ const button = screen . getByText (' increment' )
44
44
45
45
// Dispatch a native click event to our button element.
46
46
await fireEvent .click (button)
47
47
await fireEvent .click (button)
48
48
49
- getByText (' Times clicked: 2' )
49
+ screen . getByText (' Times clicked: 2' )
50
50
})
51
51
```
52
52
@@ -72,23 +72,23 @@ test('increments value on click', async () => {
72
72
```
73
73
74
74
``` js
75
- import {render , fireEvent } from ' @testing-library/vue'
75
+ import {render , fireEvent , screen } from ' @testing-library/vue'
76
76
import Component from ' ./Component.vue'
77
77
78
78
test (' properly handles v-model' , async () => {
79
- const { getByLabelText , getByText } = render (Component)
79
+ render (Component)
80
80
81
81
// Asserts initial state.
82
- getByText (' Hi, my name is Alice' )
82
+ screen . getByText (' Hi, my name is Alice' )
83
83
84
84
// Get the input DOM node by querying the associated label.
85
- const usernameInput = getByLabelText (/ username/ i )
85
+ const usernameInput = screen . getByLabelText (/ username/ i )
86
86
87
87
// Updates the <input> value and triggers an `input` event.
88
88
// fireEvent.input() would make the test fail.
89
89
await fireEvent .update (usernameInput, ' Bob' )
90
90
91
- getByText (' Hi, my name is Bob' )
91
+ screen . getByText (' Hi, my name is Bob' )
92
92
})
93
93
```
94
94
0 commit comments