Vitest UI

Vitest 基于 Vite，在运行测试时也包含一个开发服务器。这使得 Vitest 可以提供一个美观的 UI 来查看和交互您的测试。Vitest UI 是可选的，因此您需要使用以下命令安装它：

bash

npm i -D @vitest/ui

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

bash

vitest --ui

然后，您可以在 https://127.0.0.1:51204/__vitest__/ 访问 Vitest UI。

从 Vitest 0.26.0 开始，UI 也可以用作报告器。在您的 Vitest 配置中使用 'html' 报告器以生成 HTML 输出并预览测试结果。

// vitest.config.ts

export default {
  test: {
    reporters: ['html']
  }
}

从 Vitest 0.31.0 开始，您可以在 Vitest UI 中查看覆盖率报告：查看 Vitest UI 覆盖率了解更多详情。

警告

如果您仍然想在终端中实时查看测试的运行情况，请不要忘记将 default 报告器添加到 reporters 选项中：['default', 'html']。

提示

要预览您的 HTML 报告，您可以使用 vite preview 命令

npx vite preview --outDir ./html

您可以使用 outputFile 配置选项来配置输出。您需要在那里指定 .html 路径。例如，./html/index.html 是默认值。

Vitest UI ​