测试你的模块
学习如何使用单元测试、集成测试和端到端测试来测试你的 Nuxt 模块。
测试有助于确保你的模块在各种配置下按预期工作。本节将介绍如何对你的模块进行各种类型的测试。
编写单元测试
编写端到端测试
Nuxt Test Utils 是帮助你用端到端方式测试模块的首选库。下面是推荐的工作流程：
- 在
test/fixtures/*内创建一个 Nuxt 应用，作为“测试夹具”（fixture） - 在测试文件中使用该夹具来设置 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 包。然后在测试项目中，将你的模块作为依赖添加到 package.json，格式如下："my-module": "file:/path/to/tarball.tgz"。
之后，你就可以像引用常规项目依赖一样引用 my-module 了。