Vitest UI

Por ser baseado no Vite, o Vitest também executa um servidor de desenvolvimento em segundo plano durante os testes. Isso permite que o Vitest ofereça uma interface visual para inspecionar e interagir com seus testes. A interface do Vitest é opcional e precisa ser instalada separadamente:

npm i -D @vitest/ui

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

vitest --ui

A Vitest UI estará disponível em http://localhost:51204/__vitest__/

A interface do usuário também pode ser usada como um relatório. Use o relatório 'html' na sua configuração do Vitest para gerar a saída HTML e pré-visualizar os resultados dos seus testes:

// vitest.config.ts

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

Você pode verificar seu relatório de cobertura na interface do usuário do Vitest: consulte Cobertura da Interface do Usuário do Vitest para obter mais detalhes.

WARNING

Se você deseja continuar acompanhando a execução dos seus testes em tempo real no terminal, adicione o reporter default à opção reporters: ['default', 'html'].

TIP

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

npx vite preview --outDir ./html

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