Skip to content
Vitest 3
Main Navigation 指南 & API配置瀏覽器模式進階 API
3.2.0
2.1.9
1.6.1
0.34.6

繁體中文

English
简体中文
Español
Français
Русский
Português – Brasil
Deutsch
日本語
한국어
Italiano
Polski
Türkçe
čeština
magyar

繁體中文

English
简体中文
Español
Français
Русский
Português – Brasil
Deutsch
日本語
한국어
Italiano
Polski
Türkçe
čeština
magyar

外觀

Sidebar Navigation

簡介

為何選擇 Vitest

快速入門

功能特色

配置參考

API

測試 API 參考

模擬函式

Vi

expect

expectTypeOf

assert

assertType

指南

命令列介面

測試篩選

測試專案

報告器

程式碼覆蓋率

快照

模擬(Mocking)

平行化

型別測試

Vitest UI

內聯測試

測試上下文

測試註解

測試環境

擴展匹配器

IDE 整合

偵錯

常見錯誤

遷移指南

遷移到 Vitest 3.0

從 Jest 遷移

效能

測試效能分析

提升效能

瀏覽器模式

進階 API

與其他測試執行器的比較

本頁導覽

報告器 ​

Vitest 提供多種內建報告器,可將測試結果以不同格式呈現,並支援使用自訂報告器。您可以透過 --reporter 命令列選項,或在設定檔中設定 reporters 屬性來選擇不同的報告器。如果未指定報告器,Vitest 將使用下文所述的 default 報告器。

透過命令列選項使用報告器:

bash
npx vitest --reporter=verbose

透過 vitest.config.ts 使用報告器:

ts
import { defineConfig } from 'vitest/config';

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

某些報告器可透過傳遞額外選項進行設定。各報告器的專屬選項將在以下章節中說明。

ts
export default defineConfig({
  test: {
    reporters: ['default', ['junit', { suiteName: 'UI tests' }]],
  },
});

報告器輸出 ​

預設情況下,Vitest 的報告器會將其輸出顯示在終端機。當使用 json、html 或 junit 報告器時,您可以透過在 Vite 設定檔或 CLI 中設定 outputFile 設定選項,將測試輸出寫入檔案。

bash
npx vitest --reporter=json --outputFile=./test-output.json
ts
export default defineConfig({
  test: {
    reporters: ['json'],
    outputFile: './test-output.json',
  },
});

組合報告器 ​

您可以同時使用多個報告器,以不同格式顯示測試結果。例如:

bash
npx vitest --reporter=json --reporter=default
ts
export default defineConfig({
  test: {
    reporters: ['json', 'default'],
    outputFile: './test-output.json',
  },
});

上述範例會將測試結果以預設樣式顯示在終端機,並將其以 JSON 格式寫入指定的輸出檔案。

當使用多個報告器時,也可以指定多個輸出檔案,範例如下:

ts
export default defineConfig({
  test: {
    reporters: ['junit', 'json', 'verbose'],
    outputFile: {
      junit: './junit-report.xml',
      json: './json-report.json',
    },
  },
});

此範例將分別寫入 JSON 和 XML 報告,並將詳細報告顯示在終端機。

內建報告器 ​

預設報告器 ​

預設情況下(即未指定報告器時),Vitest 會在底部顯示執行中測試的摘要及其狀態。一旦測試套件通過,其狀態將顯示在摘要上方。

您可以透過設定報告器來關閉摘要功能:

ts
export default defineConfig({
  test: {
    reporters: [['default', { summary: false }]],
  },
});

測試進行時的輸出範例:

bash
 ✓ test/example-1.test.ts (5 tests | 1 skipped) 306ms
 ✓ test/example-2.test.ts (5 tests | 1 skipped) 307ms

 ❯ test/example-3.test.ts 3/5
 ❯ test/example-4.test.ts 1/5

 Test Files 2 passed (4)
      Tests 10 passed | 3 skipped (65)
   Start at 11:01:36
   Duration 2.00s

測試完成後的最終輸出範例:

bash
 ✓ test/example-1.test.ts (5 tests | 1 skipped) 306ms
 ✓ test/example-2.test.ts (5 tests | 1 skipped) 307ms
 ✓ test/example-3.test.ts (5 tests | 1 skipped) 307ms
 ✓ test/example-4.test.ts (5 tests | 1 skipped) 307ms

 Test Files  4 passed (4)
      Tests  16 passed | 4 skipped (20)
   Start at  12:34:32
   Duration  1.26s (transform 35ms, setup 1ms, collect 90ms, tests 1.47s, environment 0ms, prepare 267ms)

基本報告器 ​

basic 報告器等同於沒有 summary 的 default 報告器。

bash
npx vitest --reporter=basic
ts
export default defineConfig({
  test: {
    reporters: ['basic'],
  },
});

基本報告器的輸出範例:

bash
✓ __tests__/file1.test.ts (2) 725ms
✓ __tests__/file2.test.ts (2) 746ms

 Test Files  2 passed (2)
      Tests  4 passed (4)
   Start at  12:34:32
   Duration  1.26s (transform 35ms, setup 1ms, collect 90ms, tests 1.47s, environment 0ms, prepare 267ms)

詳細報告器 ​

詳細報告器與 default 報告器相同,但它也會在測試套件完成後顯示每個獨立的測試。它還會顯示目前執行中且耗時超過 slowTestThreshold 的測試。與 default 報告器類似,您可以透過設定報告器來關閉摘要功能。

bash
npx vitest --reporter=verbose
ts
export default defineConfig({
  test: {
    reporters: [['verbose', { summary: false }]],
  },
});

當 slowTestThreshold 預設為 300 時,測試進行中的輸出範例:

bash
 ✓ __tests__/example-1.test.ts (2) 725ms
   ✓ first test file (2) 725ms
     ✓ 2 + 2 should equal 4
     ✓ 4 - 2 should equal 2

 ❯ test/example-2.test.ts 3/5
   ↳ should run longer than three seconds 1.57s
 ❯ test/example-3.test.ts 1/5

 Test Files 2 passed (4)
      Tests 10 passed | 3 skipped (65)
   Start at 11:01:36
   Duration 2.00s

通過測試套件的最終輸出範例:

bash
✓ __tests__/file1.test.ts (2) 725ms
   ✓ first test file (2) 725ms
     ✓ 2 + 2 should equal 4
     ✓ 4 - 2 should equal 2
✓ __tests__/file2.test.ts (2) 746ms
  ✓ second test file (2) 746ms
    ✓ 1 + 1 should equal 2
    ✓ 2 - 1 should equal 1

 Test Files  2 passed (2)
      Tests  4 passed (4)
   Start at  12:34:32
   Duration  1.26s (transform 35ms, setup 1ms, collect 90ms, tests 1.47s, environment 0ms, prepare 267ms)

點式報告器 ​

為每個完成的測試顯示一個點,以提供最少的輸出,同時仍顯示所有已執行的測試。僅為失敗的測試提供詳細資訊,並附帶該測試套件的 basic 報告器摘要。

bash
npx vitest --reporter=dot
ts
export default defineConfig({
  test: {
    reporters: ['dot'],
  },
});

通過測試套件的終端機輸出範例:

bash
....

 Test Files  2 passed (2)
      Tests  4 passed (4)
   Start at  12:34:32
   Duration  1.26s (transform 35ms, setup 1ms, collect 90ms, tests 1.47s, environment 0ms, prepare 267ms)

JUnit 報告器 ​

以 JUnit XML 格式輸出測試結果報告。可以使用 outputFile 設定選項顯示在終端機或寫入 XML 檔案。

bash
npx vitest --reporter=junit
ts
export default defineConfig({
  test: {
    reporters: ['junit'],
  },
});

JUnit XML 報告範例:

xml
<?xml version="1.0" encoding="UTF-8" ?>
<testsuites name="vitest tests" tests="2" failures="1" errors="0" time="0.503">
    <testsuite name="__tests__/test-file-1.test.ts" timestamp="2023-10-19T17:41:58.580Z" hostname="My-Computer.local" tests="2" failures="1" errors="0" skipped="0" time="0.013">
        <testcase classname="__tests__/test-file-1.test.ts" name="first test file &gt; 2 + 2 should equal 4" time="0.01">
            <failure message="expected 5 to be 4 // Object.is equality" type="AssertionError">
AssertionError: expected 5 to be 4 // Object.is equality
 ❯ __tests__/test-file-1.test.ts:20:28
            </failure>
        </testcase>
        <testcase classname="__tests__/test-file-1.test.ts" name="first test file &gt; 4 - 2 should equal 2" time="0">
        </testcase>
    </testsuite>
</testsuites>

輸出的 XML 包含巢狀的 testsuites 和 testcase 標籤。這些也可以透過報告器選項 suiteName 和 classnameTemplate 進行設定。classnameTemplate 可以是模板字串或函式。

classnameTemplate 選項支援的預留位置為:

  • filename
  • filepath
ts
export default defineConfig({
  test: {
    reporters: [
      [
        'junit',
        {
          suiteName: 'custom suite name',
          classnameTemplate: 'filename:{filename} - filepath:{filepath}',
        },
      ],
    ],
  },
});

JSON 報告器 ​

產生與 Jest 的 --json 選項相容的 JSON 格式測試結果報告。可以使用 outputFile 設定選項顯示在終端機或寫入檔案。

bash
npx vitest --reporter=json
ts
export default defineConfig({
  test: {
    reporters: ['json'],
  },
});

JSON 報告範例:

json
{
  "numTotalTestSuites": 4,
  "numPassedTestSuites": 2,
  "numFailedTestSuites": 1,
  "numPendingTestSuites": 1,
  "numTotalTests": 4,
  "numPassedTests": 1,
  "numFailedTests": 1,
  "numPendingTests": 1,
  "numTodoTests": 1,
  "startTime": 1697737019307,
  "success": false,
  "testResults": [
    {
      "assertionResults": [
        {
          "ancestorTitles": ["", "first test file"],
          "fullName": " first test file 2 + 2 should equal 4",
          "status": "failed",
          "title": "2 + 2 should equal 4",
          "duration": 9,
          "failureMessages": ["expected 5 to be 4 // Object.is equality"],
          "location": {
            "line": 20,
            "column": 28
          },
          "meta": {}
        }
      ],
      "startTime": 1697737019787,
      "endTime": 1697737019797,
      "status": "failed",
      "message": "",
      "name": "/root-directory/__tests__/test-file-1.test.ts"
    }
  ],
  "coverageMap": {}
}

INFO

自 Vitest 3 起,如果啟用覆蓋率,JSON 報告器會在 coverageMap 中納入覆蓋率資訊。

HTML 報告器 ​

產生 HTML 檔案,透過互動式 GUI 檢視測試結果。檔案產生後,Vitest 將維持本機開發伺服器運行,並提供在瀏覽器中檢視報告的連結。

輸出檔案可以使用 outputFile 設定選項來指定。如果未提供 outputFile 選項,將建立一個新的 HTML 檔案。

bash
npx vitest --reporter=html
ts
export default defineConfig({
  test: {
    reporters: ['html'],
  },
});

TIP

此報告器需要安裝 @vitest/ui 套件。

TAP 報告器 ​

輸出符合 Test Anything Protocol (TAP) 規範的報告。

bash
npx vitest --reporter=tap
ts
export default defineConfig({
  test: {
    reporters: ['tap'],
  },
});

TAP 報告範例:

bash
TAP version 13
1..1
not ok 1 - __tests__/test-file-1.test.ts # time=14.00ms {
    1..1
    not ok 1 - first test file # time=13.00ms {
        1..2
        not ok 1 - 2 + 2 should equal 4 # time=11.00ms
            ---
            error:
                name: "AssertionError"
                message: "expected 5 to be 4 // Object.is equality"
            at: "/root-directory/__tests__/test-file-1.test.ts:20:28"
            actual: "5"
            expected: "4"
            ...
        ok 2 - 4 - 2 should equal 2 # time=1.00ms
    }
}

TAP 平面報告器 ​

輸出 TAP 平面報告。與 tap 報告器一樣,測試結果會依循 TAP 標準格式化,但測試套件會以平面列表而非巢狀結構呈現。

bash
npx vitest --reporter=tap-flat
ts
export default defineConfig({
  test: {
    reporters: ['tap-flat'],
  },
});

TAP 平面報告範例:

bash
TAP version 13
1..2
not ok 1 - __tests__/test-file-1.test.ts > first test file > 2 + 2 should equal 4 # time=11.00ms
    ---
    error:
        name: "AssertionError"
        message: "expected 5 to be 4 // Object.is equality"
    at: "/root-directory/__tests__/test-file-1.test.ts:20:28"
    actual: "5"
    expected: "4"
    ...
ok 2 - __tests__/test-file-1.test.ts > first test file > 4 - 2 should equal 2 # time=0.00ms

未結束程序報告器 ​

顯示未結束程序列表,若有任何程序阻礙 Vitest 安全退出,則會列出。hanging-process 報告器本身不顯示測試結果,但可以與其他報告器結合使用,以在測試執行期間監控程序。使用此報告器可能會消耗大量資源,因此通常應僅限於 Vitest 無法正常退出程序時的除錯用途。

bash
npx vitest --reporter=hanging-process
ts
export default defineConfig({
  test: {
    reporters: ['hanging-process'],
  },
});

Github Actions 報告器 ​

輸出 工作流程命令,為測試失敗提供註解資訊。當 process.env.GITHUB_ACTIONS === 'true' 時,此報告器會與 default 報告器一同自動啟用。

Github ActionsGithub Actions

如果您設定非預設報告器,則需要明確加入 github-actions。

ts
export default defineConfig({
  test: {
    reporters: process.env.GITHUB_ACTIONS ? ['dot', 'github-actions'] : ['dot'],
  },
});

您可以使用 onWritePath 選項,自訂在 GitHub 註解命令格式中顯示的檔案路徑。這在容器化環境(例如 Docker)中運行 Vitest 時很有用,因為檔案路徑可能與 GitHub Actions 環境中的路徑不符。

ts
export default defineConfig({
  test: {
    reporters: process.env.GITHUB_ACTIONS
      ? [
          'default',
          [
            'github-actions',
            {
              onWritePath(path) {
                return path.replace(
                  /^\/app\//,
                  `${process.env.GITHUB_WORKSPACE}/`
                );
              },
            },
          ],
        ]
      : ['default'],
  },
});

Blob 報告器 ​

將測試結果儲存於本機,以便稍後使用 --merge-reports 命令合併。 預設情況下,所有結果都儲存於 .vitest-reports 資料夾中,但可以使用 --outputFile 或 --outputFile.blob 參數覆蓋。

bash
npx vitest --reporter=blob --outputFile=reports/blob-1.json

如果您在不同的機器上使用 --shard 參數運行 Vitest,建議使用此報告器。 所有 blob 報告都可以在 CI 流程結束時,使用 --merge-reports 命令合併到任何報告中:

bash
npx vitest --merge-reports=reports --reporter=json --reporter=default

TIP

--reporter=blob 和 --merge-reports 在監視模式下均不支援。

自訂報告器 ​

您可以透過在報告器選項中指定套件名稱,來使用從 NPM 安裝的第三方自訂報告器:

bash
npx vitest --reporter=some-published-vitest-reporter
ts
export default defineConfig({
  test: {
    reporters: ['some-published-vitest-reporter'],
  },
});

此外,您可以定義自己的自訂報告器,並透過指定其檔案路徑來使用它們:

bash
npx vitest --reporter=./path/to/reporter.ts

自訂報告器應實作 Reporter 介面。

Pager
上一頁測試專案
下一頁程式碼覆蓋率

以 MIT 授權條款 發布。

版權所有 (c) 2021-Present Vitest Team

https://vitest.dev/guide/reporters

以 MIT 授權條款 發布。

版權所有 (c) 2021-Present Vitest Team