Reporters

Vitest fournit plusieurs reporters intégrés pour afficher le résultat des tests dans différents formats, ainsi que la possibilité d’utiliser des reporters personnalisés. Vous pouvez sélectionner différents reporters soit en utilisant l’option de ligne de commande --reporter, soit en incluant une propriété reporters dans votre fichier de configuration. Si aucun reporter n’est spécifié, Vitest utilisera le reporter default comme décrit ci-dessous.

Utilisation des reporters via la ligne de commande :

npx vitest --reporter=verbose

Utilisation des reporters via vitest.config.ts :

/// &lt;reference types="vitest" /&gt;
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 aux reporters sont décrites dans les sections ci-dessous.

export default defineConfig({
  test: {
    reporters: [
      'default',
      ['junit', { suiteName: 'UI tests' }]
    ],
  },
})

Sortie du Reporter

Par défaut, les reporters de Vitest imprimeront leur sortie dans le terminal. Lors de l’utilisation des reporters json, html ou junit, vous pouvez écrire la sortie de vos tests dans un fichier en incluant une option de configuration outputFile option de configuration soit dans votre fichier de configuration Vite, soit via la CLI.

CLI
vitest.config.ts

npx vitest --reporter=json --outputFile=./test-output.json

export default defineConfig({
  test: {
    reporters: ['json'],
    outputFile: './test-output.json'
  },
})

Combinaison des Reporters

Vous pouvez utiliser plusieurs reporters simultanément pour imprimer vos résultats de test dans différents formats. Par exemple :

npx vitest --reporter=json --reporter=default

export default defineConfig({
  test: {
    reporters: ['json', 'default'],
    outputFile: './test-output.json'
  },
})

L’exemple ci-dessus imprimera à la fois les résultats des tests dans le terminal dans le style par défaut et les écrira en tant que JSON dans le fichier de sortie désigné.

Lors de l’utilisation de plusieurs reporters, il est également possible de désigner plusieurs fichiers de sortie, comme suit :

export default defineConfig({
  test: {
    reporters: ['junit', 'json', 'verbose'],
    outputFile: {
      junit: './junit-report.xml',
      json: './json-report.json',
    },
  },
})

Cet exemple écrira des rapports JSON et XML distincts tout en imprimant 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 affichera les résultats pour chaque suite de tests de manière hiérarchique au fur et à mesure de leur exécution, puis s’effondrera après qu’une suite réussisse. Lorsque tous les tests ont terminé de s’exécuter, la sortie finale du terminal affichera un résumé des résultats et des détails sur les tests échoués.

Exemple de sortie pour des tests en cours :

✓ __tests__/file1.test.ts (2) 725ms
✓ __tests__/file2.test.ts (5) 746ms
  ✓ second test file (2) 746ms
    ✓ 1 + 1 devrait être égal à 2
    ✓ 2 - 1 devrait être égal à 1

Sortie finale après la fin des tests :

✓ __tests__/file1.test.ts (2) 725ms
✓ __tests__/file2.test.ts (2) 746ms

 Fichiers de Test  2 réussis (2)
      Tests  4 réussis (4)
   Commencé à  12:34:32
   Durée  1.26s (transformation 35ms, configuration 1ms, collecte 90ms, tests 1.47s, environnement 0ms, préparation 267ms)

Reporter de Base

Le reporter basic affiche les fichiers de test qui ont été exécutés et un résumé des résultats après que l’ensemble de la suite a fini de s’exécuter. Les tests individuels ne sont pas inclus dans le rapport à moins qu’ils échouent.

CLI
vitest.config.ts

npx vitest --reporter=basic

export default defineConfig({
  test: {
    reporters: ['basic']
  },
})

Exemple de sortie utilisant le reporter de base :

✓ __tests__/file1.test.ts (2) 725ms
✓ __tests__/file2.test.ts (2) 746ms

 Fichiers de Test  2 réussis (2)
      Tests  4 réussis (4)
   Commencé à  12:34:32
   Durée  1.26s (transformation 35ms, configuration 1ms, collecte 90ms, tests 1.47s, environnement 0ms, préparation 267ms)

Reporter Détail

Suit la même structure hiérarchique que le reporter default, mais ne réduit pas les sous-arbres pour les suites de tests réussies. La sortie finale du terminal affiche tous les tests qui ont été exécutés, y compris ceux qui ont réussi.

CLI
vitest.config.ts

npx vitest --reporter=verbose

export default defineConfig({
  test: {
    reporters: ['verbose']
  },
})

Exemple de sortie finale du terminal pour une suite de tests réussie :

✓ __tests__/file1.test.ts (2) 725ms
   ✓ premier fichier de test (2) 725ms
     ✓ 2 + 2 devrait être égal à 4
     ✓ 4 - 2 devrait être égal à 2
✓ __tests__/file2.test.ts (2) 746ms
  ✓ second fichier de test (2) 746ms
    ✓ 1 + 1 devrait être égal à 2
    ✓ 2 - 1 devrait être égal à 1

 Fichiers de Test  2 réussis (2)
      Tests  4 réussis (4)
   Commencé à  12:34:32
   Durée  1.26s (transformation 35ms, configuration 1ms, collecte 90ms, tests 1.47s, environnement 0ms, préparation 267ms)

Reporter Point

Imprime un point unique pour chaque test terminé afin de fournir une sortie minimale tout en montrant tous les tests qui ont été exécutés. Les détails ne sont fournis que pour les tests échoués, accompagnés d’un résumé du reporter basic pour la suite.

CLI
vitest.config.ts

npx vitest --reporter=dot

export default defineConfig({
  test: {
    reporters: ['dot']
  },
})

Exemple de sortie terminal pour une suite de tests réussie :

....

 Fichiers de Test  2 réussis (2)
      Tests  4 réussis (4)
   Commencé à  12:34:32
   Durée  1.26s (transformation 35ms, configuration 1ms, collecte 90ms, tests 1.47s, environnement 0ms, préparation 267ms)

Reporter JUnit

Produit un rapport des résultats des tests au format XML JUnit. Peut être soit imprimé dans le terminal, soit écrit dans un fichier XML en utilisant l’option de configuration outputFile.

CLI
vitest.config.ts

npx vitest --reporter=junit

export default defineConfig({
  test: {
    reporters: ['junit']
  },
})

Exemple d’un rapport XML JUnit :

<?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="premier fichier de test &gt; 2 + 2 devrait être égal à 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="premier fichier de test &gt; 4 - 2 devrait être égal à 2" time="0">
        </testcase>
    </testsuite>
</testsuites>

Le XML produit contient des tags imbriqués testsuites et testcase. Vous pouvez utiliser les variables d’environnement VITEST_JUNIT_SUITE_NAME et VITEST_JUNIT_CLASSNAME pour configurer leurs attributs name et classname, respectivement. Ceux-ci peuvent également être personnalisés via les options reporters :

export default defineConfig({
  test: {
    reporters: [
      ['junit', { suiteName: 'nom de suite personnalisé', classname: 'nom-classe-personnalisé' }]
    ]
  },
})

Reporter JSON

Produits un rapport des résultats des tests au format JSON. Peut être soit imprimé dans le terminal, soit écrit dans un fichier en utilisant l’option de configuration outputFile.

CLI
vitest.config.ts

npx vitest --reporter=json

export default defineConfig({
  test: {
    reporters: ['json']
  },
})

Exemple d’un rapport 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": [
            "",
            "premier fichier de test"
          ],
          "fullName": " premier fichier de test 2 + 2 devrait être égal à 4",
          "status": "failed",
          "title": "2 + 2 devrait être égal à 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"
    }
  ]
}

Reporter HTML

Génère un fichier HTML pour visualiser les résultats des tests via une interface utilisateur interactive GUI. Après que le fichier a été généré, Vitest maintiendra un serveur de développement local en cours d’exécution et fournira un lien pour visualiser le rapport dans un navigateur.

Le fichier de sortie peut être spécifié en utilisant l’option de configuration outputFile. Si aucune option outputFile n’est fournie, un nouveau fichier HTML sera créé.

CLI
vitest.config.ts

npx vitest --reporter=html

export default defineConfig({
  test: {
    reporters: ['html']
  },
})

Reporter TAP

Produit un rapport suivant le Test Anything Protocol (TAP).

CLI
vitest.config.ts

npx vitest --reporter=tap

export default defineConfig({
  test: {
    reporters: ['tap']
  },
})

Exemple d’un rapport TAP :

TAP version 13
1..1
not ok 1 - __tests__/test-file-1.test.ts # time=14.00ms {
    1..1
    not ok 1 - premier fichier de test # time=13.00ms {
        1..2
        not ok 1 - 2 + 2 devrait être égal à 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 devrait être égal à 2 # time=1.00ms
    }
}

Reporter TAP Plat

Produit un rapport TAP plat. Comme le reporter tap, les résultats des tests sont formatés selon les normes TAP, mais les suites de tests sont formatées sous forme de liste plate plutôt qu’une hiérarchie imbriquée.

CLI
vitest.config.ts

npx vitest --reporter=tap-flat

export default defineConfig({
  test: {
    reporters: ['tap-flat']
  },
})

Exemple d’un rapport TAP plat :

TAP version 13
1..2
not ok 1 - __tests__/test-file-1.test.ts > premier fichier de test > 2 + 2 devrait être égal à 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 > premier fichier de test > 4 - 2 devrait être égal à 2 # time=0.00ms

Reporter de Processus Suspendu

Affiche une liste de processus suspendus, s’il y en a qui empêchent Vitest de se fermer en toute sécurité. Le reporter hanging-process ne montre pas lui-même les résultats des tests, mais peut être utilisé en conjonction avec un autre reporter pour surveiller les processus pendant que les tests s’exécutent. Utiliser ce reporter peut être gourmand en ressources, donc il doit généralement être réservé à des fins de débogage dans des situations où Vitest ne peut pas constamment quitter le processus.

CLI
vitest.config.ts

npx vitest --reporter=hanging-process

export default defineConfig({
  test: {
    reporters: ['hanging-process']
  },
})

Reporter GitHub Actions

Produit des commandes de workflow pour fournir des annotations pour les échecs de tests. Ce reporter est activé automatiquement avec un reporter default lorsque process.env.GITHUB_ACTIONS === 'true'.

Si vous configurez des reporters non par défaut, vous devez explicitement ajouter github-actions.

export default defineConfig({
  test: {
    reporters: process.env.GITHUB_ACTIONS ? ['dot', 'github-actions'] : ['dot'],
  },
})

Reporter Blob

Stocke les résultats des tests sur la machine afin qu’ils puissent être fusionnés ultérieurement en utilisant la commande --merge-reports. Par défaut, stocke tous les résultats dans le dossier .vitest-reports, mais peut être remplacé par des drapeaux --outputFile ou --outputFile.blob.

npx vitest --reporter=blob --outputFile=reports/blob-1.json

Nous recommandons d’utiliser ce reporter si vous exécutez Vitest sur différentes machines avec le drapeau --shard. Tous les rapports blob peuvent être fusionnés dans n’importe quel rapport en utilisant la commande --merge-reports à la fin de votre pipeline CI :

npx vitest --merge-reports=reports --reporter=json --reporter=default

Reporters Personnalisés

Vous pouvez utiliser des reporters personnalisés tiers installés depuis NPM en spécifiant leur nom de package dans l’option des reporters :

CLI
vitest.config.ts

npx vitest --reporter=some-published-vitest-reporter

export 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 leur chemin de fichier :

npx vitest --reporter=./path/to/reporter.ts

Les reporters personnalisés doivent implémenter l’interface Reporter.