리포터
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',
},
});이 예제는 별도의 JSON 및 XML 보고서를 생성하고, 자세한 보고서를 터미널에 출력합니다.
내장 리포터
기본 리포터
기본 설정 (리포터 미지정) 시, 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 리포터는 실행된 테스트 파일과 전체 모음 완료 후의 결과 요약을 표시합니다. 개별 테스트는 실패하지 않는 한 보고서에 포함되지 않습니다.
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)상세 리포터
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 리포터는 실행된 모든 테스트를 표시하며, 최소한의 출력을 제공합니다. 완료된 각 테스트마다 점(.) 하나를 출력합니다. 세부 정보는 실패한 테스트에 대해서만 제공되며, 모음에 대한 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 플랫 리포터
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.00ms멈춤 프로세스 리포터
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에 게시된 타사 사용자 정의 리포터는 리포터 옵션에 패키지 이름을 지정하여 사용할 수 있습니다.
npx vitest --reporter=some-published-vitest-reporterexport default defineConfig({
test: {
reporters: ['some-published-vitest-reporter'],
},
});또한 사용자 정의 리포터를 직접 정의하고, 파일 경로를 지정하여 사용할 수도 있습니다.
npx vitest --reporter=./path/to/reporter.ts사용자 정의 리포터는 Reporter 인터페이스를 구현해야 합니다.