Informes

Vitest proporciona varios reporters incorporados para mostrar los resultados de las pruebas en diferentes formatos, así como la capacidad de utilizar reporters personalizados. Puedes seleccionar diferentes informes usando la opción de línea de comandos --reporter, o incluyendo la propiedad reporters en tu archivo de configuración. Si no se especifica ningún informe, Vitest utilizará el reporter default, como se describe a continuación.

Usando reporters a través de la línea de comandos:

npx vitest --reporter=verbose

Usando reporters a través de vitest.config.ts:

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

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

Algunos informes se pueden personalizar pasando opciones adicionales. Las opciones específicas de cada reporter se describen en las secciones siguientes.

TIP

Desde Vitest v1.3.0

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

Salida del Informe

Por defecto, los reporters de Vitest imprimirán su salida en la terminal. Cuando se utilizan los reporters json, html o junit, puedes optar por escribir la salida de tus pruebas en un archivo incluyendo la opción de configuración outputFile [../config/#outputfile] tanto en tu archivo de configuración de Vite como mediante la CLI.

CLI

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

vitest.config.ts

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

Combinando Reporters

Puedes utilizar múltiples reporters simultáneamente para imprimir los resultados de tus pruebas en diferentes formatos. Por ejemplo:

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

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

El ejemplo anterior imprimirá los resultados de las pruebas en la terminal con el estilo predeterminado y los guardará como JSON en el archivo de salida especificado.

Cuando se utilizan múltiples reporters, también es posible especificar múltiples archivos de salida, como se muestra a continuación:

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

Este ejemplo guardará informes JSON y XML separados, además de imprimir un informe detallado en la terminal.

Reporters Incorporados

Informe Predeterminado (Default Reporter)

De forma predeterminada (si no se especifica ningún informe), Vitest mostrará los resultados de cada conjunto de pruebas jerárquicamente a medida que se ejecutan. Una vez que un conjunto de pruebas se completa con éxito, los resultados se contraen. Cuando todas las pruebas hayan terminado de ejecutarse, la salida final de la terminal mostrará un resumen de los resultados y los detalles de cualquier prueba fallida.

Ejemplo de salida para las pruebas en progreso:

✓ __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

Salida final después de que las pruebas hayan terminado:

✓ __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)

Informe Básico (Basic Reporter)

El reporter basic muestra los archivos de prueba que se han ejecutado y un resumen de los resultados después de que todo el conjunto ha terminado de ejecutarse. Las pruebas individuales no se incluyen en el informe a menos que fallen.

CLI

npx vitest --reporter=basic

vitest.config.ts

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

Ejemplo de salida usando el reporter básico:

✓ __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)

Informe Detallado (Verbose Reporter)

Sigue la misma estructura jerárquica que el reporter default, pero no contrae los subárboles para los conjuntos de pruebas que se completan con éxito. La salida final de la terminal muestra todas las pruebas que se han ejecutado, incluyendo aquellas que han pasado.

CLI

npx vitest --reporter=verbose

vitest.config.ts

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

Ejemplo de salida final de la terminal para un conjunto de pruebas que se completa con éxito:

✓ __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)

Informe de Puntos (Dot Reporter)

Imprime un solo punto por cada prueba completada para proporcionar una salida mínima, mostrando aún todas las pruebas que se han ejecutado. Los detalles sólo se proporcionan para las pruebas fallidas, junto con el resumen del reporter basic para el conjunto.

CLI

npx vitest --reporter=dot

vitest.config.ts

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

Ejemplo de salida de la terminal para un conjunto de pruebas que se completa con éxito:

....

 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)

Informe JUnit

Genera un informe de los resultados de las pruebas en formato JUnit XML. Puede imprimirse en la terminal o guardarse en un archivo XML utilizando la opción de configuración outputFile.

CLI

npx vitest --reporter=junit

vitest.config.ts

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

Ejemplo de un informe JUnit 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>

El XML generado contiene etiquetas anidadas testsuites y testcase. Puedes utilizar las variables de entorno VITEST_JUNIT_SUITE_NAME y VITEST_JUNIT_CLASSNAME para configurar sus atributos name y classname, respectivamente. Estos también pueden personalizarse a través de las opciones del reporter:

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

Informe JSON

Genera un informe de los resultados de las pruebas en formato JSON. Puede imprimirse en la terminal o guardarse en un archivo utilizando la opción de configuración outputFile.

CLI

npx vitest --reporter=json

vitest.config.ts

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

Ejemplo de un informe 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"
    }
  ]
}

Informe HTML

Genera un archivo HTML para ver los resultados de las pruebas a través de una GUI interactiva. Después de que el archivo ha sido generado, Vitest mantendrá un servidor de desarrollo local en ejecución y proporcionará un enlace al informe en un navegador.

El archivo de salida puede especificarse utilizando la opción de configuración outputFile. Si no se proporciona ninguna opción outputFile, se creará un nuevo archivo HTML.

CLI

npx vitest --reporter=html

vitest.config.ts

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

TIP

Este reporter requiere el paquete @vitest/ui instalado.

Informe TAP

Genera un informe siguiendo el Test Anything Protocol (TAP).

CLI

npx vitest --reporter=tap

vitest.config.ts

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

Ejemplo de un informe TAP:

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
    }
}

Informe TAP Plano (TAP Flat Reporter)

Genera un informe TAP plano. Al igual que el reporter tap, los resultados de las pruebas se formatean para seguir los estándares TAP, pero los conjuntos de pruebas se formatean como una lista plana en lugar de una jerarquía anidada.

CLI

npx vitest --reporter=tap-flat

vitest.config.ts

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

Ejemplo de un informe TAP plano:

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

Informe de Proceso Colgante (Hanging Process Reporter)

Muestra una lista de procesos colgantes, si hay alguno que impida que Vitest finalice correctamente. El reporter hanging-process no muestra los resultados de las pruebas en sí, pero puede utilizarse en conjunto con otro reporter para monitorear los procesos mientras las pruebas se ejecutan. El uso de este reporter puede ser intensivo en recursos, por lo que debería utilizarse únicamente para depuración en situaciones donde Vitest no puede salir del proceso de forma consistente.

CLI

npx vitest --reporter=hanging-process

vitest.config.ts

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

Informe de Acciones de Github (Github Actions Reporter) 1.3.0+

Emite comandos de flujo de trabajo para proporcionar anotaciones para los fallos de las pruebas. Este reporter se activa automáticamente con un reporter default cuando process.env.GITHUB_ACTIONS === 'true'.

Si configuras reporters no predeterminados, necesitas incluir explícitamente github-actions.

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

Reporters Personalizados

Puedes utilizar reporters personalizados de terceros instalados desde NPM especificando el nombre del paquete en la opción de informes:

CLI

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

vitest.config.ts

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

Además, puedes definir tus propios informes personalizados y utilizarlos especificando la ruta del archivo:

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

Los informes personalizados deben implementar la interfaz Reporter.