Reporter

Vitest bietet mehrere integrierte Reporter, um Testergebnisse in verschiedenen Formaten darzustellen, sowie die Möglichkeit, benutzerdefinierte Reporter zu verwenden. Sie können verschiedene Reporter entweder über die Befehlszeilenoption --reporter oder durch die Angabe einer reporters-Eigenschaft in Ihrer Konfigurationsdatei auswählen. Wenn kein Reporter angegeben ist, verwendet Vitest den default-Reporter, wie unten beschrieben.

Verwendung von Reportern über die Befehlszeile:

bash

npx vitest --reporter=verbose

Verwendung von Reportern über vitest.config.ts:

import { defineConfig } from 'vitest/config';

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

Einige Reporter lassen sich durch zusätzliche Optionen anpassen. Reporterspezifische Optionen werden in den Abschnitten unten beschrieben.

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

Reporter-Ausgabe

Standardmäßig geben die Reporter von Vitest ihre Ausgabe im Terminal aus. Bei Verwendung der Reporter json, html oder junit können Sie die Testergebnisse stattdessen in eine Datei schreiben, indem Sie die Konfigurationsoption outputFile entweder in Ihrer Vite-Konfigurationsdatei oder über die CLI festlegen.

CLIvitest.config.ts

bash

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

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

Reporter kombinieren

Sie können mehrere Reporter gleichzeitig nutzen, um Ihre Testergebnisse in unterschiedlichen Formaten auszugeben. Zum Beispiel:

bash

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

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

Das obige Beispiel gibt die Testergebnisse sowohl im Standardstil im Terminal aus als auch als JSON in die dafür vorgesehene Ausgabedatei schreibt.

Bei der Verwendung mehrerer Reporter ist es auch möglich, mehrere Ausgabedateien festzulegen, wie folgt:

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

Dieses Beispiel schreibt separate JSON- und XML-Berichte und gibt einen ausführlichen Bericht im Terminal aus.

Integrierte Reporter

Standardreporter

Standardmäßig zeigt Vitest eine Zusammenfassung der laufenden Tests und deren Status am unteren Rand an, wenn kein Reporter angegeben ist. Sobald eine Suite abgeschlossen ist, wird ihr Status oben in der Zusammenfassung angezeigt.

Sie können die Zusammenfassung deaktivieren, indem Sie den Reporter konfigurieren:

vitest.config.ts

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

Beispielausgabe während der Tests:

bash

 ✓ 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

Endgültige Ausgabe nach Abschluss der Tests:

bash

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

Basis-Reporter

Der basic-Reporter ist äquivalent zum default-Reporter ohne summary.

CLIvitest.config.ts

bash

npx vitest --reporter=basic

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

Beispielausgabe mit dem Basis-Reporter:

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)

Ausführlicher Reporter

Der Ausführliche Reporter entspricht dem default-Reporter, zeigt aber auch jeden einzelnen Test an, nachdem die Suite abgeschlossen ist. Er zeigt auch aktuell laufende Tests an, die den slowTestThreshold überschreiten. Ähnlich wie beim default-Reporter können Sie die Zusammenfassung deaktivieren, indem Sie den Reporter konfigurieren.

CLIvitest.config.ts

bash

npx vitest --reporter=verbose

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

Beispielausgabe für laufende Tests mit dem Standardwert slowTestThreshold: 300:

bash

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

Beispiel der finalen Terminalausgabe für eine bestandene Testsuite:

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)

Punkt-Reporter

Gibt für jeden abgeschlossenen Test einen einzelnen Punkt aus, um eine minimale Ausgabe zu liefern, wobei dennoch alle ausgeführten Tests angezeigt werden. Details werden nur für fehlgeschlagene Tests bereitgestellt, zusammen mit der Zusammenfassung des basic-Reporters für die Suite.

CLIvitest.config.ts

bash

npx vitest --reporter=dot

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

Beispiel der Terminalausgabe für eine bestandene Testsuite:

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)

JUnit Reporter

Gibt einen Bericht der Testergebnisse im JUnit-XML-Format aus. Kann entweder im Terminal ausgegeben oder mit der Konfigurationsoption outputFile in eine XML-Datei geschrieben werden.

CLIvitest.config.ts

bash

npx vitest --reporter=junit

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

Beispiel eines JUnit-XML-Berichts:

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>

Die generierte XML enthält verschachtelte testsuites- und testcase-Tags. Diese können auch über die Reporter-Optionen suiteName und classnameTemplate konfiguriert werden. classnameTemplate kann entweder ein Template-String oder eine Funktion sein.

Die unterstützten Platzhalter für die Option classnameTemplate sind:

filename
filepath

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

JSON Reporter

Generiert einen Bericht der Testergebnisse in einem JSON-Format, das mit Jests --json-Option kompatibel ist. Kann entweder im Terminal ausgegeben oder mit der Konfigurationsoption outputFile in eine Datei geschrieben werden.

CLIvitest.config.ts

bash

npx vitest --reporter=json

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

Beispiel eines JSON-Berichts:

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

Seit Vitest 3 enthält der JSON-Reporter Abdeckungsinformationen in coverageMap, sofern die Abdeckung aktiviert ist.

HTML Reporter

Generiert eine HTML-Datei, um Testergebnisse über eine interaktive GUI anzuzeigen. Nachdem die Datei generiert wurde, startet Vitest einen lokalen Entwicklungsserver und stellt einen Link bereit, um den Bericht in einem Browser anzuzeigen.

Die Ausgabedatei kann mit der Konfigurationsoption outputFile angegeben werden. Wenn keine outputFile-Option angegeben ist, wird eine neue HTML-Datei erstellt.

CLIvitest.config.ts

bash

npx vitest --reporter=html

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

TIP

Dieser Reporter benötigt das installierte Paket @vitest/ui.

TAP Reporter

Gibt einen Bericht gemäß dem Test Anything Protocol (TAP) aus.

CLIvitest.config.ts

bash

npx vitest --reporter=tap

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

Beispiel eines TAP-Berichts:

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
    }
}

TAP Flat Reporter

Gibt einen TAP-Flat-Bericht aus. Wie der tap-Reporter werden die Testergebnisse gemäß den TAP-Standards formatiert, aber Testsuiten werden als flache Liste statt als verschachtelte Hierarchie formatiert.

CLIvitest.config.ts

bash

npx vitest --reporter=tap-flat

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

Beispiel eines TAP-Flat-Berichts:

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

Hanging Process Reporter

Zeigt eine Liste der hängenden Prozesse an, falls diese Vitest am sicheren Beenden hindern. Der hanging-process-Reporter selbst zeigt keine Testergebnisse an, kann aber in Kombination mit einem anderen Reporter verwendet werden, um Prozesse während der Testausführung zu überwachen. Die Verwendung dieses Reporters kann ressourcenintensiv sein und sollte daher in der Regel für Debugging-Zwecke reserviert werden, wenn Vitest den Prozess nicht beenden kann.

CLIvitest.config.ts

bash

npx vitest --reporter=hanging-process

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

Github Actions Reporter

Gibt Workflow-Befehle aus, um Testfehler mit Anmerkungen zu versehen. Dieser Reporter wird automatisch zusammen mit dem default-Reporter aktiviert, wenn process.env.GITHUB_ACTIONS === 'true'.

Wenn Sie andere Reporter als den Standardreporter konfigurieren, müssen Sie github-actions explizit hinzufügen.

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

Sie können die Dateipfade, die im GitHub-Anmerkungsbefehlsformat ausgegeben werden, mithilfe der Option onWritePath anpassen. Dies ist nützlich, wenn Vitest in einer containerisierten Umgebung, wie z.B. Docker, ausgeführt wird, da die Dateipfade dort möglicherweise nicht mit den Pfaden in der GitHub Actions-Umgebung übereinstimmen.

export default defineConfig({
  test: {
    reporters: process.env.GITHUB_ACTIONS
      ? [
          'default',
          [
            'github-actions',
            {
              onWritePath(path) {
                return path.replace(
                  /^\/app\//,
                  `${process.env.GITHUB_WORKSPACE}/`
                );
              },
            },
          ],
        ]
      : ['default'],
  },
});

Blob Reporter

Speichert Testergebnisse lokal, sodass sie später mit dem Befehl --merge-reports zusammengeführt werden können. Standardmäßig werden alle Ergebnisse im Ordner .vitest-reports gespeichert, dies kann jedoch durch die Flags --outputFile oder --outputFile.blob überschrieben werden.

bash

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

Wir empfehlen die Verwendung dieses Reporters, wenn Sie Vitest auf verschiedenen Maschinen unter Verwendung des Flags --shard ausführen. Alle Blob-Berichte können am Ende Ihrer CI-Pipeline mit dem Befehl --merge-reports zu einem einzigen Bericht zusammengeführt werden:

bash

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

TIP

Sowohl --reporter=blob als auch --merge-reports sind im Watch-Modus nicht verfügbar.

Benutzerdefinierte Reporter

Sie können benutzerdefinierte Reporter von Drittanbietern, die über NPM installiert wurden, verwenden, indem Sie deren Paketnamen in der Reporter-Option angeben:

CLIvitest.config.ts

bash

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

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

Zusätzlich können Sie Ihre eigenen benutzerdefinierten Reporter definieren und diese verwenden, indem Sie den Dateipfad angeben:

bash

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

Benutzerdefinierte Reporter müssen das Reporter-Interface implementieren.

Reporter ​

Reporter-Ausgabe ​

Reporter kombinieren ​

Integrierte Reporter ​

Standardreporter ​

Basis-Reporter ​

Ausführlicher Reporter ​

Punkt-Reporter ​

JUnit Reporter ​

JSON Reporter ​

HTML Reporter ​

TAP Reporter ​

TAP Flat Reporter ​

Hanging Process Reporter ​

Github Actions Reporter ​

Blob Reporter ​

Benutzerdefinierte Reporter ​

Reporter

Reporter-Ausgabe

Reporter kombinieren

Integrierte Reporter

Standardreporter

Basis-Reporter

Ausführlicher Reporter

Punkt-Reporter

JUnit Reporter

JSON Reporter

HTML Reporter

TAP Reporter

TAP Flat Reporter

Hanging Process Reporter

Github Actions Reporter

Blob Reporter

Benutzerdefinierte Reporter