Interfaccia Utente di Vitest

Vitest, basato su Vite, include un server di sviluppo anche durante l'esecuzione dei test. Questo permette a Vitest di fornire un'interfaccia utente intuitiva per visualizzare e interagire con i tuoi test. L'interfaccia utente di Vitest è opzionale e richiede l'installazione del pacchetto @vitest/ui:

npm i -D @vitest/ui

Per avviare i test con l'interfaccia utente, utilizza il flag --ui:

vitest --ui

L'interfaccia di Vitest sarà accessibile all'indirizzo http://localhost:51204/__vitest__/

A partire dalla versione 0.26.0 di Vitest, l'interfaccia può essere utilizzata anche come reporter. Configura il reporter 'html' nella tua configurazione di Vitest per generare un output HTML e visualizzare un'anteprima dei risultati dei tuoi test:

// vitest.config.ts

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

Dalla versione 0.31.0 di Vitest, puoi visualizzare il report di copertura all'interno della Vitest UI: consulta Vitest UI Coverage per maggiori dettagli.

WARNING

Per visualizzare l'esecuzione dei test in tempo reale nel terminale, aggiungi il reporter default all'array reporters: ['default', 'html'].

TIP

Per visualizzare l'anteprima del report HTML, puoi utilizzare il comando vite preview:

npx vite preview --outDir ./html

Puoi configurare la directory di output con l'opzione di configurazione outputFile. È necessario specificare un percorso con estensione .html. Ad esempio, ./html/index.html è il valore predefinito.