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__/

WARNING

Vitest UI 是交互式的，需要 Vite 服务器保持运行。因此，请确保在 watch 模式下（默认设置）运行 Vitest。此外，你也可以通过在配置的 reporters 选项中指定 html 来生成一个外观完全相同的静态 HTML 报告。

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

import { defineConfig } from 'vitest/config';

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

你可以在 Vitest UI 中查看覆盖率报告。更多详细信息请参阅 Vitest UI 覆盖率。

WARNING

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

TIP

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

npx vite preview --outDir ./html

你可以使用 outputFile 配置选项来指定输出路径。你需要在该选项中指定 .html 文件的路径。例如，默认值为 ./html/index.html。

Vitest UI ​