Publié le 5 décembre 2023. Vitest, le framework de test conçu pour fonctionner avec Vite, vient de lancer sa version 4.0, apportant des améliorations significatives en matière de tests navigateurs, de détection visuelle des régressions et de l’expérience globale des développeurs.
- La version 4.0 stabilise le mode navigateur, permettant des tests dans de vrais navigateurs.
- L’intégration native de tests de régression visuelle simplifie la détection des changements d’interface utilisateur.
- Des outils de débogage améliorés, notamment l’intégration de Playwright Traces, facilitent l’identification et la résolution des problèmes.
Vitest 4.0 marque une étape importante pour le framework, en particulier avec la sortie officielle du mode navigateur. Longtemps disponible en version expérimentale, cette fonctionnalité permet désormais aux développeurs d’exécuter leurs tests non pas dans des environnements simulés comme jsdom ou Happy DOM, mais directement dans des navigateurs réels. Cela garantit des résultats plus fiables et une meilleure représentation du comportement de l’application en conditions réelles.
Pour profiter du mode navigateur, les utilisateurs devront installer des packages spécifiques, tels que @vitest/browser-playwright, @vitest/browser-webdriverio ou @vitest/browser-preview. Ce changement, selon l’équipe Vitest, simplifie la configuration et offre une plus grande flexibilité pour personnaliser l’environnement de test.
Parallèlement, Vitest 4.0 intègre nativement des tests de régression visuelle grâce à la nouvelle assertion toMatchScreenshot. Cette fonctionnalité permet de capturer des captures d’écran des composants et des pages web, puis de les comparer à des images de référence afin de détecter les modifications visuelles non intentionnelles. Un autre nouvel outil, toBeInViewport, permet de vérifier si un élément est visible dans la fenêtre du navigateur en utilisant l’API IntersectionObserver.
L’intégration de Playwright Traces offre également des capacités de débogage avancées. Les développeurs peuvent activer le traçage en configurant l’option trace dans leur fichier de configuration ou en utilisant l’indicateur browser.trace avec différentes options (activé, désactivé, lors de la première tentative, lors de toutes les tentatives, conservation en cas d’échec). Ces traces peuvent ensuite être visualisées à l’aide du Playwright Trace Viewer, facilitant ainsi l’analyse des problèmes.
L’extension VS Code a été mise à jour pour inclure un bouton “Debug Test” lors de l’exécution de tests navigateurs, améliorant ainsi l’expérience de débogage. Il est également possible de démarrer Vitest avec l’indicateur d’inspection pour se connecter manuellement aux outils de développement du navigateur lors de l’utilisation de Playwright ou WebdriverIO.
Des modifications ont également été apportées aux rapports de test. Le rapporteur de base a été supprimé et peut être remplacé par le rapporteur par défaut en définissant summary: false. Le rapporteur par défaut affiche désormais les tests sous forme d’arborescence uniquement lors de l’exécution d’un seul fichier, tandis qu’un nouveau rapporteur d’arborescence est disponible pour ceux qui préfèrent toujours cette vue. Le rapporteur détaillé affiche désormais les tests un par un une fois terminés, un comportement qui était auparavant limité aux environnements d’intégration continue (CI).
La communauté a accueilli favorablement cette nouvelle version. Un utilisateur de Reddit a souligné que l’intégration native des tests de régression visuelle réduit la dépendance à des outils tiers comme Percy ou Chromatic. Il a également salué les améliorations de l’expérience développeur, notant que les performances du mode “show” sont supérieures à celles de Jest et que Vitest se positionne désormais comme une solution de test plus complète.
Cependant, certains développeurs ont rencontré des problèmes lors de la mise à niveau, notamment une erreur TypeScript lors de l’utilisation de Vitest 4.x avec des versions de Vite antérieures à 7.1.0. Ce problème, lié à une propriété manquante createImportMeta, affecte uniquement les projets utilisant TypeScript. L’équipe Vitest a reconnu ce bug et travaille à sa résolution.
Vitest a publié un guide de migration détaillé pour aider les développeurs à effectuer la transition depuis les versions précédentes. La liste complète des modifications est disponible dans le journal des modifications de Vitest 4 sur GitHub.
Selon le blog VoidZero, l’utilisation de Vitest a doublé au cours de l’année écoulée, passant de 7 millions à 17 millions de téléchargements hebdomadaires. Vitest est un framework de test open source conçu à l’origine pour les projets Vite, mais il peut également être utilisé de manière indépendante. Il offre une compatibilité avec l’API Jest, incluant des fonctionnalités d’attente, de comparaison d’instantanés et de couverture de code, avec un support natif pour ESM, TypeScript et JSX optimisé par esbuild.