Skip to content

Commit 8c154c0

Browse files
hi-ogawacodex
andauthored
docs: update vitest-browser-vue/svelte async render (#10441)
Co-authored-by: Codex <noreply@openai.com>
1 parent f310abe commit 8c154c0

5 files changed

Lines changed: 11 additions & 41 deletions

File tree

docs/api/browser/svelte.md

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,11 @@ export function render<C extends Component>(
3939
Component: ComponentImport<C>,
4040
options?: ComponentOptions<C>,
4141
renderOptions?: SetupOptions
42-
): RenderResult<C> & PromiseLike<RenderResult<C>>
42+
): Promise<RenderResult<C>>
4343
```
4444

4545
The `render` function records a `svelte.render` trace mark, visible in the [Trace View](/guide/browser/trace-view).
4646

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-
:::
55-
5647
### Options
5748

5849
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:
@@ -174,10 +165,6 @@ function unmount(): Promise<void>
174165

175166
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).
176167

177-
::: warning
178-
Synchronous usage of `unmount` is deprecated and will be removed in the next major version. Please always `await` the result.
179-
:::
180-
181168
```ts
182169
import { render } from 'vitest-browser-svelte'
183170

docs/api/browser/vue.md

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -40,20 +40,11 @@ The package exposes two entry points: `vitest-browser-vue` and `vitest-browser-v
4040
export function render(
4141
component: Component,
4242
options?: ComponentRenderOptions,
43-
): RenderResult & PromiseLike<RenderResult>
43+
): Promise<RenderResult>
4444
```
4545

4646
The `render` function records a `vue.render` trace mark, visible in the [Trace View](/guide/browser/trace-view).
4747

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-
:::
56-
5748
### Options
5849

5950
The `render` function supports all [`mount` options](https://test-utils.vuejs.org/api/#mount) from `@vue/test-utils` (except `attachTo` - use `container` instead). In addition to them, there are also `container` and `baseElement`.
@@ -136,17 +127,13 @@ This method is a shortcut for `console.log(prettyDOM(baseElement))`. It will pri
136127
#### rerender
137128

138129
```ts
139-
function rerender(props: Partial<Props>): void & PromiseLike<void>
130+
function rerender(props: Partial<Props>): Promise<void>
140131
```
141132

142133
Also records a `vue.rerender` trace mark in the [Trace View](/guide/browser/trace-view).
143134

144135
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.
145136

146-
::: warning
147-
Synchronous usage of `rerender` is deprecated and will be removed in the next major version. Please always `await` the result.
148-
:::
149-
150137
```js
151138
import { render } from 'vitest-browser-vue'
152139
@@ -159,15 +146,11 @@ await rerender({ number: 2 })
159146
#### unmount
160147

161148
```ts
162-
function unmount(): void & PromiseLike<void>
149+
function unmount(): Promise<void>
163150
```
164151

165152
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).
166153

167-
::: warning
168-
Synchronous usage of `unmount` is deprecated and will be removed in the next major version. Please always `await` the result.
169-
:::
170-
171154
#### emitted
172155

173156
```ts

docs/guide/browser/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ import { render } from 'vitest-browser-vue'
432432
import Component from './Component.vue'
433433

434434
test('properly handles v-model', async () => {
435-
const screen = render(Component)
435+
const screen = await render(Component)
436436

437437
// Asserts initial state.
438438
await expect.element(screen.getByText('Hi, my name is Alice')).toBeInTheDocument()
@@ -454,7 +454,7 @@ import { expect, test } from 'vitest'
454454
import Greeter from './greeter.svelte'
455455

456456
test('greeting appears on click', async () => {
457-
const screen = render(Greeter, { name: 'World' })
457+
const screen = await render(Greeter, { name: 'World' })
458458

459459
const button = screen.getByRole('button')
460460
await button.click()

packages/ui/client/test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ export { page } from 'vitest/browser'
1010
export const render = vi.defineHelper(<C>(
1111
component: C,
1212
options?: ComponentRenderOptions<C, any>,
13-
): PromiseLike<RenderResult<any>> => {
14-
return _render(component, {
13+
): Promise<RenderResult<any>> => {
14+
return Promise.resolve(_render(component, {
1515
...options,
1616
global: {
1717
directives: {
1818
tooltip: vTooltip,
1919
},
2020
},
21-
})
21+
}))
2222
})

packages/vitest/src/create/browser/examples.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ import { render } from 'vitest-browser-vue'
6868
import HelloWorld from './HelloWorld.vue'
6969
7070
test('renders name', async () => {
71-
const { getByText } = render(HelloWorld, {
71+
const { getByText } = await render(HelloWorld, {
7272
props: { name: 'Vitest' },
7373
})
7474
await expect.element(getByText('Hello Vitest!')).toBeInTheDocument()
@@ -98,7 +98,7 @@ import { render } from 'vitest-browser-svelte'
9898
import HelloWorld from './HelloWorld.svelte'
9999
100100
test('renders name', async () => {
101-
const { getByText } = render(HelloWorld, { name: 'Vitest' })
101+
const { getByText } = await render(HelloWorld, { name: 'Vitest' })
102102
await expect.element(getByText('Hello Vitest!')).toBeInTheDocument()
103103
})
104104
`,

0 commit comments

Comments
 (0)