[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite.
vitest.dev
test
testing-tools
vite
docs: trace mark integration with vitest-browser-react/vue/svelte (#9828)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
authored by
Hiroshi Ogawa
Claude Opus 4.6
and committed by
GitHub
(Mar 10, 2026, 8:35 AM +0100)
228067e3
99e52fe5
+70
-28
+6
docs/api/browser/react.md
+6
docs/api/browser/react.md
···
39
39
): Promise<RenderResult>
40
40
```
41
41
42
+
The `render` function records a `react.render` trace mark, visible in the [Trace View](/guide/browser/trace-view).
43
+
42
44
:::warning
43
45
Note that `render` is asynchronous, unlike in other packages. This is to support [`Suspense`](https://react.dev/reference/react/Suspense) correctly.
44
46
···
154
156
function rerender(ui: React.ReactNode): Promise<void>
155
157
```
156
158
159
+
Also records a `react.rerender` trace mark in the [Trace View](/guide/browser/trace-view).
160
+
157
161
It is better if you test the component that's doing the prop updating to ensure that the props are being updated correctly to avoid relying on implementation details in your tests. That said, if you'd prefer to update the props of a rendered component in your test, this function can be used to update props of the rendered component.
158
162
159
163
```jsx
···
170
174
```ts
171
175
function unmount(): Promise<void>
172
176
```
177
+
178
+
Also records a `react.unmount` trace mark in the [Trace View](/guide/browser/trace-view).
173
179
174
180
This will cause the rendered component to be unmounted. This is useful for testing what happens when your component is removed from the page (like testing that you don't leave event handlers hanging around causing memory leaks).
175
181
+32
-17
docs/api/browser/svelte.md
+32
-17
docs/api/browser/svelte.md
···
12
12
import Component from './Component.svelte'
13
13
14
14
test('counter button increments the count', async () => {
15
-
const screen = render(Component, {
15
+
const screen = await render(Component, {
16
16
initialCount: 1,
17
17
})
18
18
···
39
39
Component: ComponentImport<C>,
40
40
options?: ComponentOptions<C>,
41
41
renderOptions?: SetupOptions
42
-
): RenderResult<C>
42
+
): RenderResult<C> & PromiseLike<RenderResult<C>>
43
43
```
44
+
45
+
The `render` function records a `svelte.render` trace mark, visible in the [Trace View](/guide/browser/trace-view).
46
+
47
+
::: warning
48
+
Synchronous usage of `render` is deprecated and will be removed in the next major version. Please always `await` the result:
49
+
50
+
```ts
51
+
const screen = render(Component) // [!code --]
52
+
const screen = await render(Component) // [!code ++]
53
+
```
54
+
:::
44
55
45
56
### Options
46
57
47
58
The `render` function supports either options that you can pass down to [`mount`](https://svelte.dev/docs/svelte/imperative-component-api#mount) or props directly:
48
59
49
60
```ts
50
-
const screen = render(Component, {
61
+
const screen = await render(Component, {
51
62
props: { // [!code --]
52
63
initialCount: 1, // [!code --]
53
64
}, // [!code --]
···
68
79
```ts
69
80
const table = document.createElement('table')
70
81
71
-
const screen = render(TableBody, {
82
+
const screen = await render(TableBody, {
72
83
props,
73
84
// ⚠️ appending the element to `body` manually before rendering
74
85
target: document.body.appendChild(table),
···
86
97
In addition to documented return value, the `render` function also returns all available [locators](/api/browser/locators) relative to the [`baseElement`](#baseelement), including [custom ones](/api/browser/locators#custom-locators).
87
98
88
99
```ts
89
-
const screen = render(TableBody, props)
100
+
const screen = await render(TableBody, props)
90
101
91
102
await screen.getByRole('link', { name: 'Expand' }).click()
92
103
```
···
104
115
The mounted Svelte component instance. You can use this to access component methods and properties if needed.
105
116
106
117
```ts
107
-
const { component } = render(Counter, {
118
+
const { component } = await render(Counter, {
108
119
initialCount: 0,
109
120
})
110
121
···
118
129
```ts
119
130
import { render } from 'vitest-browser-svelte'
120
131
121
-
const { locator } = render(NumberDisplay, {
132
+
const { locator } = await render(NumberDisplay, {
122
133
number: 2,
123
134
})
124
135
···
139
150
#### rerender
140
151
141
152
```ts
142
-
function rerender(props: Partial<ComponentProps<T>>): void
153
+
function rerender(props: Partial<ComponentProps<T>>): Promise<void>
143
154
```
144
155
145
-
Updates the component's props and waits for Svelte to apply the changes. Use this to test how your component responds to prop changes.
156
+
Updates the component's props and waits for Svelte to apply the changes. Use this to test how your component responds to prop changes. Also records a `svelte.rerender` trace mark in the [Trace View](/guide/browser/trace-view).
146
157
147
158
```ts
148
159
import { render } from 'vitest-browser-svelte'
149
160
150
-
const { rerender } = render(NumberDisplay, {
161
+
const { rerender } = await render(NumberDisplay, {
151
162
number: 1,
152
163
})
153
164
···
158
169
#### unmount
159
170
160
171
```ts
161
-
function unmount(): void
172
+
function unmount(): Promise<void>
162
173
```
163
174
164
-
Unmount and destroy the Svelte component. This is useful for testing what happens when your component is removed from the page (like testing that you don't leave event handlers hanging around causing memory leaks).
175
+
Unmount and destroy the Svelte component. Also records a `svelte.unmount` trace mark in the [Trace View](/guide/browser/trace-view). This is useful for testing what happens when your component is removed from the page (like testing that you don't leave event handlers hanging around causing memory leaks).
176
+
177
+
::: warning
178
+
Synchronous usage of `unmount` is deprecated and will be removed in the next major version. Please always `await` the result.
179
+
:::
165
180
166
181
```ts
167
182
import { render } from 'vitest-browser-svelte'
168
183
169
-
const { container, unmount } = render(Component)
170
-
unmount()
184
+
const { container, unmount } = await render(Component)
185
+
await unmount()
171
186
// your component has been unmounted and now: container.innerHTML === ''
172
187
```
173
188
···
193
208
},
194
209
})
195
210
196
-
const screen = render(Component)
211
+
const screen = await render(Component)
197
212
await expect.element(
198
213
screen.getByArticleTitle('Hello World')
199
214
).toBeVisible()
···
211
226
import SubjectTest from './basic-snippet.test.svelte'
212
227
213
228
test('basic snippet', async () => {
214
-
const screen = render(SubjectTest)
229
+
const screen = await render(SubjectTest)
215
230
216
231
const heading = screen.getByRole('heading')
217
232
const child = heading.getByTestId('child')
···
250
265
import Subject from './complex-snippet.svelte'
251
266
252
267
test('renders greeting in message snippet', async () => {
253
-
const screen = render(Subject, {
268
+
const screen = await render(Subject, {
254
269
name: 'Alice',
255
270
message: createRawSnippet(greeting => ({
256
271
render: () => `<span data-testid="message">${greeting()}</span>`,
+32
-11
docs/api/browser/vue.md
+32
-11
docs/api/browser/vue.md
···
12
12
import Component from './Component.vue'
13
13
14
14
test('counter button increments the count', async () => {
15
-
const screen = render(Component, {
15
+
const screen = await render(Component, {
16
16
props: {
17
17
initialCount: 1,
18
18
}
···
40
40
export function render(
41
41
component: Component,
42
42
options?: ComponentRenderOptions,
43
-
): RenderResult
43
+
): RenderResult & PromiseLike<RenderResult>
44
44
```
45
+
46
+
The `render` function records a `vue.render` trace mark, visible in the [Trace View](/guide/browser/trace-view).
47
+
48
+
::: warning
49
+
Synchronous usage of `render` is deprecated and will be removed in the next major version. Please always `await` the result:
50
+
51
+
```ts
52
+
const screen = render(Component) // [!code --]
53
+
const screen = await render(Component) // [!code ++]
54
+
```
55
+
:::
45
56
46
57
### Options
47
58
···
56
67
```js
57
68
const table = document.createElement('table')
58
69
59
-
const { container } = render(TableBody, {
70
+
const { container } = await render(TableBody, {
60
71
props,
61
72
// ⚠️ appending the element to `body` manually before rendering
62
73
container: document.body.appendChild(table),
···
72
83
In addition to documented return value, the `render` function also returns all available [locators](/api/browser/locators) relative to the [`baseElement`](#baseelement), including [custom ones](/api/browser/locators#custom-locators).
73
84
74
85
```ts
75
-
const screen = render(TableBody, { props })
86
+
const screen = await render(TableBody, { props })
76
87
77
88
await screen.getByRole('link', { name: 'Expand' }).click()
78
89
```
···
102
113
```js
103
114
import { render } from 'vitest-browser-vue'
104
115
105
-
const { locator } = render(NumberDisplay, {
116
+
const { locator } = await render(NumberDisplay, {
106
117
props: { number: 2 }
107
118
})
108
119
···
125
136
#### rerender
126
137
127
138
```ts
128
-
function rerender(props: Partial<Props>): void
139
+
function rerender(props: Partial<Props>): void & PromiseLike<void>
129
140
```
130
141
142
+
Also records a `vue.rerender` trace mark in the [Trace View](/guide/browser/trace-view).
143
+
131
144
It is better if you test the component that's doing the prop updating to ensure that the props are being updated correctly to avoid relying on implementation details in your tests. That said, if you'd prefer to update the props of a rendered component in your test, this function can be used to update props of the rendered component.
145
+
146
+
::: warning
147
+
Synchronous usage of `rerender` is deprecated and will be removed in the next major version. Please always `await` the result.
148
+
:::
132
149
133
150
```js
134
151
import { render } from 'vitest-browser-vue'
135
152
136
-
const { rerender } = render(NumberDisplay, { props: { number: 1 } })
153
+
const { rerender } = await render(NumberDisplay, { props: { number: 1 } })
137
154
138
155
// re-render the same component with different props
139
-
rerender({ number: 2 })
156
+
await rerender({ number: 2 })
140
157
```
141
158
142
159
#### unmount
143
160
144
161
```ts
145
-
function unmount(): void
162
+
function unmount(): void & PromiseLike<void>
146
163
```
147
164
148
-
This will cause the rendered component to be unmounted. This is useful for testing what happens when your component is removed from the page (like testing that you don't leave event handlers hanging around causing memory leaks).
165
+
This will cause the rendered component to be unmounted. Also records a `vue.unmount` trace mark in the [Trace View](/guide/browser/trace-view). This is useful for testing what happens when your component is removed from the page (like testing that you don't leave event handlers hanging around causing memory leaks).
166
+
167
+
::: warning
168
+
Synchronous usage of `unmount` is deprecated and will be removed in the next major version. Please always `await` the result.
169
+
:::
149
170
150
171
#### emitted
151
172
···
182
203
},
183
204
})
184
205
185
-
const screen = render(Component)
206
+
const screen = await render(Component)
186
207
await expect.element(
187
208
screen.getByArticleTitle('Hello World')
188
209
).toBeVisible()