Vitest UI

Basato su Vite, Vitest include un server di sviluppo integrato che si attiva durante l'esecuzione dei test. Questo permette a Vitest di offrire un'interfaccia utente (UI) ben progettata per visualizzare e interagire con i test. La Vitest UI è opzionale e richiede un'installazione separata:

bash

npm i -D @vitest/ui

Successivamente, puoi avviare i test con l'UI utilizzando il flag --ui:

bash

vitest --ui

Potrai quindi accedere alla Vitest UI all'indirizzo http://localhost:51204/__vitest__/

WARNING

L'UI è interattiva e necessita di un server Vite attivo. Assicurati di eseguire Vitest in modalità watch (che è quella predefinita). In alternativa, puoi generare un report HTML statico, identico alla Vitest UI, specificando html nell'opzione reporters della configurazione.

L'UI può essere utilizzata anche come reporter. Configura il reporter 'html' nella tua configurazione Vitest per generare un output HTML e visualizzare in anteprima i risultati dei tuoi test:

import { defineConfig } from 'vitest/config';

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

È possibile consultare il report di copertura all'interno della Vitest UI: per maggiori dettagli, vedi Copertura Vitest UI.

WARNING

Se desideri comunque visualizzare l'esecuzione dei tuoi test in tempo reale nel terminale, non dimenticare di aggiungere il reporter default all'opzione reporters: ['default', 'html'].

TIP

Per l'anteprima del report HTML, è possibile utilizzare il comando vite preview:

npx vite preview --outDir ./html

È possibile configurare il percorso di output con l'opzione di configurazione outputFile. È necessario specificare il percorso .html in tale opzione. Ad esempio, ./html/index.html è il valore predefinito.

Vitest UI ​

Vitest UI