Vitest UI

Vitest 基于 Vite，底层运行测试时内置了一个开发服务器。这使得 Vitest 能够提供一个美观的 UI 来查看和交互测试。Vitest UI 是可选的，因此需要通过以下方式安装：

bash

npm i -D @vitest/ui

然后，可以通过添加 --ui 参数来启动带有 UI 的测试：

bash

vitest --ui

之后，你可以通过 http://localhost: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 覆盖率。

WARNING

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

TIP

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

npx vite preview --outDir ./html

可以通过 outputFile 配置选项设置输出路径。需要在此指定 .html 路径。例如，./html/index.html 是默认值。

Vitest UI ​