レポーター
Vitest は、テスト結果をさまざまな形式で表示できる複数の組み込みレポーターと、カスタムレポーターを使用する機能を提供します。--reporter コマンドラインオプションを使用するか、設定ファイル の reporters プロパティで指定することで、レポーターを選択できます。レポーターが指定されていない場合、Vitest は後述する default レポーターを使用します。
コマンドラインでレポーターを指定する例:
npx vitest --reporter=verbosevitest.config.ts でレポーターを指定する例:
/// <reference types="vitest" />
import { defineConfig } from 'vite';
export default defineConfig({
test: {
reporters: ['verbose'],
},
});一部のレポーターは、オプションを追加することでカスタマイズできます。各レポーター固有のオプションについては、以下のセクションで説明します。
TIP
Vitest v1.3.0 以降
export default defineConfig({
test: {
reporters: ['default', ['junit', { suiteName: 'UI tests' }]],
},
});レポーター出力
デフォルトでは、Vitest のレポーターはターミナルに出力を表示します。json、html、または junit レポーターを使用する場合、Vite 設定ファイルまたは CLI で outputFile 設定オプション を指定することで、テスト結果をファイルに出力できます。
npx vitest --reporter=json --outputFile=./test-output.jsonexport default defineConfig({
test: {
reporters: ['json'],
outputFile: './test-output.json',
},
});レポーターの組み合わせ
複数のレポーターを組み合わせて、テスト結果をさまざまな形式で出力できます。例:
npx vitest --reporter=json --reporter=defaultexport default defineConfig({
test: {
reporters: ['json', 'default'],
outputFile: './test-output.json',
},
});上記の例では、テスト結果はターミナルにデフォルトのスタイルで出力され、JSON 形式で指定された出力ファイルに書き込まれます。
複数のレポーターを使用する場合、次のようにレポーターごとに異なる出力ファイルを指定することもできます。
export default defineConfig({
reporters: ['junit', 'json', 'verbose'],
outputFile: {
junit: './junit-report.xml',
json: './json-report.json',
},
});この例では、JUnit および JSON レポートがそれぞれ個別のファイルに書き込まれ、ターミナルには詳細なレポートが出力されます。
組み込みレポーター
デフォルトレポーター
デフォルトでは、Vitest は各テストスイートの結果を実行時に階層的に表示し、成功したスイートは折りたたみます。すべてのテストの実行が完了すると、最終的なターミナル出力に結果の概要と失敗したテストの詳細が表示されます。
テスト実行中の出力例:
✓ __tests__/file1.test.ts (2) 725ms
✓ __tests__/file2.test.ts (5) 746ms
✓ second test file (2) 746ms
✓ 1 + 1 should equal 2
✓ 2 - 1 should equal 1テスト完了後の最終出力:
✓ __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)basic レポーター
basic レポーターは、実行されたテストファイルと、スイート全体の実行が完了した後の結果の概要を表示します。個々のテストは、失敗した場合を除きレポートには含まれません。
npx vitest --reporter=basicexport default defineConfig({
test: {
reporters: ['basic'],
},
});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)verbose レポーター
verbose レポーターは、default レポーターと同じ階層構造に従いますが、合格したテストスイートのサブツリーを折りたたみません。最終的なターミナル出力には、合格したものを含む、実行されたすべてのテストが表示されます。
npx vitest --reporter=verboseexport default defineConfig({
test: {
reporters: ['verbose'],
},
});合格したテストスイートを含む最終的なターミナル出力の例:
✓ __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)dot レポーター
dot レポーターは、完了したテストごとに単一のドットを出力し、最小限の出力で実行されたすべてのテストを表示します。詳細情報は、失敗したテストと、スイートの概要 ( basic レポーターと同様) でのみ提供されます。
npx vitest --reporter=dotexport 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=junitexport 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 タグが含まれています。環境変数 VITEST_JUNIT_SUITE_NAME および VITEST_JUNIT_CLASSNAME を使用して、それぞれの name および classname 属性を設定できます。これらの属性は、レポーターオプションを介してカスタマイズすることもできます。
export default defineConfig({
test: {
reporters: [
[
'junit',
{ suiteName: 'custom suite name', classname: 'custom-classname' },
],
],
},
});JSON レポーター
テスト結果のレポートを JSON 形式で出力します。ターミナルに出力するか、outputFile 設定オプションを使用してファイルに書き込むことができます。
npx vitest --reporter=jsonexport default defineConfig({
test: {
reporters: ['json'],
},
});JSON レポートの例:
{
"numTotalTestSuites": 1,
"numPassedTestSuites": 0,
"numFailedTestSuites": 1,
"numPendingTestSuites": 0,
"numTotalTests": 1,
"numPassedTests": 0,
"numFailedTests": 1,
"numPendingTests": 0,
"numTodoTests": 0,
"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
}
}
],
"startTime": 1697737019787,
"endTime": 1697737019797,
"status": "failed",
"message": "",
"name": "/root-directory/__tests__/test-file-1.test.ts"
}
]
}HTML レポーター
インタラクティブな GUI を介してテスト結果を表示するための HTML ファイルを生成します。ファイルが生成されると、Vitest はローカル開発サーバーを起動し、ブラウザでレポートを表示するためのリンクを提供します。
出力ファイルは、outputFile 設定オプションを使用して指定できます。outputFile オプションが指定されていない場合は、新しい HTML ファイルが自動的に作成されます。
npx vitest --reporter=htmlexport default defineConfig({
test: {
reporters: ['html'],
},
});TIP
このレポーターを使用するには、@vitest/ui パッケージをインストールする必要があります。
TAP レポーター
Test Anything Protocol (TAP) に準拠したレポートを出力します。
npx vitest --reporter=tapexport 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 Flat レポーター
TAP フラットレポートを出力します。tap レポーターと同様に、テスト結果は TAP 標準に従ってフォーマットされますが、テストスイートはネストされた階層ではなく、フラットなリストとしてフォーマットされます。
npx vitest --reporter=tap-flatexport 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.00msHanging Process レポーター
Vitest が安全に終了するのを妨げているハングしているプロセスがある場合、そのリストを表示します。hanging-process レポーター自体はテスト結果を表示しませんが、テストの実行中にプロセスを監視するために別のレポーターと組み合わせて使用できます。このレポーターの使用はリソースを多く消費する可能性があるため、Vitest がプロセスを常に終了できない状況でのデバッグ時にのみ使用することを推奨します。
npx vitest --reporter=hanging-processexport default defineConfig({
test: {
reporters: ['hanging-process'],
},
});Github Actions レポーター 1.3.0+
テストの失敗に関するアノテーションを提供するため、ワークフローコマンド が出力されます。このレポーターは、process.env.GITHUB_ACTIONS === 'true' の場合、default レポーターで自動的に有効になります。
デフォルト以外のレポーターを設定する場合は、明示的に github-actions を追加する必要があります。
export default defineConfig({
test: {
reporters: process.env.GITHUB_ACTIONS ? ['dot', 'github-actions'] : ['dot'],
},
});カスタムレポーター
レポーターオプションに NPM パッケージ名を指定することで、NPM からインストールされたサードパーティ製のカスタムレポーターを使用できます。
npx vitest --reporter=some-published-vitest-reporterexport default defineConfig({
test: {
reporters: ['some-published-vitest-reporter'],
},
});さらに、独自の カスタムレポーター を定義し、ファイルパスを指定して使用することもできます。
npx vitest --reporter=./path/to/reporter.tsカスタムレポーターは、Reporter インターフェース を実装する必要があります。