Vitest UI

Vitest 由 Vite 提供能力，在运行测试时有一个开发服务器。这允许 Vitest 提供一个漂亮的 UI 界面来查看并与测试交互。Vitest 的 UI 界面是可选的，你可以通过以下安装：

bash

npm i -D @vitest/ui

接下来，你可以通过传入 --ui 参数来启动测试的 UI 界面：

bash

vitest --ui

最后，你可以访问 Vitest UI 界面，通过 http://localhost:51204/__vitest__/

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

// vitest.config.ts

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

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

WARNING

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

TIP

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

npx vite preview --outDir ./html

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

Vitest UI ​