Interfaz de usuario de Vitest

Impulsado por Vite, Vitest incluye un servidor de desarrollo integrado al ejecutar las pruebas. Esto permite a Vitest ofrecer una interfaz de usuario atractiva para visualizar e interactuar con sus pruebas. La interfaz de usuario de Vitest es opcional y requiere instalación:

npm i -D @vitest/ui

Luego, puede iniciar las pruebas con la interfaz de usuario utilizando la opción --ui:

vitest --ui

Podrá acceder a la interfaz de usuario de Vitest en http://localhost:51204/__vitest__/

WARNING

La interfaz de usuario es interactiva y necesita un servidor Vite activo. Asegúrese de ejecutar Vitest en modo watch (que es el predeterminado). Alternativamente, puede generar un informe HTML estático, idéntico a la interfaz de usuario de Vitest, especificando html en la opción reporters de la configuración.

La interfaz de usuario también puede funcionar como un generador de informes. Utilice el reportero 'html' en su configuración de Vitest para generar una salida HTML y previsualizar los resultados de sus pruebas:

import { defineConfig } from 'vitest/config';

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

Puede consultar su informe de cobertura en la interfaz de usuario de Vitest. Para más detalles, consulte Cobertura de la interfaz de usuario de Vitest.

WARNING

Si desea seguir viendo la ejecución de sus pruebas en tiempo real en la terminal, no olvide incluir el reportero default en la opción reporters: ['default', 'html'].

TIP

Para previsualizar su informe HTML, puede ejecutar el comando vite preview:

npx vite preview --outDir ./html

Puede configurar la ruta de salida con la opción outputFile. Debe especificar la ruta .html allí. Por ejemplo, ./html/index.html es el valor predeterminado.