Reportes

Vitest ofrece varios reportes integrados para visualizar los resultados de las pruebas en distintos formatos, además de la posibilidad de utilizar reportes personalizados. Puede seleccionar diferentes reportes mediante la opción de línea de comandos --reporter o incluyendo una propiedad reporters en su archivo de configuración. Si no se especifica ningún reporte, Vitest utilizará el reporte default como se describe a continuación.

Uso de reportes desde la línea de comandos:

bash

npx vitest --reporter=verbose

Uso de reportes mediante vitest.config.ts:

import { defineConfig } from 'vitest/config';

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

Algunos reportes pueden personalizarse pasándoles opciones adicionales. Las opciones específicas de cada reporte se detallan en las secciones siguientes.

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

Salida de los reportes

Por defecto, los reportes de Vitest imprimirán su salida en la terminal. Al usar los reportes json, html o junit, puede escribir la salida de sus pruebas en un archivo incluyendo la opción de configuración outputFile en su archivo de configuración de Vite o a través de la CLI.

CLIvitest.config.ts

bash

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

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

Combinación de reportes

Puede utilizar varios reportes simultáneamente para imprimir los resultados de sus pruebas en diferentes formatos. Por ejemplo:

bash

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

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

El ejemplo anterior imprimirá los resultados de la prueba en la terminal con el estilo predeterminado y los escribirá como JSON en el archivo de salida designado.

Al usar varios reportes, también es posible designar múltiples archivos de salida, de la siguiente manera:

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

Este ejemplo escribirá reportes JSON y XML separados, además de imprimir un reporte detallado en la terminal.

Reportes integrados

Reporte predeterminado

Por defecto (es decir, si no se especifica ningún reporte), Vitest mostrará un resumen de las pruebas en ejecución y su estado en la parte inferior. Una vez que un conjunto de pruebas finaliza, su estado se mostrará en la parte superior del resumen.

Puede deshabilitar el resumen configurando el reporte:

vitest.config.ts

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

Ejemplo de salida para pruebas en curso:

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

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

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)

Reporte básico

El reportero basic es equivalente al reportero default sin summary.

CLIvitest.config.ts

bash

npx vitest --reporter=basic

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

Ejemplo de salida usando el reporte 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)

Reporte detallado

El reporte detallado es el mismo que el reporte default, pero también muestra cada prueba individual después de que el conjunto de pruebas ha terminado. También muestra las pruebas que se están ejecutando actualmente y que están tardando más de slowTestThreshold. Similar al reporte default, puede deshabilitar el resumen configurando el reporte.

CLIvitest.config.ts

bash

npx vitest --reporter=verbose

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

Ejemplo de salida para pruebas en curso con slowTestThreshold: 300 predeterminado:

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

Ejemplo de salida final de la terminal para un conjunto de pruebas que pasa:

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)

Reporte de puntos

Imprime un solo punto por cada prueba completada para proporcionar una salida mínima a la vez que muestra todas las pruebas que se han ejecutado. Los detalles solo se proporcionan para las pruebas fallidas, junto con el resumen del reporte basic para el conjunto de pruebas.

CLIvitest.config.ts

bash

npx vitest --reporter=dot

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

Ejemplo de salida de la terminal para un conjunto de pruebas que pasa:

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)

Reporte JUnit

Genera un reporte de los resultados de la prueba en formato XML de JUnit. Se puede imprimir en la terminal o escribir en un archivo XML usando la opción de configuración outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=junit

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

Ejemplo de un reporte XML de 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 de salida contiene etiquetas testsuites y testcase anidadas. Estas también se pueden personalizar a través de las opciones del reporte suiteName y classnameTemplate. classnameTemplate puede ser una cadena de plantilla o una función.

Los marcadores de posición admitidos para la opción classnameTemplate son:

filename (nombre de archivo)
filepath (ruta de archivo)

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

Reporte JSON

Genera un reporte de los resultados de la prueba en un formato JSON compatible con la opción --json de Jest. Se puede imprimir en la terminal o escribir en un archivo usando la opción de configuración outputFile.

CLIvitest.config.ts

bash

npx vitest --reporter=json

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

Ejemplo de un reporte 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"
    }
  ],
  "coverageMap": {}
}

INFO

Desde Vitest 3, el reporte JSON incluye información de cobertura en coverageMap si la cobertura está habilitada.

Reporte HTML

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

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

CLIvitest.config.ts

bash

npx vitest --reporter=html

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

TIP

Este reporte requiere el paquete @vitest/ui instalado.

Reporte TAP

Genera un reporte siguiendo el Protocolo de Prueba de Cualquier Cosa (TAP).

CLIvitest.config.ts

bash

npx vitest --reporter=tap

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

Ejemplo de un reporte 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
    }
}

Reporte TAP plano

Genera un reporte TAP plano. Al igual que el reporte 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.

CLIvitest.config.ts

bash

npx vitest --reporter=tap-flat

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

Ejemplo de un reporte TAP plano:

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

Reporte de procesos bloqueados

Muestra una lista de procesos bloqueados, si los hay, que impiden que Vitest finalice de forma segura. El reporte hanging-process no muestra los resultados de las pruebas por sí mismo, pero se puede usar junto con otro reporte para monitorear los procesos mientras se ejecutan las pruebas. El uso de este reporte puede consumir muchos recursos, por lo que generalmente debe reservarse para fines de depuración en situaciones en las que Vitest no puede salir del proceso de forma consistente.

CLIvitest.config.ts

bash

npx vitest --reporter=hanging-process

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

Reporte de GitHub Actions

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

Si configura reportes no predeterminados, debe agregar explícitamente github-actions.

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

Puede personalizar las rutas de archivo que se imprimen en el formato de comando de anotación de GitHub usando la opción onWritePath. Esto es útil cuando se ejecuta Vitest en un entorno en contenedores, como Docker, donde las rutas de archivo pueden no coincidir con las rutas en el entorno de GitHub Actions.

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

Reporte Blob

Almacena los resultados de las pruebas en la máquina para que puedan fusionarse más tarde usando el comando --merge-reports. Por defecto, almacena todos los resultados en la carpeta .vitest-reports, pero se puede anular con las banderas --outputFile o --outputFile.blob.

bash

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

Recomendamos usar este reporte si está ejecutando Vitest en diferentes máquinas con la bandera --shard. Todos los reportes blob se pueden fusionar en cualquier reporte usando el comando --merge-reports al final de su pipeline de CI:

bash

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

TIP

Tanto --reporter=blob como --merge-reports no funcionan en modo de observación.

Reportes personalizados

Puede usar reportes personalizados de terceros instalados desde NPM especificando su nombre de paquete en la opción de reportes:

CLIvitest.config.ts

bash

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

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

Además, puede definir sus propios reportes personalizados y usarlos especificando su ruta de archivo:

bash

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

Los reportes personalizados deben implementar la interfaz Reporter.

Reportes ​

Salida de los reportes ​

Combinación de reportes ​

Reportes integrados ​

Reporte predeterminado ​

Reporte básico ​

Reporte detallado ​

Reporte de puntos ​

Reporte JUnit ​

Reporte JSON ​

Reporte HTML ​

Reporte TAP ​

Reporte TAP plano ​

Reporte de procesos bloqueados ​

Reporte de GitHub Actions ​

Reporte Blob ​

Reportes personalizados ​

Reportes

Salida de los reportes

Combinación de reportes

Reportes integrados

Reporte predeterminado

Reporte básico

Reporte detallado

Reporte de puntos

Reporte JUnit

Reporte JSON

Reporte HTML

Reporte TAP

Reporte TAP plano

Reporte de procesos bloqueados

Reporte de GitHub Actions

Reporte Blob

Reportes personalizados