Reporter

Vitest offre diversi reporter integrati per visualizzare l'output dei test in vari formati, e permette anche di utilizzare reporter personalizzati. È possibile selezionare i reporter tramite l'opzione da riga di comando --reporter, oppure includendo una proprietà reporters nel file di configurazione. Se non specificato, Vitest utilizzerà il reporter default descritto di seguito.

Utilizzo dei reporter da riga di comando:

bash

npx vitest --reporter=verbose

Utilizzo dei reporter tramite vitest.config.ts:

import { defineConfig } from 'vitest/config';

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

Alcuni reporter possono essere personalizzati con opzioni aggiuntive. Le opzioni specifiche di ciascun reporter sono descritte nelle sezioni seguenti.

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

Output del Reporter

Per impostazione predefinita, i reporter di Vitest stampano l'output nel terminale. Quando si utilizzano i reporter json, html o junit, è possibile scrivere l'output dei test in un file specificando l'opzione di configurazione outputFile nel file di configurazione di Vite o tramite CLI.

CLIvitest.config.ts

bash

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

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

Combinazione di Reporter

È possibile utilizzare più reporter contemporaneamente per visualizzare i risultati dei test in formati diversi. Per esempio:

bash

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

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

L'esempio precedente stamperà i risultati dei test nel terminale con lo stile predefinito e li scriverà anche in formato JSON nel file di output specificato.

Quando si utilizzano più reporter, è anche possibile specificare file di output diversi per ciascuno, come segue:

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

Questo esempio scrive report JSON e XML separati e stampa un report dettagliato nel terminale.

Reporter Integrati

Reporter Predefinito

Di default, Vitest visualizza i risultati di ogni suite di test in modo gerarchico durante l'esecuzione e li comprime dopo che una suite è stata superata. Al termine dell'esecuzione di tutti i test, l'output finale del terminale visualizzerà un riepilogo dei risultati e i dettagli di eventuali test falliti.

Esempio di output durante l'esecuzione dei test:

bash

✓ __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

Output finale dopo il completamento dei test:

bash

✓ __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 Base

Il reporter basic mostra i file di test eseguiti e un riepilogo dei risultati al termine dell'esecuzione della suite. I singoli test non sono inclusi nel report a meno che non falliscano.

CLIvitest.config.ts

bash

npx vitest --reporter=basic

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

Esempio di output con il reporter base:

bash

✓ __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 Dettagliato

Ha la stessa struttura gerarchica del reporter default, ma non comprime le sottosezioni delle suite di test superate. L'output finale del terminale visualizza tutti i test eseguiti, inclusi quelli superati.

CLIvitest.config.ts

bash

npx vitest --reporter=verbose

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

Esempio di output finale del terminale per una suite di test superata:

bash

✓ __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 a Punti

Stampa un punto per ogni test completato, fornendo un output minimo ma mostrando tutti i test eseguiti. I dettagli sono forniti solo per i test falliti, insieme al riepilogo del reporter basic per la suite.

CLIvitest.config.ts

bash

npx vitest --reporter=dot

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

Esempio di output del terminale per una suite di test superata:

bash

....

 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

Genera un report dei risultati dei test in formato JUnit XML. Può essere stampato nel terminale o salvato in un file XML tramite l'opzione di configurazione outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=junit

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

Esempio di un report JUnit XML:

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 &gt; 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 &gt; 4 - 2 should equal 2" time="0">
        </testcase>
    </testsuite>
</testsuites>

L'XML di output contiene i tag nidificati testsuites e testcase. È possibile utilizzare le opzioni del reporter per configurare questi attributi:

export default defineConfig({
  test: {
    reporters: [
      [
        'junit',
        { suiteName: 'custom suite name', classname: 'custom-classname' },
      ],
    ],
  },
});

Reporter JSON

Genera un report dei risultati dei test in formato JSON. Può essere stampato nel terminale o salvato in un file tramite l'opzione di configurazione outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=json

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

Esempio di un report 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"
    }
  ]
}

Reporter HTML

Genera un file HTML per visualizzare i risultati dei test tramite un'interfaccia grafica GUI interattiva. Una volta generato il file, Vitest avvierà un server di sviluppo locale e fornirà un link per visualizzare il report in un browser.

Il file di output può essere specificato utilizzando l'opzione di configurazione outputFile. Se non viene fornita alcuna opzione outputFile, verrà creato un nuovo file HTML.

CLIvitest.config.ts

bash

npx vitest --reporter=html

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

TIP

Per questo reporter è necessario installare il pacchetto @vitest/ui.

Reporter TAP

Genera un report secondo il Test Anything Protocol (TAP).

CLIvitest.config.ts

bash

npx vitest --reporter=tap

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

Esempio di un report TAP:

bash

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

Produce un report TAP flat. Come il reporter tap, i risultati dei test sono formattati per seguire gli standard TAP, ma le suite di test sono formattate come un elenco piatto anziché una gerarchia annidata.

CLIvitest.config.ts

bash

npx vitest --reporter=tap-flat

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

Esempio di un report TAP flat:

bash

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

Reporter Processi Appesi

Mostra un elenco di processi in sospeso che impediscono a Vitest di terminare in modo sicuro. Il reporter hanging-process non visualizza di per sé i risultati dei test, ma può essere utilizzato in combinazione con un altro reporter per monitorare i processi durante l'esecuzione dei test. L'uso di questo reporter può essere oneroso in termini di risorse, quindi dovrebbe essere generalmente riservato a scopi di debug in situazioni in cui Vitest non riesce costantemente a terminare il processo.

CLIvitest.config.ts

bash

npx vitest --reporter=hanging-process

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

Reporter Github Actions

Invia comandi workflow per fornire annotazioni per i test falliti. Questo reporter è abilitato automaticamente con un reporter default quando process.env.GITHUB_ACTIONS === 'true'.

Se configuri reporter non predefiniti, devi aggiungere esplicitamente github-actions.

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

Reporter Blob

Memorizza i risultati dei test sulla macchina in modo che possano essere successivamente uniti utilizzando il comando --merge-reports. Per impostazione predefinita, memorizza tutti i risultati nella cartella .vitest-reports, ma può essere sovrascritto con i flag --outputFile o --outputFile.blob.

bash

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

Si consiglia di utilizzare questo reporter se si esegue Vitest su macchine diverse con il flag --shard. Tutti i blob report possono essere uniti in qualsiasi report utilizzando il comando --merge-reports alla fine della pipeline CI:

bash

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

TIP

Sia --reporter=blob che --merge-reports non funzionano in modalità watch.

Reporter Personalizzati

È possibile utilizzare reporter personalizzati di terze parti installati da NPM specificando il nome del pacchetto nell'opzione dei reporter:

CLIvitest.config.ts

bash

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

export default defineConfig({
  test: {
    reporters: ['some-published-vitest-reporter'],
  },
});

In aggiunta, è possibile definire i propri reporter personalizzati e utilizzarli specificando il percorso del file:

bash

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

I reporter personalizzati devono implementare l'interfaccia Reporter.

Reporter ​

Output del Reporter ​

Combinazione di Reporter ​

Reporter Integrati ​

Reporter Predefinito ​

Reporter Base ​

Reporter Dettagliato ​

Reporter a Punti ​

Reporter JUnit ​

Reporter JSON ​

Reporter HTML ​

Reporter TAP ​

Reporter TAP Flat ​

Reporter Processi Appesi ​

Reporter Github Actions ​

Reporter Blob ​

Reporter Personalizzati ​

Reporter

Output del Reporter

Combinazione di Reporter

Reporter Integrati

Reporter Predefinito

Reporter Base

Reporter Dettagliato

Reporter a Punti

Reporter JUnit

Reporter JSON

Reporter HTML

Reporter TAP

Reporter TAP Flat

Reporter Processi Appesi

Reporter Github Actions

Reporter Blob

Reporter Personalizzati