End-to-End Testing with Vitest

Setup

In each describe block, call setup() before tests to initialize the Nuxt test environment:

import { describe, test } from 'vitest'
import { $fetch, setup } from '@nuxt/test-utils/e2e'

describe('My test', async () => {
  await setup({
    // test context options
  })

  test('my test', () => {
    // ...
  })
})

setup performs tasks in beforeAll, beforeEach, afterEach, and afterAll.

Setup Options

Nuxt Config

rootDir: Path to Nuxt app directory (default: '.')
configFile: Configuration file name (default: 'nuxt.config')

Timings

setupTimeout: Time in ms for setup to complete (default: 120000, 240000 on Windows)
teardownTimeout: Time in ms for teardown (default: 30000)

Features

build: Run a separate build step (default: true, false if browser/server disabled or host provided)
server: Launch a server for requests (default: true, false if host provided)
port: Fixed test server port (default: undefined, auto-assigned)
host: URL to test against instead of building a new server (useful for testing deployed apps)
browser: Launch a Playwright browser instance (default: false)
browserOptions:
- type: 'chromium' | 'firefox' | 'webkit'
- launch: Playwright launch options
runner: Test runner ('vitest' | 'jest' | 'cucumber', default: 'vitest')

API Helpers

`$fetch(url)`

Get the HTML of a server-rendered page:

import { $fetch } from '@nuxt/test-utils/e2e'

const html = await $fetch('/')

`fetch(url)`

Get the full response:

import { fetch } from '@nuxt/test-utils/e2e'

const res = await fetch('/')
const { body, headers } = res

`url(path)`

Get the full URL including the test server port:

import { url } from '@nuxt/test-utils/e2e'

const pageUrl = url('/page')
// 'http://localhost:6840/page'

`createPage(url)`

Create a Playwright browser page (requires browser: true in setup):

import { createPage } from '@nuxt/test-utils/e2e'

const page = await createPage('/page')
// Full Playwright Page API available

Target Host Example

Test against a running server instead of building:

import { createPage, setup } from '@nuxt/test-utils/e2e'
import { describe, expect, it } from 'vitest'

describe('login page', async () => {
  await setup({
    host: 'http://localhost:8787',
  })

  it('displays the email and password fields', async () => {
    const page = await createPage('/login')
    expect(await page.getByTestId('email').isVisible()).toBe(true)
    expect(await page.getByTestId('password').isVisible()).toBe(true)
  })
})

2.6 KiB Raw Blame History