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

La interfaz de usuario también se puede usar como un reportero. Usa el reportero 'html' en tu configuración de Vitest para generar salida HTML y previsualizar los resultados de tus pruebas:

// vitest.config.ts

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

Puede verificar su informe de cobertura en la interfaz de usuario de Vitest: consulte 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.