测试 Testing

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

安装

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

配置

在您利用“@nuxt/test-utils”辅助方法的每个“描述”块中，您需要在开始之前设置测试上下文。

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

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

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

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

选项

Nuxt配置

rootDir

包含要测试的 Nuxt 应用程序的目录路径。

• Type: string
• Default: '.'

configFile

配置文件的名称。

• Type: string
• Default: 'nuxt.config'

设置时间

setupTimeout

允许 setupTest 完成其工作的时间量(以毫秒为单位)(这可能包括为 Nuxt 应用程序构建或生成文件，具体取决于传递的选项)。

• Type: number
• Default: 60000

开启的功能

server

是否启动服务器以响应测试套件中的请求。

• Type: boolean
• Default: true

build

是否运行单独的构建步骤。

• Type: boolean
• Default: true (false if browser or server is disabled)

browser

在幕后，Nuxt 测试实用程序使用 playwright 进行浏览器测试。
如果设置了这个选项，将启动一个浏览器，并可以在后续的测试套件中进行控制。
可以在 此处 找到更多信息。

• Type: boolean
• Default: false

browserOptions

• 类型：具有以下属性的 object
  • type：要启动的浏览器类型 - chromium、firefox 或 webkit
  • 启动：启动浏览器时将传递给编剧的选项的“对象”。 请参阅 完整 API 参考。

runner

指定测试套件的运行器。 目前推荐使用Vitest。

• Type: 'vitest' | 'jest'
• Default: 'vitest'

APIs

用于渲染测试的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'

在浏览器中测试