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

Depuis Vitest 0.26.0, l'interface utilisateur peut également servir de rapporteur de tests. Définissez le rapporteur 'html' dans votre configuration Vitest pour générer un rapport HTML et visualiser les résultats de vos tests :

// vitest.config.ts

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

Depuis Vitest 0.31.0, vous pouvez consulter votre rapport de couverture de code directement dans l'interface utilisateur de Vitest. Consultez la section Couverture dans l'interface utilisateur de Vitest pour plus d'informations.

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.