報告器
Vitest 提供多種內建報告器,可將測試結果以不同格式呈現,並支援使用自訂報告器。您可以透過 --reporter
命令列選項,或在設定檔中設定 reporters
屬性來選擇不同的報告器。如果未指定報告器,Vitest 將使用下文所述的 default
報告器。
透過命令列選項使用報告器:
npx vitest --reporter=verbose
透過 vitest.config.ts
使用報告器:
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
reporters: ['verbose'],
},
});
某些報告器可透過傳遞額外選項進行設定。各報告器的專屬選項將在以下章節中說明。
export default defineConfig({
test: {
reporters: ['default', ['junit', { suiteName: 'UI tests' }]],
},
});
報告器輸出
預設情況下,Vitest 的報告器會將其輸出顯示在終端機。當使用 json
、html
或 junit
報告器時,您可以透過在 Vite 設定檔或 CLI 中設定 outputFile
設定選項,將測試輸出寫入檔案。
npx vitest --reporter=json --outputFile=./test-output.json
export default defineConfig({
test: {
reporters: ['json'],
outputFile: './test-output.json',
},
});
組合報告器
您可以同時使用多個報告器,以不同格式顯示測試結果。例如:
npx vitest --reporter=json --reporter=default
export default defineConfig({
test: {
reporters: ['json', 'default'],
outputFile: './test-output.json',
},
});
上述範例會將測試結果以預設樣式顯示在終端機,並將其以 JSON 格式寫入指定的輸出檔案。
當使用多個報告器時,也可以指定多個輸出檔案,範例如下:
export default defineConfig({
test: {
reporters: ['junit', 'json', 'verbose'],
outputFile: {
junit: './junit-report.xml',
json: './json-report.json',
},
},
});
此範例將分別寫入 JSON 和 XML 報告,並將詳細報告顯示在終端機。
內建報告器
預設報告器
預設情況下(即未指定報告器時),Vitest 會在底部顯示執行中測試的摘要及其狀態。一旦測試套件通過,其狀態將顯示在摘要上方。
您可以透過設定報告器來關閉摘要功能:
export default defineConfig({
test: {
reporters: [['default', { summary: false }]],
},
});
測試進行時的輸出範例:
✓ 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
測試完成後的最終輸出範例:
✓ 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
報告器。
npx vitest --reporter=basic
export default defineConfig({
test: {
reporters: ['basic'],
},
});
基本報告器的輸出範例:
✓ __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
報告器類似,您可以透過設定報告器來關閉摘要功能。
npx vitest --reporter=verbose
export default defineConfig({
test: {
reporters: [['verbose', { summary: false }]],
},
});
當 slowTestThreshold
預設為 300 時,測試進行中的輸出範例:
✓ __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
通過測試套件的最終輸出範例:
✓ __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
報告器摘要。
npx vitest --reporter=dot
export default defineConfig({
test: {
reporters: ['dot'],
},
});
通過測試套件的終端機輸出範例:
....
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 檔案。
npx vitest --reporter=junit
export default defineConfig({
test: {
reporters: ['junit'],
},
});
JUnit 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 > 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 > 4 - 2 should equal 2" time="0">
</testcase>
</testsuite>
</testsuites>
輸出的 XML 包含巢狀的 testsuites
和 testcase
標籤。這些也可以透過報告器選項 suiteName
和 classnameTemplate
進行設定。classnameTemplate
可以是模板字串或函式。
classnameTemplate
選項支援的預留位置為:
- filename
- filepath
export default defineConfig({
test: {
reporters: [
[
'junit',
{
suiteName: 'custom suite name',
classnameTemplate: 'filename:{filename} - filepath:{filepath}',
},
],
],
},
});
JSON 報告器
產生與 Jest 的 --json
選項相容的 JSON 格式測試結果報告。可以使用 outputFile
設定選項顯示在終端機或寫入檔案。
npx vitest --reporter=json
export default defineConfig({
test: {
reporters: ['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 檔案。
npx vitest --reporter=html
export default defineConfig({
test: {
reporters: ['html'],
},
});
TIP
此報告器需要安裝 @vitest/ui
套件。
TAP 報告器
輸出符合 Test Anything Protocol (TAP) 規範的報告。
npx vitest --reporter=tap
export default defineConfig({
test: {
reporters: ['tap'],
},
});
TAP 報告範例:
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 標準格式化,但測試套件會以平面列表而非巢狀結構呈現。
npx vitest --reporter=tap-flat
export default defineConfig({
test: {
reporters: ['tap-flat'],
},
});
TAP 平面報告範例:
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 無法正常退出程序時的除錯用途。
npx vitest --reporter=hanging-process
export default defineConfig({
test: {
reporters: ['hanging-process'],
},
});
Github Actions 報告器
輸出 工作流程命令,為測試失敗提供註解資訊。當 process.env.GITHUB_ACTIONS === 'true'
時,此報告器會與 default
報告器一同自動啟用。
如果您設定非預設報告器,則需要明確加入 github-actions
。
export default defineConfig({
test: {
reporters: process.env.GITHUB_ACTIONS ? ['dot', 'github-actions'] : ['dot'],
},
});
您可以使用 onWritePath
選項,自訂在 GitHub 註解命令格式中顯示的檔案路徑。這在容器化環境(例如 Docker)中運行 Vitest 時很有用,因為檔案路徑可能與 GitHub Actions 環境中的路徑不符。
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
參數覆蓋。
npx vitest --reporter=blob --outputFile=reports/blob-1.json
如果您在不同的機器上使用 --shard
參數運行 Vitest,建議使用此報告器。 所有 blob 報告都可以在 CI 流程結束時,使用 --merge-reports
命令合併到任何報告中:
npx vitest --merge-reports=reports --reporter=json --reporter=default
TIP
--reporter=blob
和 --merge-reports
在監視模式下均不支援。
自訂報告器
您可以透過在報告器選項中指定套件名稱,來使用從 NPM 安裝的第三方自訂報告器:
npx vitest --reporter=some-published-vitest-reporter
export default defineConfig({
test: {
reporters: ['some-published-vitest-reporter'],
},
});
此外,您可以定義自己的自訂報告器,並透過指定其檔案路徑來使用它們:
npx vitest --reporter=./path/to/reporter.ts
自訂報告器應實作 Reporter 介面。