리포터
Vitest는 테스트 출력을 다양한 형식으로 표시하는 여러 내장 리포터와 사용자 정의 리포터 기능을 제공합니다. --reporter 명령줄 옵션을 사용하거나 구성 파일에 reporters 속성을 포함하여 다른 리포터를 선택할 수 있습니다. 리포터가 지정되지 않은 경우 Vitest는 아래에서 설명하는 default 리포터를 사용합니다.
명령줄을 통해 리포터 사용:
npx vitest --reporter=verbosevitest.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.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({
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=basicexport 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=verboseexport 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=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 태그가 포함되어 있습니다. 이 태그들은 리포터 옵션인 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=jsonexport 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 리포터
대화형 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 리포터
테스트 실패에 대한 주석을 제공하기 위해 워크플로우 명령을 생성합니다. 이 리포터는 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=defaultTIP
--reporter=blob과 --merge-reports는 모두 watch 모드에서 작동하지 않습니다.
사용자 정의 리포터
리포터 옵션에 패키지 이름을 지정하여 NPM에서 설치된 타사 사용자 정의 리포터를 사용할 수 있습니다.
npx vitest --reporter=some-published-vitest-reporterexport default defineConfig({
test: {
reporters: ['some-published-vitest-reporter'],
},
});또한, 자신만의 사용자 정의 리포터를 정의하고 파일 경로를 지정하여 사용할 수 있습니다.
npx vitest --reporter=./path/to/reporter.ts사용자 정의 리포터는 Reporter 인터페이스를 구현해야 합니다.