Reportery

Vitest udostępnia kilka wbudowanych reporterów do wyświetlania wyników testów w różnych formatach, a także umożliwia korzystanie z reporterów niestandardowych. Możesz wybrać reportery za pomocą opcji --reporter w wierszu poleceń lub dodając właściwość reporters do pliku konfiguracyjnego. Jeśli nie określisz reportera, Vitest użyje domyślnego reportera (default), opisanego poniżej.

Używanie reporterów za pomocą wiersza poleceń:

bash

npx vitest --reporter=verbose

Używanie reporterów za pomocą vitest.config.ts:

import { defineConfig } from 'vitest/config';

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

Niektóre reportery można konfigurować, przekazując dodatkowe opcje. Szczegółowe informacje o opcjach poszczególnych reporterów znajdziesz w dalszej części dokumentu.

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

Zapisywanie Wyników Reportera

Domyślnie reportery Vitest wyświetlają wyniki w terminalu. Używając reporterów json, html lub junit, możesz zapisać wyniki testów do pliku, dodając opcję outputFile ([../config/#outputfile]) do pliku konfiguracyjnego Vite lub poprzez CLI.

CLIvitest.config.ts

bash

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

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

Używanie Wielu Reporterów

Możesz używać wielu reporterów jednocześnie, aby wyświetlać wyniki testów w różnych formatach. Na przykład:

bash

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

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

Ten przykład wyświetli wyniki testów w terminalu w domyślnym stylu oraz zapisze je w formacie JSON do określonego pliku.

Podczas korzystania z wielu reporterów można również określić różne pliki wyjściowe dla każdego z nich:

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

Ten przykład zapisze oddzielne raporty JSON i XML, a także wyświetli szczegółowy raport w terminalu.

Wbudowane Reportery

Domyślny Reporter

Domyślnie (jeśli nie określisz reportera), Vitest wyświetla wyniki każdego zestawu testów hierarchicznie w trakcie ich wykonywania, a po pomyślnym zakończeniu zestawu zwija jego szczegóły. Po zakończeniu wszystkich testów końcowy wynik w terminalu wyświetla podsumowanie wyników i szczegóły nieudanych testów.

Przykładowe wyniki dla testów w trakcie wykonywania:

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

Końcowe wyniki po zakończeniu testów:

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)

Podstawowy Reporter

Reporter basic wyświetla uruchomione pliki testowe oraz podsumowanie wyników po zakończeniu testów. Poszczególne testy nie są uwzględniane w raporcie, chyba że zakończą się niepowodzeniem.

CLIvitest.config.ts

bash

npx vitest --reporter=basic

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

Przykładowe wyniki przy użyciu podstawowego reportera:

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)

Szczegółowy Reporter

Reporter verbose podąża za tą samą strukturą hierarchiczną co reporter default, ale nie zwija podgrup dla pomyślnie zakończonych zestawów testów. Końcowy wynik w terminalu wyświetla wszystkie testy, które zostały uruchomione, w tym te, które zakończyły się pomyślnie.

CLIvitest.config.ts

bash

npx vitest --reporter=verbose

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

Przykład końcowego wyniku w terminalu dla pomyślnie zakończonego zestawu testów:

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)

Kropkowy Reporter

Reporter dot wyświetla pojedynczą kropkę dla każdego zakończonego testu, zapewniając minimalne wyniki, a jednocześnie pokazując wszystkie uruchomione testy. Szczegóły wyświetlane są tylko dla testów, które zakończyły się niepowodzeniem. Dodatkowo wyświetlane jest podsumowanie reportera basic.

CLIvitest.config.ts

bash

npx vitest --reporter=dot

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

Przykładowe wyniki w terminalu dla pomyślnie zakończonego zestawu testów:

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

Reporter junit wyświetla raport z wynikami testów w formacie JUnit XML. Może być wyświetlany w terminalu lub zapisywany do pliku XML za pomocą opcji outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=junit

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

Przykład raportu 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>

Wyjściowy XML zawiera zagnieżdżone tagi testsuites i testcase. Możesz użyć opcji reportera, aby skonfigurować te atrybuty:

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

JSON Reporter

Reporter json wyświetla raport z wynikami testów w formacie JSON. Może być wyświetlany w terminalu lub zapisywany do pliku za pomocą opcji outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=json

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

Przykład raportu 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"
    }
  ]
}

HTML Reporter

Reporter html generuje plik HTML do przeglądania wyników testów za pomocą interaktywnego GUI. Po wygenerowaniu pliku Vitest uruchamia lokalny serwer deweloperski i udostępnia link do wyświetlenia raportu w przeglądarce.

Plik wyjściowy można określić za pomocą opcji outputFile. Jeśli nie podano opcji outputFile, zostanie utworzony nowy plik HTML.

CLIvitest.config.ts

bash

npx vitest --reporter=html

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

TIP

Ten reporter wymaga zainstalowanego pakietu @vitest/ui.

TAP Reporter

Reporter tap wyświetla raport zgodny z Test Anything Protocol (TAP).

CLIvitest.config.ts

bash

npx vitest --reporter=tap

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

Przykład raportu 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
    }
}

TAP Flat Reporter

Reporter tap-flat wyświetla płaski raport TAP. Podobnie jak w przypadku reportera tap, wyniki testów są formatowane zgodnie ze standardami TAP, ale zestawy testów są formatowane jako płaska lista, a nie zagnieżdżona hierarchia.

CLIvitest.config.ts

bash

npx vitest --reporter=tap-flat

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

Przykład płaskiego raportu TAP:

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 Wykrywania Zawieszonych Procesów

Reporter hanging-process wyświetla listę wiszących procesów, jeśli jakiekolwiek blokują poprawne zakończenie działania Vitest. Sam w sobie nie wyświetla wyników testów, ale może być używany w połączeniu z innym reporterem do monitorowania procesów podczas uruchamiania testów. Używanie tego reportera może zużywać dużo zasobów, dlatego należy go na ogół rezerwować do celów debugowania w sytuacjach, gdy Vitest konsekwentnie nie może zakończyć procesu.

CLIvitest.config.ts

bash

npx vitest --reporter=hanging-process

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

Github Actions Reporter

Reporter github-actions wykorzystuje polecenia workflow do dodawania adnotacji do testów, które zakończyły się niepowodzeniem. Ten reporter jest automatycznie włączany z reporterem default, gdy process.env.GITHUB_ACTIONS === 'true'.

Jeśli używasz niestandardowych reporterów, musisz ręcznie dodać github-actions.

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

Reporter Blob

Przechowuje wyniki testów na maszynie, dzięki czemu można je później scalić za pomocą polecenia --merge-reports. Domyślnie przechowuje wszystkie wyniki w folderze .vitest-reports, ale można to przesłonić za pomocą flag --outputFile lub --outputFile.blob.

bash

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

Zalecamy użycie tego reportera, jeśli uruchamiasz Vitest na różnych maszynach z flagą --shard. Wszystkie raporty blob można scalić w dowolny raport za pomocą polecenia --merge-reports na końcu swojego potoku CI:

bash

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

TIP

Zarówno --reporter=blob jak i --merge-reports nie działają w trybie watch.

Niestandardowe Reportery

Możesz użyć niestandardowych reporterów innych firm zainstalowanych z NPM, określając ich nazwę pakietu w opcji reporterów:

CLIvitest.config.ts

bash

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

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

Możesz również zdefiniować własne niestandardowe reportery i używać ich, podając ścieżkę do pliku:

bash

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

Niestandardowe reportery muszą implementować interfejs Reporter.

Reportery ​

Zapisywanie Wyników Reportera ​

Używanie Wielu Reporterów ​

Wbudowane Reportery ​

Domyślny Reporter ​

Podstawowy Reporter ​

Szczegółowy Reporter ​

Kropkowy Reporter ​

JUnit Reporter ​

JSON Reporter ​

HTML Reporter ​

TAP Reporter ​

TAP Flat Reporter ​

Reporter Wykrywania Zawieszonych Procesów ​

Github Actions Reporter ​

Reporter Blob ​

Niestandardowe Reportery ​

Reportery

Zapisywanie Wyników Reportera

Używanie Wielu Reporterów

Wbudowane Reportery

Domyślny Reporter

Podstawowy Reporter

Szczegółowy Reporter

Kropkowy Reporter

JUnit Reporter

JSON Reporter

HTML Reporter

TAP Reporter

TAP Flat Reporter

Reporter Wykrywania Zawieszonych Procesów

Github Actions Reporter

Reporter Blob

Niestandardowe Reportery