Interface utilisateur de Vitest

Propulsé par Vite, Vitest intègre un serveur de développement lors de l'exécution des tests. Cela lui permet de proposer une interface utilisateur claire pour visualiser et interagir avec vos tests. L'interface utilisateur de Vitest est facultative et doit être installée séparément :

npm i -D @vitest/ui

Pour démarrer les tests avec l'interface utilisateur, utilisez l'option --ui :

vitest --ui

Vous pourrez ensuite accéder à l'interface utilisateur de Vitest à l'adresse http://localhost:51204/__vitest__/.

WARNING

L'interface utilisateur est interactive et requiert un serveur Vite actif. Assurez-vous donc d'exécuter Vitest en mode watch (qui est le mode par défaut). Alternativement, vous pouvez générer un rapport HTML statique, identique à l'interface utilisateur de Vitest, en spécifiant html dans l'option reporters de votre configuration.

L'interface utilisateur peut également servir de générateur de rapports. Utilisez le rapporteur 'html' dans votre configuration Vitest pour générer une sortie HTML et visualiser les résultats de vos tests :

import { defineConfig } from 'vitest/config';

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

Vous pouvez consulter votre rapport de couverture directement dans l'interface utilisateur de Vitest. Pour plus de détails, consultez la section Couverture de l'interface utilisateur de Vitest.

WARNING

Si vous souhaitez également voir l'exécution de vos tests en temps réel dans le terminal, n'oubliez pas d'ajouter le rapporteur default à l'option reporters : ['default', 'html'].

TIP

Pour prévisualiser votre rapport HTML, vous pouvez utiliser la commande vite preview :

npx vite preview --outDir ./html

Vous pouvez personnaliser le chemin de sortie avec l'option de configuration outputFile. Vous devez y spécifier un chemin de fichier .html. Par exemple, ./html/index.html est la valeur par défaut.