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:

bash

npm i -D @vitest/ui

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

bash

vitest --ui

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

A partir do Vitest 0.26.0, a interface também pode ser utilizada como um reporter. Utilize o reporter 'html' na sua configuração do Vitest para gerar um relatório HTML com os resultados dos seus testes:

// vitest.config.ts

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

Desde o Vitest 0.31.0, é possível visualizar seu relatório de cobertura de código na Vitest UI. Para mais detalhes, consulte Vitest UI Coverage.

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.

Vitest UI ​

Vitest UI