Reporterek

A Vitest számos beépített reportert kínál a tesztek kimenetének különböző formátumokban történő megjelenítéséhez. Emellett lehetőséget biztosít egyéni reporterek használatára is. A --reporter parancssori opcióval vagy a reporters tulajdonság megadásával választhatsz különböző reportereket a konfigurációs fájlban. Ha nincs megadva reporter, a Vitest az alább leírt alapértelmezett reportert fogja használni.

Reporterek használata a parancssorból:

bash

npx vitest --reporter=verbose

Reporterek használata a vitest.config.ts fájlban:

/// <reference types="vitest" />
import { defineConfig } from 'vite';

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

Néhány reporter testreszabható további opciók átadásával. Az alábbi szakaszokban ismertetjük a reporter-specifikus opciókat.

TIP

Vitest v1.3.0 óta.

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

Reporter kimenet

Alapértelmezés szerint a Vitest reporterei a terminálra írják a kimenetüket. A json, html vagy junit reporterek használatakor a tesztek kimenetét fájlba is irányíthatod. Ehhez meg kell adnod egy outputFile konfigurációs opciót a Vite konfigurációs fájljában vagy a CLI-ben.

CLIvitest.config.ts

bash

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

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

Reporterek kombinálása

A teszteredmények különböző formátumokban történő megjelenítéséhez több reportert is használhatsz egyszerre. 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 a terminálra nyomtatja az alapértelmezett stílusban, és JSON formátumban kiírja a megadott kimeneti fájlba.

Több reporter használata esetén több kimeneti fájlt is megadhatsz az alábbiak szerint:

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

Ez a példa külön JSON és XML riportokat generál, valamint egy részletes riportot jelenít meg a terminálon.

Beépített reporterek

Alapértelmezett reporter

Alapértelmezés szerint (azaz, ha nincs megadva reporter), a Vitest futás közben hierarchikusan jeleníti meg az egyes tesztcsomagok eredményeit. A sikeresen lefutott csomagokat ezután összecsukja. Amikor az összes teszt befejeződött, a végső terminálkimenet összefoglalja az eredményeket és a sikertelen tesztek részleteit.

Példa a folyamatban lévő tesztek kimenetére:

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

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

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)

Egyszerű reporter

A basic reporter a teljes csomag futásának befejezése után jeleníti meg a futtatott tesztfájlokat és az eredmények összefoglalóját. A riport csak a sikertelen teszteket tartalmazza.

CLIvitest.config.ts

bash

npx vitest --reporter=basic

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

Példa az egyszerű reporter használatával kapott kimenetre:

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 reporter

Ugyanazt a hierarchikus struktúrát követi, mint az alapértelmezett reporter, de nem csukja össze az al-fákat a sikeres tesztcsomagok esetében. A végső terminálkimenet az összes futtatott tesztet megjeleníti, beleértve a sikereseket is.

CLIvitest.config.ts

bash

npx vitest --reporter=verbose

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

Példa egy sikeres tesztcsomag végső terminálkimeneté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 reporter

Minden befejezett teszthez egyetlen pontot nyomtat ki, hogy minimális kimenetet biztosítson, miközben továbbra is megjeleníti az összes futtatott tesztet. A részletek csak a sikertelen tesztekhez kerülnek megadásra, a csomaghoz tartozó basic reporter összefoglalójával együtt.

CLIvitest.config.ts

bash

npx vitest --reporter=dot

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

Példa egy sikeres tesztcsomag terminálkimenetére:

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

A teszteredményekről JUnit XML formátumban készít riportot. A terminálra írható, vagy kiírható egy XML fájlba 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 riportra:

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 testsuites és testcase elemeket tartalmaz, egymásba ágyazva. A name és classname attribútumok a VITEST_JUNIT_SUITE_NAME és VITEST_JUNIT_CLASSNAME környezeti változókkal konfigurálhatók. Ezek a riport opciókon keresztül is testreszabhatók:

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

JSON reporter

A teszteredményekről JSON formátumban készít riportot. A terminálra írható, vagy kiírható egy fájlba 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 riportra:

json

{
  "numTotalTestSuites": 1,
  "numPassedTestSuites": 0,
  "numFailedTestSuites": 1,
  "numPendingTestSuites": 0,
  "numTotalTests": 1,
  "numPassedTests": 0,
  "numFailedTests": 1,
  "numPendingTests": 0,
  "numTodoTests": 0,
  "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
          }
        }
      ],
      "startTime": 1697737019787,
      "endTime": 1697737019797,
      "status": "failed",
      "message": "",
      "name": "/root-directory/__tests__/test-file-1.test.ts"
    }
  ]
}

HTML reporter

HTML fájlt generál a teszteredmények interaktív GUI felületen történő megtekintéséhez. A fájl generálása után a Vitest futtat egy helyi fejlesztői szervert, és linket biztosít a riport böngészőben történő megtekintéséhez.

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

CLIvitest.config.ts

bash

npx vitest --reporter=html

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

TIP

Ehhez telepíteni kell a @vitest/ui csomagot.

TAP reporter

A Test Anything Protocol (TAP) protokollt követő riportot ad ki.

CLIvitest.config.ts

bash

npx vitest --reporter=tap

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

Példa egy TAP riportra:

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

A tap riporthoz hasonlóan a teszteredmények a TAP szabványoknak megfelelően vannak formázva. A tesztcsomagok azonban lapos listaként jelennek meg, nem pedig egymásba ágyazott hierarchiaként.

CLIvitest.config.ts

bash

npx vitest --reporter=tap-flat

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

Példa egy TAP flat riportra:

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ő folyamatokat jelző reporter

A függő folyamatokat jelző reporter önmagában nem jeleníti meg a teszteredményeket, de egy másik reporterrel együtt használva figyelhetők a folyamatok a tesztek futása közben. Ennek a reporternek a használata erőforrásigényes lehet, ezért általában csak hibakeresésre javasolt, olyan esetekben, amikor a Vitest 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 reporter 1.3.0+

Kimeneti workflow parancsok a teszthibákhoz tartozó annotációk biztosításához. Ez a reporter automatikusan engedélyezve van egy default reporterrel, ha a process.env.GITHUB_ACTIONS === 'true'.

Ha nem alapértelmezett reportereket konfigurálsz, akkor explicit módon hozzá kell adnod a github-actions reportert.

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

Egyéni reporterek

Ha megadod a csomag nevét a riportok opcióban, használhatsz harmadik féltől származó, NPM-ből telepített egyéni reportereket:

CLIvitest.config.ts

bash

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

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

Saját egyéni reportereket is definiálhatsz, és használhatod őket a fájlútvonaluk megadásával:

bash

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

Az egyéni reportereknek meg kell felelniük a Reporter interfésznek.

Reporterek ​

Reporter kimenet ​

Reporterek kombinálása ​

Beépített reporterek ​

Alapértelmezett reporter ​

Egyszerű reporter ​

Részletes reporter ​

Pont reporter ​

JUnit reporter ​

JSON reporter ​

HTML reporter ​

TAP reporter ​

TAP Flat reporter ​

Függő folyamatokat jelző reporter ​

GitHub Actions reporter 1.3.0+ ​

Egyéni reporterek ​

Reporterek

Reporter kimenet

Reporterek kombinálása

Beépített reporterek

Alapértelmezett reporter

Egyszerű reporter

Részletes reporter

Pont reporter

JUnit reporter

JSON reporter

HTML reporter

TAP reporter

TAP Flat reporter

Függő folyamatokat jelző reporter

GitHub Actions reporter 1.3.0+

Egyéni reporterek