Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1b9e396

Browse files
docs: Add TypeScript Examples to vue-testing-library (#1463)
1 parent d26e8ca commit 1b9e396

File tree

1 file changed

+114
-0
lines changed

1 file changed

+114
-0
lines changed

‎docs/vue-testing-library/examples.mdx

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,16 @@ id: examples
33
title: Example
44
---
55

6+
import Tabs from '@theme/Tabs'
7+
import TabItem from '@theme/TabItem'
8+
69
## Basic example
710

11+
<Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'JavaScript',
12+
value: 'js'}, {label: 'TypeScript', value: 'ts'}, ]}>
13+
14+
<TabItem value="js">
15+
816
```html
917
<template>
1018
<div>
@@ -50,8 +58,66 @@ test('increments value on click', async () => {
5058
})
5159
```
5260

61+
</TabItem>
62+
63+
<TabItem value="ts">
64+
65+
```html
66+
<template>
67+
<div>
68+
<p>Times clicked: {{ count }}</p>
69+
<button @click="increment">increment</button>
70+
</div>
71+
</template>
72+
73+
<script lang="ts">
74+
export default {
75+
data: (): {count: number} => ({
76+
count: 0,
77+
}),
78+
79+
methods: {
80+
increment(): void {
81+
this.count++
82+
},
83+
},
84+
}
85+
</script>
86+
```
87+
88+
```ts
89+
import {render, fireEvent, screen} from '@testing-library/vue'
90+
import Component from './Component.vue'
91+
92+
test('increments value on click', async () => {
93+
render(Component)
94+
95+
// screen has all queries that you can use in your tests.
96+
// getByText returns the first matching node for the provided text, and
97+
// throws an error if no elements match or if more than one match is found.
98+
screen.getByText('Times clicked: 0')
99+
100+
const button = screen.getByText('increment')
101+
102+
// Dispatch a native click event to our button element.
103+
await fireEvent.click(button)
104+
await fireEvent.click(button)
105+
106+
screen.getByText('Times clicked: 2')
107+
})
108+
```
109+
110+
</TabItem>
111+
112+
</Tabs>
113+
53114
## Example using `v-model`:
54115

116+
<Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'JavaScript',
117+
value: 'js'}, {label: 'TypeScript', value: 'ts'}, ]}>
118+
119+
<TabItem value="js">
120+
55121
```html
56122
<template>
57123
<div>
@@ -92,6 +158,54 @@ test('properly handles v-model', async () => {
92158
})
93159
```
94160

161+
</TabItem>
162+
163+
<TabItem value="ts">
164+
165+
```html
166+
<template>
167+
<div>
168+
<p>Hi, my name is {{ user }}</p>
169+
170+
<label for="username">Username:</label>
171+
<input v-model="user" id="username" name="username" />
172+
</div>
173+
</template>
174+
175+
<script lang="ts">
176+
export default {
177+
data: (): {user: string} => ({
178+
user: 'Alice',
179+
}),
180+
}
181+
</script>
182+
```
183+
184+
```ts
185+
import {render, fireEvent, screen} from '@testing-library/vue'
186+
import Component from './Component.vue'
187+
188+
test('properly handles v-model', async () => {
189+
render(Component)
190+
191+
// Asserts initial state.
192+
screen.getByText('Hi, my name is Alice')
193+
194+
// Get the input DOM node by querying the associated label.
195+
const usernameInput = screen.getByLabelText(/username/i)
196+
197+
// Updates the <input> value and triggers an `input` event.
198+
// fireEvent.input() would make the test fail.
199+
await fireEvent.update(usernameInput, 'Bob')
200+
201+
screen.getByText('Hi, my name is Bob')
202+
})
203+
```
204+
205+
</TabItem>
206+
207+
</Tabs>
208+
95209
## More examples
96210

97211
You'll find examples of testing with different libraries in

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /