Skip to content

Commit 0b4d706

Browse files
authored
docs: change vue examples to use screen (#1233)
1 parent 3aa6f36 commit 0b4d706

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

docs/vue-testing-library/examples.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,24 @@ title: Examples
2929
```
3030

3131
```js
32-
import {render, fireEvent} from '@testing-library/vue'
32+
import {render, fireEvent, screen} from '@testing-library/vue'
3333
import Component from './Component.vue'
3434

3535
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)
3837

38+
// screen has all queries that you can use in your tests.
3939
// getByText returns the first matching node for the provided text, and
4040
// 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')
4242

43-
const button = getByText('increment')
43+
const button = screen.getByText('increment')
4444

4545
// Dispatch a native click event to our button element.
4646
await fireEvent.click(button)
4747
await fireEvent.click(button)
4848

49-
getByText('Times clicked: 2')
49+
screen.getByText('Times clicked: 2')
5050
})
5151
```
5252

@@ -72,23 +72,23 @@ test('increments value on click', async () => {
7272
```
7373

7474
```js
75-
import {render, fireEvent} from '@testing-library/vue'
75+
import {render, fireEvent, screen} from '@testing-library/vue'
7676
import Component from './Component.vue'
7777

7878
test('properly handles v-model', async () => {
79-
const {getByLabelText, getByText} = render(Component)
79+
render(Component)
8080

8181
// Asserts initial state.
82-
getByText('Hi, my name is Alice')
82+
screen.getByText('Hi, my name is Alice')
8383

8484
// Get the input DOM node by querying the associated label.
85-
const usernameInput = getByLabelText(/username/i)
85+
const usernameInput = screen.getByLabelText(/username/i)
8686

8787
// Updates the <input> value and triggers an `input` event.
8888
// fireEvent.input() would make the test fail.
8989
await fireEvent.update(usernameInput, 'Bob')
9090

91-
getByText('Hi, my name is Bob')
91+
screen.getByText('Hi, my name is Bob')
9292
})
9393
```
9494

0 commit comments

Comments
 (0)