测试你的模块 · Anleitung für Autorinnen und Autoren von Nuxt-Modulen v4

Geprüfte Übersetzung ·0 % geprüft

测试有助于确保你的模块在各种设置下按预期工作。在本节中，你将了解到如何对你的模块执行各种类型的测试。

编写单元测试

我们仍在讨论和探索如何简化 Nuxt 模块的单元测试和集成测试。

查看此 RFC 参与讨论。

编写端到端测试（E2E）

Nuxt Test Utils 是帮助你以端到端方式测试模块的首选库。以下是使用它的工作流程：

在 test/fixtures/* 目录下创建一个 Nuxt 应用，作为测试“夹具”
在测试文件中使用此夹具配置 Nuxt
使用 @nuxt/test-utils 提供的工具与夹具交互（例如，获取页面）
进行与此夹具相关的验证（例如，“HTML 包含...”）
重复上述步骤

在实际操作中，夹具示例：

test/fixtures/ssr/nuxt.config.ts

// 1. 创建一个用作“夹具”的 Nuxt 应用
import MyModule from '../../../src/module'

export default defineNuxtConfig({
  ssr: true,
  modules: [
    MyModule,
  ],
})

以及对应的测试示例：

test/rendering.ts

import { describe, expect, it } from 'vitest'
import { fileURLToPath } from 'node:url'
import { $fetch, setup } from '@nuxt/test-utils/e2e'

describe('ssr', async () => {
  // 2. 在测试文件中使用此夹具配置 Nuxt
  await setup({
    rootDir: fileURLToPath(new URL('./fixtures/ssr', import.meta.url)),
  })

  it('渲染索引页', async () => {
    // 3. 使用 `@nuxt/test-utils` 提供的工具与夹具交互
    const html = await $fetch('/')

    // 4. 进行与此夹具相关的验证
    expect(html).toContain('<div>ssr</div>')
  })
})

// 5. 重复
describe('csr', async () => { /* ... */ })

此类工作流程的示例可见于模块起步模板。

手动测试

在开发模块时，使用一个 Nuxt 应用游乐场来测试模块非常有用。模块起步模板已集成了一个游乐场，用于此目的。

你也可以在本地使用其他 Nuxt 应用（不属于你的模块仓库的应用）测试你的模块。为此，你可以使用 npm pack 命令，或相应的包管理器命令，从你的模块创建一个 tar 包。然后在测试项目中，将你的模块以 "my-module": "file:/path/to/tarball.tgz" 的形式添加到 package.json 的依赖包中。

之后，你就能像在普通项目中一样引用 my-module 了。