Jelentéskészítők (Reporters)

A Vitest számos beépített jelentéskészítőt (reportert) kínál a teszteredmények különböző formátumú megjelenítéséhez, emellett támogatja az egyedi jelentéskészítők használatát is. Különböző jelentéskészítőket választhat a --reporter parancssori opcióval, vagy a konfigurációs fájlban található reporters tulajdonság beállításával. Ha nincs megadva jelentéskészítő, a Vitest az alább leírt default jelentéskészítőt használja.

Jelentéskészítők használata parancssorból:

bash

npx vitest --reporter=verbose

Jelentéskészítők használata a vitest.config.ts fájlon keresztül:

import { defineConfig } from 'vitest/config';

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

Néhány jelentéskészítő további opciók megadásával testreszabható. A jelentéskészítő-specifikus opciókat az alábbi szakaszok írják le.

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

Jelentéskészítő kimenete

Alapértelmezés szerint a Vitest jelentéskészítői a kimenetet a terminálra írják. A json, html vagy junit jelentéskészítők használatakor a tesztek kimenetét fájlba is írhatja az outputFile konfigurációs opció beállításával, akár a Vite konfigurációs fájljában, akár a CLI-n keresztül.

CLIvitest.config.ts

bash

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

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

Jelentéskészítők kombinálása

Több jelentéskészítőt is használhat egyszerre, hogy a teszteredményeket különböző formátumokban mutassa be. Például:

bash

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

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

A fenti példa a teszteredményeket az alapértelmezett stílusban a terminálra írja, és JSON formátumban a megadott kimeneti fájlba is.

Több jelentéskészítő használatakor több kimeneti fájl is megadható, az alábbiak szerint:

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

Ez a példa külön JSON és XML jelentéseket ír, valamint egy részletes jelentést nyomtat a terminálra.

Beépített jelentéskészítők

Alapértelmezett jelentéskészítő

Alapértelmezés szerint (azaz ha nincs megadva jelentéskészítő), a Vitest a futó tesztek összefoglalóját és állapotát alul jeleníti meg. Amint egy tesztsorozat sikeresen lefut, annak állapota az összefoglaló tetején jelenik meg.

Az összefoglalót letilthatja a jelentéskészítő konfigurálásával:

vitest.config.ts

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

Példa kimenet folyamatban lévő tesztekhez:

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

Végső kimenet a tesztek befejezése után:

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)

Egyszerű jelentéskészítő

A basic riporter egyenértékű a default riporterrel, summary nélkül.

CLIvitest.config.ts

bash

npx vitest --reporter=basic

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

Példa kimenet egyszerű jelentéskészítő használatával:

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)

Részletes jelentéskészítő

A részletes jelentéskészítő megegyezik az default jelentéskészítővel, de az egyes teszteket is megjeleníti, miután a tesztsorozat befejeződött. Emellett megjeleníti azokat a jelenleg futó teszteket is, amelyek túllépik a slowTestThreshold értéket. Az default jelentéskészítőhöz hasonlóan letilthatja az összefoglalót a jelentéskészítő konfigurálásával.

CLIvitest.config.ts

bash

npx vitest --reporter=verbose

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

Példa kimenet folyamatban lévő tesztekhez az alapértelmezett slowTestThreshold: 300 értékkel:

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

Példa a sikeres tesztsorozat végső terminál kimenetére:

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)

Pont jelentéskészítő

Minden befejezett teszthez egyetlen pontot nyomtat, hogy minimális kimenetet biztosítson, miközben az összes futott tesztet is megjeleníti. Részletek csak a sikertelen tesztekhez, valamint a tesztsorozat basic jelentéskészítőjének összefoglalójához jelennek meg.

CLIvitest.config.ts

bash

npx vitest --reporter=dot

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

Példa terminál kimenet sikeres tesztsorozathoz:

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 jelentéskészítő

A teszteredményekről JUnit XML formátumú jelentést készít. Kinyomtatható a terminálra, vagy XML fájlba írható az outputFile konfigurációs opcióval.

CLIvitest.config.ts

bash

npx vitest --reporter=junit

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

Példa egy JUnit XML jelentésre:

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>

A kimeneti XML beágyazott testsuites és testcase tageket tartalmaz. Ezek testreszabhatók a jelentéskészítő suiteName és classnameTemplate opcióival. A classnameTemplate lehet sablon string vagy függvény.

A classnameTemplate opcióhoz támogatott helyőrzők:

filename
filepath

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

JSON jelentéskészítő

A teszteredményekről JSON formátumú jelentést generál, amely Jest --json opciójával kompatibilis. Kinyomtatható a terminálra, vagy fájlba írható az outputFile konfigurációs opcióval.

CLIvitest.config.ts

bash

npx vitest --reporter=json

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

Példa egy JSON jelentésre:

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

A Vitest 3 óta a JSON jelentéskészítő tartalmazza a lefedettségi információkat a coverageMap mezőben, ha a lefedettség engedélyezve van.

HTML jelentéskészítő

HTML fájlt generál a teszteredmények interaktív GUI segítségével való megtekintéséhez. Miután a fájl elkészült, a Vitest elindít egy helyi fejlesztői szervert, és linket biztosít a jelentés böngészőben való megtekintéséhez.

A kimeneti fájl megadható az outputFile konfigurációs opcióval. Ha nincs outputFile opció megadva, új HTML fájl jön létre.

CLIvitest.config.ts

bash

npx vitest --reporter=html

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

TIP

Ez a jelentéskészítő a @vitest/ui csomag telepítését igényli.

TAP jelentéskészítő

Jelentést készít a Test Anything Protocol (TAP) formátumban.

CLIvitest.config.ts

bash

npx vitest --reporter=tap

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

Példa egy TAP jelentésre:

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 jelentéskészítő

TAP flat jelentést készít. A tap jelentéskészítőhöz hasonlóan a teszteredmények TAP szabványok szerint vannak formázva, de a tesztsorozatok lapos listaként, nem pedig beágyazott hierarchiaként jelennek meg.

CLIvitest.config.ts

bash

npx vitest --reporter=tap-flat

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

Példa egy TAP flat jelentésre:

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

Függő folyamat jelentéskészítő

Megjeleníti a függő folyamatok listáját, amennyiben azok akadályozzák a Vitest biztonságos kilépését. A hanging-process jelentéskészítő önmagában nem jelenít meg teszteredményeket, de más jelentéskészítővel együtt használható a folyamatok figyelésére a tesztek futása közben. Ennek a jelentéskészítőnek a használata erőforrás-igényes lehet, ezért általában hibakeresési célokra ajánlott olyan helyzetekben, amikor a Vitest következetesen nem tud kilépni a folyamatból.

CLIvitest.config.ts

bash

npx vitest --reporter=hanging-process

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

Github Actions jelentéskészítő

Kimenetként munkafolyamat parancsokat ad a teszthibák annotációinak biztosításához. Ez a jelentéskészítő automatikusan engedélyezve van a default jelentéskészítővel együtt, amikor a process.env.GITHUB_ACTIONS === 'true'.

Ha nem alapértelmezett jelentéskészítőket konfigurál, expliciten hozzá kell adnia a github-actions jelentéskészítőt.

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

Testreszabhatja a GitHub annotációs parancsformátumában megjelenő fájlútvonalakat az onWritePath opció használatával. Ez akkor hasznos, ha a Vitestet konténeres környezetben, például Dockerben futtatja, ahol a fájlútvonalak nem egyeznek a GitHub Actions környezetben lévő útvonalakkal.

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

Blob jelentéskészítő

A teszteredményeket a gépen tárolja, hogy később egyesíthetők legyenek a --merge-reports paranccsal. Alapértelmezés szerint az összes eredményt a .vitest-reports mappába menti, de ez felülírható a --outputFile vagy --outputFile.blob opciókkal.

bash

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

Javasoljuk ennek a jelentéskészítőnek a használatát, ha a Vitestet különböző gépeken futtatja a --shard opcióval. Az összes blob jelentés egyesíthető egy jelentésbe a --merge-reports parancs használatával a CI pipeline végén:

bash

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

TIP

Mind a --reporter=blob, mind a --merge-reports nem működik figyelő módban.

Egyedi jelentéskészítők

Használhat harmadik féltől származó, NPM-ből telepített egyedi jelentéskészítőket a csomagnév megadásával a jelentéskészítők opciójában:

CLIvitest.config.ts

bash

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

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

Ezenkívül definiálhatja saját egyedi jelentéskészítőit, és használhatja őket a fájlútvonaluk megadásával:

bash

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

Az egyedi jelentéskészítőknek meg kell valósítaniuk a Reporter interfészt.

Jelentéskészítők (Reporters) ​

Jelentéskészítő kimenete ​

Jelentéskészítők kombinálása ​

Beépített jelentéskészítők ​

Alapértelmezett jelentéskészítő ​

Egyszerű jelentéskészítő ​

Részletes jelentéskészítő ​

Pont jelentéskészítő ​

JUnit jelentéskészítő ​

JSON jelentéskészítő ​

HTML jelentéskészítő ​

TAP jelentéskészítő ​

TAP Flat jelentéskészítő ​

Függő folyamat jelentéskészítő ​

Github Actions jelentéskészítő ​

Blob jelentéskészítő ​

Egyedi jelentéskészítők ​

Jelentéskészítők (Reporters)

Jelentéskészítő kimenete

Jelentéskészítők kombinálása

Beépített jelentéskészítők

Alapértelmezett jelentéskészítő

Egyszerű jelentéskészítő

Részletes jelentéskészítő

Pont jelentéskészítő

JUnit jelentéskészítő

JSON jelentéskészítő

HTML jelentéskészítő

TAP jelentéskészítő

TAP Flat jelentéskészítő

Függő folyamat jelentéskészítő

Github Actions jelentéskészítő

Blob jelentéskészítő

Egyedi jelentéskészítők