Interfaz de Usuario de Vitest

Desarrollado con Vite, Vitest también integra un servidor de desarrollo al ejecutar las pruebas. Esto permite que Vitest ofrezca una interfaz de usuario intuitiva para visualizar e interactuar con tus pruebas. La interfaz de usuario de Vitest es opcional, por lo que deberás instalarla mediante:

npm i -D @vitest/ui

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

vitest --ui

A continuación, puedes acceder a la interfaz de usuario de Vitest en http://localhost:51204/__vitest__/

A partir de Vitest 0.26.0, la interfaz de usuario también puede utilizarse como reportero. Utiliza el reportero 'html' en tu configuración de Vitest para generar los resultados en formato HTML y previsualizar tus pruebas:

// vitest.config.ts

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

Desde Vitest 0.31.0, puedes consultar tu informe de cobertura en la interfaz de usuario de Vitest: consulta Cobertura de la Interfaz de Usuario de Vitest para obtener más detalles.

WARNING

Si deseas seguir viendo la ejecución de tus pruebas en vivo en la terminal, no olvides agregar el reportero default a la opción reporters: ['default', 'html'].

TIP

Para previsualizar tu informe HTML, puedes usar el comando vite preview:

npx vite preview --outDir ./html

Puedes definir el directorio de salida mediante la opción outputFile. Debes especificar una ruta con extensión .html. Por ejemplo, ./html/index.html es el valor predeterminado.