Reporters

O Vitest oferece vários reporters integrados para exibir a saída dos testes em diferentes formatos, e também a capacidade de usar reporters personalizados. Você pode selecionar diferentes reporters usando a opção de linha de comando --reporter ou incluindo uma propriedade reporters no seu arquivo de configuração. Se nenhum reporter for especificado, o Vitest utilizará o reporter default, conforme descrito a seguir.

Usando reporters via linha de comando:

bash

npx vitest --reporter=verbose

Usando reporters via vitest.config.ts:

import { defineConfig } from 'vitest/config';

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

Alguns reporters podem ser personalizados ao passar opções adicionais para eles. As opções específicas do reporter são descritas nas seções abaixo.

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

Saída do Reporter

Por padrão, os reporters do Vitest imprimem sua saída no terminal. Ao usar os reporters json, html ou junit, você pode, alternativamente, gravar a saída dos seus testes em um arquivo, incluindo uma opção de configuração outputFile no seu arquivo de configuração do Vite ou via CLI.

CLIvitest.config.ts

bash

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

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

Combinando Reporters

Você pode usar múltiplos reporters simultaneamente para imprimir os resultados dos seus testes em diferentes formatos. Por exemplo:

bash

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

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

O exemplo acima imprimirá os resultados dos testes no terminal usando o estilo padrão e os gravará em formato JSON no arquivo de saída especificado.

Ao usar múltiplos reporters, também é possível designar múltiplos arquivos de saída, da seguinte forma:

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

Este exemplo gravará relatórios JSON e XML separados, além de imprimir um relatório detalhado no terminal.

Reporters Integrados

Reporter Padrão

Por padrão (ou seja, se nenhum reporter for especificado), o Vitest exibirá os resultados de cada suíte de testes hierarquicamente durante a execução e, em seguida, os recolherá após a aprovação do conjunto. Quando todos os testes terminarem de ser executados, a saída final do terminal exibirá um resumo dos resultados e detalhes de quaisquer testes que falharam.

Exemplo de saída para testes em andamento:

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

Saída final após a conclusão dos testes:

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)

Reporter Básico

O reporter basic exibe os arquivos de teste que foram executados e um resumo dos resultados após a conclusão de todo o conjunto de testes. Testes individuais só aparecem no relatório quando falham.

CLIvitest.config.ts

bash

npx vitest --reporter=basic

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

Exemplo de saída usando o reporter básico:

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)

Reporter Detalhado

Segue a mesma estrutura hierárquica do reporter default, mas não recolhe subárvores para suítes de testes aprovadas. A saída final do terminal exibe todos os testes que foram executados, incluindo aqueles que foram aprovados.

CLIvitest.config.ts

bash

npx vitest --reporter=verbose

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

Exemplo de saída final do terminal para uma suíte de testes aprovada:

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)

Reporter Dot

Imprime um único ponto para cada teste concluído, fornecendo uma saída mínima, mas ainda mostrando todos os testes que foram executados. Detalhes são fornecidos apenas para testes que falharam, juntamente com o resumo do reporter basic para o conjunto.

CLIvitest.config.ts

bash

npx vitest --reporter=dot

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

Exemplo de saída do terminal para uma suíte de testes aprovada:

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)

Reporter JUnit

Gera um relatório dos resultados dos testes no formato XML do JUnit. Pode ser exibido no terminal ou gravado em um arquivo XML através da opção de configuração outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=junit

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

Exemplo de um relatório 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>

O XML de saída contém tags aninhadas testsuites e testcase. Você pode usar as opções do reporter para configurar esses atributos:

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

Reporter JSON

Gera um relatório dos resultados dos testes no formato JSON. Pode ser exibido no terminal ou gravado em um arquivo através da opção de configuração outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=json

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

Exemplo de um relatório 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"
    }
  ]
}

Reporter HTML

Gera um arquivo HTML para visualizar os resultados dos testes através de uma GUI interativa. Depois que o arquivo for gerado, o Vitest manterá um servidor de desenvolvimento local em execução e fornecerá um link para visualizar o relatório em um navegador.

O arquivo de saída pode ser especificado usando a opção de configuração outputFile. Se nenhuma opção outputFile for fornecida, um novo arquivo HTML será criado.

CLIvitest.config.ts

bash

npx vitest --reporter=html

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

TIP

Este reporter requer o pacote @vitest/ui instalado.

Reporter TAP

Gera um relatório seguindo o Test Anything Protocol (TAP).

CLIvitest.config.ts

bash

npx vitest --reporter=tap

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

Exemplo de um relatório 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
    }
}

Reporter TAP Flat

Gera um relatório TAP flat. Como o reporter tap, os resultados dos testes são formatados para seguir os padrões TAP, mas as suítes de testes são formatadas como uma lista plana, em vez de uma hierarquia aninhada.

CLIvitest.config.ts

bash

npx vitest --reporter=tap-flat

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

Exemplo de um relatório TAP flat:

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 Hanging Process

Exibe uma lista de processos pendentes, caso algum esteja impedindo o Vitest de ser encerrado com segurança. O reporter hanging-process não exibe os resultados dos testes diretamente, mas pode ser usado em conjunto com outro reporter para monitorar os processos durante a execução dos testes. O uso deste reporter pode ser intensivo em recursos e, portanto, geralmente deve ser reservado para debugging em situações onde o Vitest consistentemente não consegue finalizar o processo.

CLIvitest.config.ts

bash

npx vitest --reporter=hanging-process

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

Reporter Github Actions

Emite comandos de fluxo de trabalho para adicionar anotações às falhas de teste. Este reporter é habilitado automaticamente com um reporter default quando process.env.GITHUB_ACTIONS === 'true'.

Se você configurar reporters diferentes do padrão, precisará adicionar github-actions explicitamente.

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

Blob Reporter

Armazena os resultados dos testes na máquina para que possam ser mesclados posteriormente usando o comando --merge-reports. Por padrão, armazena todos os resultados na pasta .vitest-reports, mas pode ser substituído com as flags --outputFile ou --outputFile.blob.

bash

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

Recomendamos usar este reporter se você estiver executando Vitest em máquinas diferentes com a flag --shard. Todos os relatórios blob podem ser mesclados em qualquer relatório usando o comando --merge-reports no final do seu pipeline de CI:

bash

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

TIP

Tanto --reporter=blob quanto --merge-reports não funcionam no modo watch.

Reporters Personalizados

Você pode usar reporters personalizados de terceiros instalados via NPM, especificando o nome do pacote na opção 'reporters':

CLIvitest.config.ts

bash

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

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

Adicionalmente, você pode definir seus próprios repórteres personalizados e utilizá-los especificando o caminho do arquivo:

bash

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

Reporters personalizados devem implementar a interface Reporter.

Reporters ​

Saída do Reporter ​

Combinando Reporters ​

Reporters Integrados ​

Reporter Padrão ​

Reporter Básico ​

Reporter Detalhado ​

Reporter Dot ​

Reporter JUnit ​

Reporter JSON ​

Reporter HTML ​

Reporter TAP ​

Reporter TAP Flat ​

Reporter Hanging Process ​

Reporter Github Actions ​

Blob Reporter ​

Reporters Personalizados ​

Reporters

Saída do Reporter

Combinando Reporters

Reporters Integrados

Reporter Padrão

Reporter Básico

Reporter Detalhado

Reporter Dot

Reporter JUnit

Reporter JSON

Reporter HTML

Reporter TAP

Reporter TAP Flat

Reporter Hanging Process

Reporter Github Actions

Blob Reporter

Reporters Personalizados