Репортёры

Vitest предоставляет несколько встроенных репортёров для отображения результатов тестов в различных форматах, а также возможность использовать пользовательские репортёры. Вы можете выбрать нужные репортёры, указав опцию --reporter в командной строке или добавив свойство reporters в файл конфигурации. Если репортёр не задан, Vitest будет использовать репортёр по умолчанию, как описано ниже.

Использование репортёров через командную строку:

bash

npx vitest --reporter=verbose

Использование репортёров через vitest.config.ts:

import { defineConfig } from 'vitest/config';

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

Некоторые репортёры можно настроить, передавая им дополнительные параметры. Параметры конкретных репортёров описаны в разделах ниже.

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

Вывод репортёра

По умолчанию репортёры Vitest выводят результаты в терминал. При использовании репортёров json, html или junit вы можете записать результаты тестов в файл, указав опцию outputFile в configuration option в файле конфигурации Vite или через CLI.

CLIvitest.config.ts

bash

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

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

Комбинация репортёров

Вы можете одновременно использовать несколько репортёров для вывода результатов тестов в различных форматах. Например:

bash

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

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

Пример выше выведет результаты тестов в терминал, используя стиль по умолчанию, и запишет их в формате JSON в указанный выходной файл.

При использовании нескольких репортёров можно также указать несколько выходных файлов, как показано ниже:

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

Этот пример создаст отдельные отчёты в формате JSON и XML, а также выведет подробный отчёт в терминал.

Встроенные репортёры

Default Reporter

По умолчанию (т.е. если репортёр не указан) Vitest будет отображать результаты для каждого набора тестов иерархически по мере их выполнения, а затем сворачивать их после прохождения набора. После завершения всех тестов в итоговом выводе терминала будет показана сводка результатов и детали любых упавших тестов.

Пример вывода для тестов в процессе выполнения:

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

Итоговый вывод после завершения тестов:

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)

Basic Reporter

Репортёр basic показывает файлы тестов, которые были выполнены, и сводку результатов после завершения всего набора. Отдельные тесты включаются в отчёт только в случае ошибки.

CLIvitest.config.ts

bash

npx vitest --reporter=basic

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

Пример вывода с использованием базового репортёра:

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)

Verbose Reporter

Имеет ту же иерархическую структуру, что и репортёр default, но не сворачивает прошедшие наборы тестов. В итоговом выводе терминала показываются все выполненные тесты, включая прошедшие.

CLIvitest.config.ts

bash

npx vitest --reporter=verbose

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

Пример итогового вывода терминала для проходящего набора тестов:

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)

Dot Reporter

Выводит одну точку для каждого завершённого теста, чтобы минимизировать вывод, но при этом показывать все запущенные тесты. Подробности предоставляются только для упавших тестов, а также сводка репортёра basic для набора.

CLIvitest.config.ts

bash

npx vitest --reporter=dot

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

Пример вывода терминала для проходящего набора тестов:

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

Можно вывести в терминал или записать в XML-файл, используя параметр конфигурации outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=junit

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

Пример отчёта 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>

Выводимый XML содержит вложенные теги testsuites и testcase. Вы можете использовать параметры репортера для настройки этих атрибутов:

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

JSON Reporter

Может быть выведен в терминал или записан в файл, используя параметр конфигурации outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=json

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

Пример отчёта 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

Создаёт HTML-файл для просмотра результатов тестов через интерактивный GUI. После создания файла Vitest запустит локальный сервер разработки и предоставит ссылку для просмотра отчёта в браузере.

Выходной файл можно указать с помощью параметра конфигурации outputFile. Если параметр outputFile не указан, будет создан новый HTML-файл.

CLIvitest.config.ts

bash

npx vitest --reporter=html

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

TIP

Для этого репортёра требуется установленный пакет @vitest/ui.

TAP Reporter

Выводит отчёт в соответствии с Test Anything Protocol (TAP).

CLIvitest.config.ts

bash

npx vitest --reporter=tap

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

Пример отчёта 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

Выводит плоский отчёт TAP. Как и репортёр tap, результаты тестов форматируются в соответствии со стандартами TAP, но наборы тестов форматируются как плоский список, а не как вложенная иерархия.

CLIvitest.config.ts

bash

npx vitest --reporter=tap-flat

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

Пример плоского отчёта 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

Hanging Process Reporter

Отображает список зависших процессов, если таковые имеются, которые мешают Vitest безопасно завершить работу. Репортёр hanging-process сам по себе не отображает результаты тестов, но может использоваться в сочетании с другим репортёром для мониторинга процессов во время выполнения тестов. Использование этого репортёра может быть ресурсоёмким, поэтому его следует использовать в целях отладки в ситуациях, когда Vitest постоянно не может завершить процесс.

CLIvitest.config.ts

bash

npx vitest --reporter=hanging-process

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

Github Actions Reporter

Выводит workflow commands для предоставления аннотаций для упавших тестов. Этот репортёр автоматически активируется вместе с репортёром default, когда process.env.GITHUB_ACTIONS === 'true'.

Если вы используете репортёры, отличные от репортёра по умолчанию, необходимо явно добавить github-actions.

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

Blob Reporter

Сохраняет результаты тестов на машине, чтобы их можно было впоследствии объединить с помощью команды --merge-reports. По умолчанию сохраняет все результаты в папке .vitest-reports, но это можно переопределить с помощью флагов --outputFile или --outputFile.blob.

bash

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

Мы рекомендуем использовать этот репортер, если вы запускаете Vitest на разных машинах с флагом --shard. Все blob-отчеты можно объединить в любой отчет с помощью команды --merge-reports в конце вашего CI-пайплайна:

bash

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

TIP

Как --reporter=blob, так и --merge-reports не работают в режиме watch.

Custom Reporters

Вы можете использовать сторонние пользовательские репортёры, установленные из NPM, указав имя их пакета в параметре reporters:

CLIvitest.config.ts

bash

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

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

Кроме того, вы можете определить свои собственные custom reporters и использовать их, указав путь к их файлу:

bash

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

Пользовательские репортёры должны реализовывать интерфейс Reporter.

Репортёры ​

Вывод репортёра ​

Комбинация репортёров ​

Встроенные репортёры ​

Default Reporter ​

Basic Reporter ​

Verbose Reporter ​

Dot Reporter ​

JUnit Reporter ​

JSON Reporter ​

HTML Reporter ​

TAP Reporter ​

TAP Flat Reporter ​

Hanging Process Reporter ​

Github Actions Reporter ​

Blob Reporter ​

Custom Reporters ​

Репортёры

Вывод репортёра

Комбинация репортёров

Встроенные репортёры

Default Reporter

Basic Reporter

Verbose Reporter

Dot Reporter

JUnit Reporter

JSON Reporter

HTML Reporter

TAP Reporter

TAP Flat Reporter

Hanging Process Reporter

Github Actions Reporter

Blob Reporter

Custom Reporters