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。

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

// vitest.config.ts

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

你可以在 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 ​