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__/

L'interfaccia utente può anche essere usata come reporter. Usa il reporter 'html' nella tua configurazione Vitest per generare output HTML e visualizzare in anteprima i risultati dei tuoi test:

// vitest.config.ts

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

Puoi controllare il tuo rapporto di copertura in Vitest UI: vedi Copertura UI di Vitest 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.