Vitest UI

Desenvolvido com Vite, o Vitest inclui um servidor de desenvolvimento integrado que é ativado durante a execução dos testes. Isso permite que o Vitest ofereça uma interface de usuário (UI) intuitiva para visualizar e interagir com seus testes. A UI do Vitest é um recurso opcional e requer instalação:

npm i -D @vitest/ui

Para iniciar os testes com a UI, utilize a flag --ui:

vitest --ui

A UI do Vitest pode ser acessada em http://localhost:51204/__vitest__/

WARNING

A UI é interativa e depende de um servidor Vite em execução. Portanto, certifique-se de executar o Vitest no modo watch (que é o padrão). Alternativamente, você pode gerar um relatório HTML estático, idêntico à UI do Vitest, especificando html na opção reporters da configuração.

A UI também pode ser utilizada como um reporter. Configure o reporter 'html' em seu arquivo vitest.config.ts para gerar uma saída HTML e visualizar os resultados dos seus testes:

import { defineConfig } from 'vitest/config';

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

Você pode verificar seu relatório de cobertura na UI do Vitest. Para mais detalhes, consulte Cobertura da UI do Vitest.

WARNING

Se você deseja acompanhar a execução dos testes em tempo real no terminal, lembre-se de adicionar o reporter default à opção reporters: ['default', 'html'].

TIP

Para visualizar seu relatório HTML, você pode usar o comando vite preview:

npx vite preview --outDir ./html

Você pode configurar o diretório de saída com a opção outputFile. É necessário especificar um caminho com a extensão .html para esta opção. Por exemplo, ./html/index.html é o valor padrão.