Interface utilisateur de Vitest

Propulsé par Vite, Vitest intègre un serveur de développement qui s'exécute en arrière-plan pendant l'exécution des tests. Cela permet à Vitest de fournir une interface utilisateur (UI) pour visualiser et interagir avec vos tests. L'interface utilisateur de Vitest est optionnelle et doit être installée séparément :

npm i -D @vitest/ui

Pour lancer les tests avec l'interface utilisateur, utilisez l'option --ui :

vitest --ui

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

L'interface utilisateur peut également être utilisée comme rapporteur. Utilisez le rapporteur 'html' dans votre configuration Vitest pour générer une sortie HTML et prévisualiser les résultats de vos tests :

// vitest.config.ts

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

Vous pouvez consulter votre rapport de couverture dans Vitest UI : voir Couverture de l'interface utilisateur Vitest pour plus de détails.

WARNING

Pour continuer à afficher l'exécution de vos tests en temps réel dans le terminal, assurez-vous 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 configurer le fichier de sortie avec l'option de configuration outputFile. Vous devez spécifier un chemin se terminant par .html. Par exemple, ./html/index.html est la valeur par défaut.