测试

在 Nuxt 3 中，我们有一个重写版本的 @nuxt/test-utils。我们支持 Vitest 和 Jest 作为测试运行器。

安装

yarn add --dev @nuxt/test-utils vitest

设置

在每个使用 @nuxt/test-utils 辅助方法的 describe 块中，你需要在开始之前设置测试上下文。

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

describe('我的测试', async () => {
  await setup({
    // 测试上下文选项
  })

  test('我的测试', () => {
    // ...
  })
})

在幕后，setup 在 beforeAll、beforeEach、afterEach 和 afterAll 中执行一系列任务，以正确设置 Nuxt 测试环境。

请参阅下面的选项以了解 setup 方法。

Nuxt 配置

• rootDir：Nuxt 应用所在目录的路径。
  • 类型：string
  • 默认值：'.'
• configFile：配置文件的名称。
  • 类型：string
  • 默认值：'nuxt.config'

时间设置

• setupTimeout：允许 setupTest 完成其工作的时间（可能包括构建或生成 Nuxt 应用程序的文件，取决于传递的选项）。
  • 类型：number
  • 默认值：60000

功能

• server：是否启动一个服务器来响应测试套件中的请求。
  • 类型：boolean
  • 默认值：true
• port：如果提供，将启动的测试服务器端口设置为该值。
  • 类型：number | undefined
  • 默认值：undefined
• build：是否运行单独的构建步骤。
  • 类型：boolean
  • 默认值：true（如果 browser 或 server 被禁用，则为 false）
• browser：在幕后，Nuxt 测试工具使用 playwright 进行浏览器测试。如果设置了此选项，将会启动一个浏览器，并且可以在后续的测试套件中进行控制。
  • 类型：boolean
  • 默认值：false
• browserOptions：
  • 类型：具有以下属性的 object
    • type：要启动的浏览器类型，可以是 chromium、firefox 或 webkit
    • launch：在启动浏览器时将传递给 playwright 的选项对象。参见完整的 API 参考。
• runner：指定测试套件的运行器。目前推荐使用 Vitest。
  • 类型：'vitest' | 'jest'
  • 默认值：'vitest'

API

$fetch(url)

获取服务器渲染页面的 HTML。

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

const html = await $fetch('/')

fetch(url)

获取服务器渲染页面的响应。

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

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

url(path)

获取给定页面的完整 URL（包括测试服务器运行的端口）。

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

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

在浏览器中进行测试