Comparaison avec d'autres exécuteurs de tests

Jest

Jest s'est imposé dans l'écosystème des frameworks de test en offrant un support clé en main pour la plupart des projets JavaScript, une API pratique (it et expect), et l'ensemble complet des fonctionnalités de test que la plupart des configurations requièrent (snapshots, mocks, couverture). Nous sommes reconnaissants à l'équipe et à la communauté Jest d'avoir créé une API de test agréable et d'avoir fait progresser de nombreux modèles de test qui sont maintenant une norme dans l'écosystème web.

Il est possible d'utiliser Jest dans les configurations Vite. @sodatea a développé vite-jest, qui vise à fournir une intégration Vite de première classe pour Jest. Les derniers obstacles dans Jest ont été résolus, ce qui en fait une option valide pour vos tests unitaires.

Cependant, dans un monde où Vite offre un support pour les outils web les plus courants (TypeScript, JSX, les frameworks UI les plus populaires), Jest représente une complexité redondante. Si votre application est basée sur Vite, avoir deux pipelines différents à configurer et à maintenir ne se justifie pas. Avec Vitest, vous pouvez définir la configuration de vos environnements de développement, de build et de test au sein d'un pipeline unique, partageant les mêmes plugins et le même vite.config.js.

Même si votre bibliothèque n'utilise pas Vite (par exemple, si elle est construite avec esbuild ou Rollup), Vitest est une option intéressante car il vous offre une exécution plus rapide pour vos tests unitaires et un gain significatif en DX grâce au mode de surveillance par défaut utilisant le rechargement à chaud des modules (HMR) de Vite. Vitest offre une compatibilité avec la plupart des API Jest et des bibliothèques de l'écosystème, donc dans la plupart des projets, il devrait être un remplacement transparent de Jest.

Cypress

Cypress est un exécuteur de tests basé sur le navigateur et un outil complémentaire à Vitest. Si vous souhaitez utiliser Cypress, nous vous suggérons d'utiliser Vitest pour toute la logique "headless" de votre application et Cypress pour toute la logique basée sur le navigateur.

Cypress est reconnu comme un outil de test de bout en bout, mais son nouvel exécuteur de tests de composants offre un excellent support pour tester les composants Vite et est un choix idéal pour tester tout ce qui est rendu dans un navigateur.

Les exécuteurs basés sur le navigateur, tels que Cypress, WebdriverIO et Web Test Runner, détecteront des problèmes que Vitest ne peut pas résoudre car ils utilisent un navigateur réel et ses API.

Le pilote de test de Cypress est axé sur la détermination si les éléments sont visibles, accessibles et interactifs. Cypress est spécialement conçu pour le développement et le test d'interfaces utilisateur et son DX est centré sur la mise à l'épreuve de vos composants visuels par les tests. Vous voyez votre composant rendu à côté du rapport de tests. Une fois le test terminé, le composant reste interactif et vous pouvez déboguer les erreurs qui surviennent à l'aide des outils de développement de votre navigateur.

En contraste, Vitest est axé sur la fourniture de la meilleure expérience développeur possible pour des tests headless extrêmement rapides. Les exécuteurs basés sur Node comme Vitest prennent en charge divers environnements de navigateur partiellement implémentés, comme jsdom, qui implémentent suffisamment de fonctionnalités pour permettre le test unitaire rapide de tout code faisant référence aux API du navigateur. Le compromis est que ces environnements de navigateur présentent des limitations dans leur implémentation. Par exemple, jsdom manque d'un certain nombre de fonctionnalités comme window.navigation ou un moteur de mise en page (offsetTop, etc.).

Enfin, contrairement au Web Test Runner, l'exécuteur de tests Cypress ressemble plus à un IDE qu'à un exécuteur de tests car vous voyez également le composant tel qu'il est rendu dans le navigateur, ainsi que ses résultats de tests et ses logs.

Cypress a également intégré Vite dans ses solutions : reconstruire l'interface utilisateur de leur application en utilisant Vitesse et utiliser Vite pour accompagner le développement de leur projet.

Nous pensons que Cypress n'est pas une bonne option pour les tests unitaires de code "headless", mais que l'utilisation de Cypress (pour les tests E2E et de composants) et de Vitest (pour les tests unitaires) couvrirait les besoins de test de votre application.

WebdriverIO

WebdriverIO est, comme Cypress, un exécuteur de tests alternatif basé sur le navigateur et un outil complémentaire à Vitest. Il peut être utilisé comme un outil de test de bout en bout ainsi que pour tester les composants web. Il utilise même des composants de Vitest en coulisses, par exemple pour le mocking et le stubbing dans les tests de composants.

WebdriverIO offre les mêmes avantages que Cypress, en vous permettant de tester votre logique dans un véritable navigateur. Cependant, il utilise de véritables standards web pour l'automatisation, ce qui surmonte certains des compromis et des limitations lors de l'exécution de tests dans Cypress. De plus, il vous permet également d'exécuter des tests sur mobile, vous permettant de tester votre application dans encore plus d'environnements.

Web Test Runner

@web/test-runner exécute les tests dans un navigateur sans interface utilisateur (headless), fournissant le même environnement d'exécution que votre application web sans qu'il soit nécessaire de simuler les API du navigateur ou le DOM. Cela permet également de déboguer dans un vrai navigateur à l'aide des outils de développement, bien qu'aucune interface utilisateur ne soit affichée pour l'exécution pas à pas du test, comme c'est le cas dans les tests Cypress.

Pour utiliser @web/test-runner avec un projet Vite, utilisez @remcovaes/web-test-runner-vite-plugin. @web/test-runner n'inclut pas de bibliothèques d'assertion ou de mocking, il vous incombe donc de les ajouter.

uvu

uvu est un exécuteur de tests pour Node.js et le navigateur. Il exécute les tests dans un thread unique, de sorte que les tests ne sont pas isolés et peuvent interférer entre les fichiers. Vitest, cependant, utilise des threads de travail pour isoler les tests et les exécuter en parallèle.

Pour transformer votre code, uvu s'appuie sur les hooks de require et de loader. Vitest utilise Vite, de sorte que les fichiers sont transformés avec la pleine puissance du système de plugins de Vite. Dans un monde où Vite offre un support pour les outils web les plus courants (TypeScript, JSX, les frameworks UI les plus populaires), uvu représente une duplication de complexité. Si votre application est alimentée par Vite, avoir deux pipelines différents à configurer et à maintenir n'est pas justifiable. Avec Vitest, vous pouvez définir la configuration de vos environnements de développement, de build et de test comme un pipeline unique, partageant les mêmes plugins et la même configuration.

uvu ne fournit pas de mode de surveillance intelligent pour réexécuter les tests modifiés, tandis que Vitest vous offre une excellente expérience développeur grâce au mode de surveillance par défaut utilisant le rechargement instantané à chaud des modules (HMR) de Vite.

uvu est une solution rapide pour exécuter des tests simples, mais Vitest peut être plus rapide et plus fiable pour des tests et des projets plus complexes.