Reporters
Vitest propose plusieurs reporters intégrés pour afficher les résultats des tests dans différents formats. Il est également possible d'utiliser des reporters personnalisés. Vous pouvez sélectionner les reporters souhaités en utilisant l'option de ligne de commande --reporter, ou en ajoutant une propriété reporters dans votre fichier de configuration. Si aucun reporter n'est spécifié, Vitest utilisera le reporter default, décrit ci-dessous.
Utilisation en ligne de commande :
npx vitest --reporter=verboseUtilisation des reporters via vitest.config.ts :
/// <reference types="vitest" />
import { defineConfig } from 'vite';
export default defineConfig({
test: {
reporters: ['verbose'],
},
});Certains reporters peuvent être personnalisés en leur passant des options supplémentaires. Les options spécifiques à chaque reporter sont décrites dans les sections ci-dessous.
TIP
Depuis Vitest v1.3.0
export default defineConfig({
test: {
reporters: ['default', ['junit', { suiteName: 'UI tests' }]],
},
});Sortie des reporters
Par défaut, les reporters de Vitest affichent leur sortie dans le terminal. Lorsque vous utilisez les reporters json, html ou junit, vous pouvez également enregistrer la sortie de vos tests dans un fichier en ajoutant une option outputFile de configuration soit dans votre fichier de configuration Vite, soit via l'interface de ligne de commande (CLI).
npx vitest --reporter=json --outputFile=./test-output.jsonexport default defineConfig({
test: {
reporters: ['json'],
outputFile: './test-output.json',
},
});Combinaison de reporters
Vous pouvez utiliser plusieurs reporters simultanément pour afficher les résultats de vos tests dans différents formats. Par exemple :
npx vitest --reporter=json --reporter=defaultexport default defineConfig({
test: {
reporters: ['json', 'default'],
outputFile: './test-output.json',
},
});L'exemple ci-dessus affichera les résultats des tests dans le terminal avec le style par défaut et les enregistrera au format JSON dans le fichier de sortie indiqué.
Lorsque vous utilisez plusieurs reporters, vous pouvez également spécifier différents fichiers de sortie pour chacun, comme suit :
export default defineConfig({
reporters: ['junit', 'json', 'verbose'],
outputFile: {
junit: './junit-report.xml',
json: './json-report.json',
},
});Cet exemple écrira des rapports JSON et XML distincts et affichera un rapport détaillé dans le terminal.
Reporters intégrés
Reporter par défaut
Par défaut (c'est-à-dire si aucun reporter n'est spécifié), Vitest affiche les résultats de chaque suite de tests de manière hiérarchique pendant leur exécution, puis les réduit une fois qu'une suite a réussi. Une fois tous les tests exécutés, la sortie finale du terminal affiche un résumé des résultats et les détails des tests ayant échoué.
Exemple de sortie pendant l'exécution des tests :
✓ __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 1Sortie finale une fois les tests terminés :
✓ __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)Reporter basique
Le reporter basic affiche les fichiers de test exécutés et un résumé des résultats une fois l'exécution de la suite terminée. Les tests individuels ne sont pas inclus dans le rapport, sauf s'ils échouent.
npx vitest --reporter=basicexport default defineConfig({
test: {
reporters: ['basic'],
},
});Exemple de sortie utilisant le reporter basique :
✓ __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)Reporter détaillé
Suit la même structure hiérarchique que le reporter default, mais ne réduit pas les sous-arbres des suites de tests réussies. La sortie finale du terminal affiche tous les tests exécutés, y compris ceux qui ont réussi.
npx vitest --reporter=verboseexport default defineConfig({
test: {
reporters: ['verbose'],
},
});Exemple de sortie finale du terminal pour une suite de tests réussie :
✓ __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)Reporter par points
Affiche un point pour chaque test terminé afin de fournir une sortie minimale tout en affichant tous les tests exécutés. Les détails ne sont fournis que pour les tests ayant échoué, ainsi que le résumé du reporter basic pour la suite de tests.
npx vitest --reporter=dotexport default defineConfig({
test: {
reporters: ['dot'],
},
});Exemple de sortie du terminal pour une suite de tests réussie :
....
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)Reporter JUnit
Génère un rapport des résultats des tests au format XML JUnit, qui peut être affiché dans le terminal ou enregistré dans un fichier XML à l'aide de l'option de configuration outputFile.
npx vitest --reporter=junitexport default defineConfig({
test: {
reporters: ['junit'],
},
});Exemple de rapport 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>Le XML généré contient des balises testsuites et testcase imbriquées. Vous pouvez utiliser les variables d'environnement VITEST_JUNIT_SUITE_NAME et VITEST_JUNIT_CLASSNAME pour configurer leurs attributs name et classname, respectivement. Ces attributs peuvent également être personnalisés via les options du reporter :
export default defineConfig({
test: {
reporters: [
[
'junit',
{ suiteName: 'custom suite name', classname: 'custom-classname' },
],
],
},
});Reporter JSON
Génère un rapport des résultats des tests au format JSON, qui peut être affiché dans le terminal ou enregistré dans un fichier à l'aide de l'option de configuration outputFile.
npx vitest --reporter=jsonexport default defineConfig({
test: {
reporters: ['json'],
},
});Exemple de rapport 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"
}
]
}Reporter HTML
Génère un fichier HTML pour afficher les résultats des tests via une interface graphique (GUI) interactive GUI. Une fois le fichier généré, Vitest maintient un serveur de développement local en cours d'exécution et fournit un lien permettant d'afficher le rapport dans un navigateur.
Vous pouvez spécifier le fichier de sortie à l'aide de l'option de configuration outputFile. Si aucune option outputFile n'est fournie, un nouveau fichier HTML est créé.
npx vitest --reporter=htmlexport default defineConfig({
test: {
reporters: ['html'],
},
});TIP
Ce reporter nécessite l'installation du package @vitest/ui.
Reporter TAP
Génère un rapport suivant le protocole Test Anything Protocol (TAP).
npx vitest --reporter=tapexport default defineConfig({
test: {
reporters: ['tap'],
},
});Exemple de rapport 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
}
}Reporter TAP Flat
Génère un rapport TAP flat. Comme le reporter tap, les résultats des tests sont formatés conformément aux normes TAP, mais les suites de tests sont formatées sous forme de liste plate plutôt que de hiérarchie imbriquée.
npx vitest --reporter=tap-flatexport default defineConfig({
test: {
reporters: ['tap-flat'],
},
});Exemple de rapport TAP flat :
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.00msReporter de processus en attente
Affiche une liste des processus en attente qui empêchent Vitest de se fermer en toute sécurité. Le reporter hanging-process n'affiche pas les résultats des tests, mais peut être utilisé avec un autre reporter pour surveiller les processus pendant l'exécution des tests. L'utilisation de ce reporter peut consommer beaucoup de ressources et doit donc généralement être réservée au débogage dans les situations où Vitest ne parvient pas à quitter le processus de manière cohérente.
npx vitest --reporter=hanging-processexport default defineConfig({
test: {
reporters: ['hanging-process'],
},
});Reporter Github Actions 1.3.0+
Émet des commandes de workflow pour fournir des annotations pour les échecs de test. Ce reporter est automatiquement activé avec un reporter default lorsque process.env.GITHUB_ACTIONS === 'true'.
Si vous configurez des reporters autres que ceux définis par défaut, vous devez ajouter explicitement github-actions.
export default defineConfig({
test: {
reporters: process.env.GITHUB_ACTIONS ? ['dot', 'github-actions'] : ['dot'],
},
});Reporters personnalisés
Vous pouvez utiliser des reporters personnalisés tiers installés depuis NPM en spécifiant le nom de leur paquet dans l'option des reporters :
npx vitest --reporter=some-published-vitest-reporterexport default defineConfig({
test: {
reporters: ['some-published-vitest-reporter'],
},
});De plus, vous pouvez définir vos propres reporters personnalisés et les utiliser en spécifiant le chemin d'accès à leur fichier :
npx vitest --reporter=./path/to/reporter.tsLes reporters personnalisés doivent implémenter l'interface Reporter.