Vitest UI

由 Vite 驱动，Vitest 在运行测试时底层也有一个开发服务器。这使得 Vitest 能够提供一个漂亮的 UI 来查看和交互你的测试。Vitest UI 是可选的，所以你需要通过以下方式安装它：

bash

npm i -D @vitest/ui

然后你可以通过传递 --ui 标志来启动带 UI 的测试：

bash

vitest --ui

然后你可以在 http://localhost:51204/__vitest__/ 访问 Vitest UI

TIP

Vitest UI 访问受保护。如果直接 URL 显示错误，请使用 Vitest 在终端中打印的令牌打开该 URL，例如 http://localhost:51204/__vitest__/?token=...。

WARNING

UI 是交互式的，需要运行中的 Vite 服务器，所以确保以 watch 模式运行 Vitest（默认模式）。或者，你可以通过在配置的 reporters 选项中指定 html 来生成一个看起来与 Vitest UI 完全相同的静态 HTML 报告。

UI 也可以用作报告器。在 Vitest 配置中使用 'html' 报告器来生成 HTML 输出并预览测试结果：

vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    reporters: ['html'],
  },
})

你可以在 Vitest UI 中查看覆盖率报告：详见 Vitest UI 覆盖率。

WARNING

如果你仍然希望在终端中实时查看测试运行情况，请将 configDefaults.reporters 添加到 reporters 选项中：['html', ...configDefaults.reporters]。

TIP

要预览 HTML 报告，你可以使用 vite preview 命令：

npx vite preview --outDir .vitest

你可以使用 HTML 报告器的 outputDir 选项配置输出位置。它指向报告产物根目录，报告入口会写入到 <outputDir>/index.html。默认值是 .vitest，即共享的 Vitest 产物目录。

如果你需要一个可移植的报告，可以作为单个文件打开或共享，请参阅 HTML 报告器文档中的 singleFile。

TIP

要从 CI（例如 GitHub Actions）查看 HTML 报告，请将输出目录作为工件上传：

yaml

- uses: actions/upload-artifact@v7
  id: upload-report
  with:
    name: vitest-report
    path: .vitest/

- name: Viewer link in summary
  run: echo "[查看 HTML 报告](https://viewer.vitest.dev/?url=${{ steps.upload-report.outputs.artifact-url }})" >> $GITHUB_STEP_SUMMARY

这会在作业摘要中添加一个链接。点击它即可在浏览器中直接使用 Vitest Viewer 打开报告。你也可以手动下载工件并解压，然后像上面一样在本地运行 vite preview。

当你使用 singleFile: true 时，你可以将报告作为单个文件上传，并通过 archive: false 选项让 GitHub artifacts 直接可查看：

yaml

- uses: actions/upload-artifact@v7
  with:
    path: .vitest/index.html
    archive: false

模块图

模块图标签页显示所选测试文件的模块图。

INFO

所有提供的图片均使用 Zammad 仓库作为示例。

如果模块超过 50 个，模块图仅显示图的前两级以减少视觉混乱。你可以随时点击 "显示完整图" 图标来预览完整图。

WARNING

请注意，如果你的图太大，节点位置稳定下来可能需要一些时间。

你可以随时通过点击 "重置" 恢复入口模块图。要展开模块图，右键单击或按住 Shift 同时点击你感兴趣的节点。它将显示与所选节点相关的所有节点。

默认情况下，Vitest 不显示来自 node_modules 的模块。通常，这些模块是被外部化的。你可以通过取消选中 "隐藏 node_modules" 来启用它们。

模块信息

通过左键点击模块节点，你可以打开模块信息视图。

此视图分为两部分。顶部显示完整的模块 ID 和一些关于模块的诊断信息。如果启用了 experimental.fsModuleCache，将会有 "cached" 或 "not cached" 徽章。在右侧你可以看到时间诊断：

自身时间 (Self Time)：导入模块所花费的时间，不包括静态导入。
总时间 (Total Time)：导入模块所花费的时间，包括静态导入。请注意，这不包括当前模块的 transform 时间。
转换 (Transform)：转换模块所花费的时间。

如果你通过点击导入打开此视图，你还会在开头看到一个 "Back" 按钮，它将带你回到上一个模块。

底部部分取决于模块类型。如果模块是外部的，你只会看到该文件的源代码。你将无法进一步遍历模块图，也不会看到导入静态导入花费了多长时间。

如果模块是内联的，你将看到另外三个窗口：

源代码 (Source)：模块未更改的源代码
转换后 (Transformed)：Vitest 使用 Vite 的 module runner 执行的转换后的代码
源代码映射 (Source Map (v3))：源代码映射

"Source" 窗口中的所有静态导入显示当前模块评估它们所花费的总时间。如果导入已经在模块图中被评估过，它将显示 0ms，因为那时它已被缓存。

如果模块加载时间超过 danger 阈值（默认：500ms），时间将显示为红色。如果模块加载时间超过 warn 阈值（默认：100ms），时间将显示为橙色。

你可以点击导入源跳转到该模块并进一步遍历图（注意下方的 ./support/assertions/index.ts）。

WARNING

请注意，仅类型导入不在运行时执行，也不显示总持续时间。它们也无法被打开。

如果另一个插件在转换期间注入模块导入，这些导入将以灰色显示在模块开头（例如，由 import.meta.glob 注入的模块）。它们也显示总时间并且可以进一步遍历。

TIP

如果你正在 Vitest 之上开发自定义集成，你可以使用 vitest.experimental_getSourceModuleDiagnostic 来检索此信息。

导入分解

反馈

请在 GitHub Discussion 中留下关于此功能的反馈。

模块图标签页还提供导入分解，列出加载时间最长的模块列表（默认前 10 个），按总时间排序。

你可以点击模块查看模块信息。如果模块是外部的，它将显示黄色（与模块图中的颜色相同）。

分解显示模块列表，包含自身时间、总时间以及相对于加载整个测试文件所花费时间的百分比。

如果至少有一个文件加载时间超过 danger 阈值（默认：500ms），"Show Import Breakdown" 图标将显示红色；如果至少有一个文件加载时间超过 warn 阈值（默认：100ms），它将显示橙色。

你可以使用 experimental.importDurations.limit 来控制显示的导入数量。

Vitest UI ​

模块图 ​

模块信息 ​

导入分解 ​

Vitest UI

模块图

模块信息

导入分解