Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 1 addition & 14 deletions docs/api/browser/svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,11 @@ export function render<C extends Component>(
Component: ComponentImport<C>,
options?: ComponentOptions<C>,
renderOptions?: SetupOptions
): RenderResult<C> & PromiseLike<RenderResult<C>>
): Promise<RenderResult<C>>
```

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

::: warning
Synchronous usage of `render` is deprecated and will be removed in the next major version. Please always `await` the result:

```ts
const screen = render(Component) // [!code --]
const screen = await render(Component) // [!code ++]
```
:::

### Options

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

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

::: warning
Synchronous usage of `unmount` is deprecated and will be removed in the next major version. Please always `await` the result.
:::

```ts
import { render } from 'vitest-browser-svelte'

Expand Down
23 changes: 3 additions & 20 deletions docs/api/browser/vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,20 +40,11 @@ The package exposes two entry points: `vitest-browser-vue` and `vitest-browser-v
export function render(
component: Component,
options?: ComponentRenderOptions,
): RenderResult & PromiseLike<RenderResult>
): Promise<RenderResult>
```

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

::: warning
Synchronous usage of `render` is deprecated and will be removed in the next major version. Please always `await` the result:

```ts
const screen = render(Component) // [!code --]
const screen = await render(Component) // [!code ++]
```
:::

### Options

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`.
Expand Down Expand Up @@ -136,17 +127,13 @@ This method is a shortcut for `console.log(prettyDOM(baseElement))`. It will pri
#### rerender

```ts
function rerender(props: Partial<Props>): void & PromiseLike<void>
function rerender(props: Partial<Props>): Promise<void>
```

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

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.

::: warning
Synchronous usage of `rerender` is deprecated and will be removed in the next major version. Please always `await` the result.
:::

```js
import { render } from 'vitest-browser-vue'

Expand All @@ -159,15 +146,11 @@ await rerender({ number: 2 })
#### unmount

```ts
function unmount(): void & PromiseLike<void>
function unmount(): Promise<void>
```

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

::: warning
Synchronous usage of `unmount` is deprecated and will be removed in the next major version. Please always `await` the result.
:::

#### emitted

```ts
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/browser/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -432,7 +432,7 @@ import { render } from 'vitest-browser-vue'
import Component from './Component.vue'

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

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

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

const button = screen.getByRole('button')
await button.click()
Expand Down
13 changes: 11 additions & 2 deletions packages/browser-webdriverio/src/webdriverio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -190,9 +190,18 @@ export class WebdriverBrowserProvider implements BrowserProvider {
const options = this.project.config.browser
const browser = this.browserName
if (browser !== 'safari' && options.headless) {
const [key, args] = headlessMap[browser]
const [key, defaultArgs] = headlessMap[browser]
const currentValues = (this.options?.capabilities as any)?.[key] || {}
const newArgs = [...(currentValues.args || []), ...args]
const currentArgs: string[] = currentValues.args || []

const hasEnableGpu = browser === 'chrome' && (currentArgs.includes('--enable-gpu') || currentArgs.includes('enable-gpu'))

const argsToAdd = hasEnableGpu
? defaultArgs.filter(arg => arg !== 'disable-gpu')
: defaultArgs

const newArgs = [...currentArgs, ...argsToAdd]

capabilities[key] = { ...currentValues, args: newArgs as any }
}

Expand Down
6 changes: 3 additions & 3 deletions packages/ui/client/test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export { page } from 'vitest/browser'
export const render = vi.defineHelper(<C>(
component: C,
options?: ComponentRenderOptions<C, any>,
): PromiseLike<RenderResult<any>> => {
return _render(component, {
): Promise<RenderResult<any>> => {
return Promise.resolve(_render(component, {
...options,
global: {
directives: {
tooltip: vTooltip,
},
},
})
}))
})
4 changes: 2 additions & 2 deletions packages/vitest/src/create/browser/examples.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ import { render } from 'vitest-browser-vue'
import HelloWorld from './HelloWorld.vue'

test('renders name', async () => {
const { getByText } = render(HelloWorld, {
const { getByText } = await render(HelloWorld, {
props: { name: 'Vitest' },
})
await expect.element(getByText('Hello Vitest!')).toBeInTheDocument()
Expand Down Expand Up @@ -98,7 +98,7 @@ import { render } from 'vitest-browser-svelte'
import HelloWorld from './HelloWorld.svelte'

test('renders name', async () => {
const { getByText } = render(HelloWorld, { name: 'Vitest' })
const { getByText } = await render(HelloWorld, { name: 'Vitest' })
await expect.element(getByText('Hello Vitest!')).toBeInTheDocument()
})
`,
Expand Down
Loading