Basic browser test example
```js
import { expect, test } from 'vitest'
import { page } from 'vitest/browser'
import { render } from './my-render-function.js'
test('properly handles form inputs', async () => {
render() // mount DOM elements
// Asserts initial state.
await expect.element(page.getByText('Hi, my name is Alice')).toBeInTheDocument()
// Get the input DOM node by querying the associated label.
const usernameInput = page.getByLabelText(/username/i)
// Type the name into the input. This already validates that the input
// is filled correctly, no need to check the value manually.
await usernameInput.fill('Bob')
await expect.element(page.getByText('Hi, my name is Bob')).toBeInTheDocument()
})
```
This example shows how to render DOM elements, make assertions using expect.element, query elements by text and label, and fill form inputs in browser tests.
Framework-specific render packages
Vitest provides official packages for rendering framework components: 'vitest-browser-vue' for Vue, 'vitest-browser-svelte' for Svelte, 'vitest-browser-react' for React, and 'vitest-browser-angular' for Angular. Community packages are also available for Lit, Preact, and Qwik.
DOM assertions with @testing-library/jest-dom
Vitest forks the '@testing-library/jest-dom' library to provide a wide range of DOM assertions out of the box. Assertions can be made using 'expect.element()' with various matchers like 'toBeInTheDocument()'.
User interaction in browser tests
User interactions like clicking elements or typing text can be performed using 'userEvent' from 'vitest/browser' or by calling methods directly on locators. For example, 'await userEvent.fill(page.getByLabelText(/username/i), 'Alice')' or 'await page.getByLabelText(/username/i).fill('Alice')'.
Vue component testing example
```ts
import { render } from 'vitest-browser-vue'
import Component from './Component.vue'
test('properly handles v-model', async () => {
const screen = await render(Component)
// Asserts initial state.
await expect.element(screen.getByText('Hi, my name is Alice')).toBeInTheDocument()
// Get the input DOM node by querying the associated label.
const usernameInput = screen.getByLabelText(/username/i)
// Type the name into the input.
await usernameInput.fill('Bob')
await expect.element(screen.getByText('Hi, my name is Bob')).toBeInTheDocument()
})
```
This example demonstrates how to render and test Vue components with v-model binding using vitest-browser-vue.
React component testing example
```tsx
import { render } from 'vitest-browser-react'
import Fetch from './fetch'
test('loads and displays greeting', async () => {
// Render a React element into the DOM
const screen = render(<Fetch url="/greeting" />)
await screen.getByText('Load Greeting').click()
// wait before throwing an error if it cannot find an element
const heading = screen.getByRole('heading')
// assert that the alert message is correct
await expect.element(heading).toHaveTextContent('hello there')
await expect.element(screen.getByRole('button')).toBeDisabled()
})
```
This example shows how to render React components, interact with elements like clicking buttons, query by role, and make assertions about text content and disabled state.
Svelte component testing example
```ts
import { render } from 'vitest-browser-svelte'
import { expect, test } from 'vitest'
import Greeter from './greeter.svelte'
test('greeting appears on click', async () => {
const screen = await render(Greeter, { name: 'World' })
const button = screen.getByRole('button')
await button.click()
const greeting = screen.getByText(/hello world/iu)
await expect.element(greeting).toBeInTheDocument()
})
```
This example demonstrates how to render Svelte components with props, interact with elements, and verify that elements appear in the DOM.
Lit component testing example
```ts
import { render } from 'vitest-browser-lit'
import { html } from 'lit'
import './greeter-button'
test('greeting appears on click', async () => {
const screen = render(html`<greeter-button name="World"></greeter-button>`)
const button = screen.getByRole('button')
await button.click()
const greeting = screen.getByText(/hello world/iu)
await expect.element(greeting).toBeInTheDocument()
})
```
This example shows how to render Lit components using html templates and test their behavior.
Preact component testing example
```tsx
import { render } from 'vitest-browser-preact'
import { createElement } from 'preact'
import Greeting from '.Greeting'
test('greeting appears on click', async () => {
const screen = render(<Greeting />)
const button = screen.getByRole('button')
await button.click()
const greeting = screen.getByText(/hello world/iu)
await expect.element(greeting).toBeInTheDocument()
})
```
This example demonstrates how to render Preact components using JSX syntax and test user interactions.
Qwik component testing example
```tsx
import { render } from 'vitest-browser-qwik'
import Greeting from './greeting'
test('greeting appears on click', async () => {
// renderSSR and renderHook are also available
const screen = render(<Greeting />)
const button = screen.getByRole('button')
await button.click()
const greeting = screen.getByText(/hello world/iu)
await expect.element(greeting).toBeInTheDocument()
})
```
This example shows how to render Qwik components. The vitest-browser-qwik package also provides renderSSR and renderHook functions.
Browser mode motivation and benefits
Vitest browser mode was developed to improve testing workflows by allowing developers to run tests in a native browser environment instead of simulated environments. Testing in a real browser achieves more accurate and reliable test results because simulated environments like jsdom and happy-dom only simulate browser behavior and may result in false positives or negatives. Browser-level testing gives developers more confidence that their application will work as intended in real-world scenarios.
Difference between simulated and real browser testing
Some testing frameworks like Jest and Vitest with jsdom simulate browser environments in Node.js, while others like WebdriverIO, Cypress, and Playwright run tests in real browsers or provide a browser engine. Simulated environments have simplified test setup and provided easy-to-use APIs suitable for many projects, but they only simulate browser behavior and may have discrepancies with actual browser environments.