Comparaisons avec d’autres runners de tests

Jest

Jest a pris le relais dans l’espace des frameworks de tests en offrant un support prêt à l’emploi pour la plupart des projets JavaScript, une API confortable (it et expect), et un ensemble complet de fonctionnalités de test dont la plupart des configurations ont besoin (snapshots, mocks, couverture). Nous remercions l’équipe et la communauté de Jest pour avoir créé une API de test agréable et pour avoir fait avancer beaucoup des modèles de tests qui sont maintenant une norme dans l’écosystème web.

Il est possible d’utiliser Jest dans des configurations Vite. @sodatea a construit vite-jest, qui vise à fournir une intégration de premier ordre pour Jest. Les derniers bloqueurs dans Jest ont été résolus, donc c’est une option valide pour vos tests unitaires.

Cependant, dans un monde où nous avons Vite fournissant un support pour les outils web les plus courants (TypeScript, JSX, les frameworks UI les plus populaires), Jest 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 définissez la configuration pour vos environnements de développement, de construction et de test en un seul pipeline, partageant les mêmes plugins et le même fichier 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 bond en DX grâce au mode watch par défaut utilisant le rechargement à chaud instantané de Vite (HMR). Vitest offre une compatibilité avec la plupart de l’API Jest et des bibliothèques de l’écosystème, donc dans la plupart des projets, cela devrait être un remplacement direct pour Jest.

Cypress

Cypress est un runner 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 sans interface de votre application et Cypress pour toute la logique basée sur le navigateur.

Cypress est connu comme un outil de test de bout en bout, mais leur nouveau runner de tests de composants a un excellent support pour tester les composants Vite et est un choix idéal pour tester tout ce qui se rend dans un navigateur.

Les runners basés sur le navigateur, comme Cypress, WebdriverIO et Web Test Runner, détecteront des problèmes que Vitest ne peut pas car ils utilisent le véritable navigateur et les véritables API de navigateur.

Le driver de test de Cypress se concentre sur la détermination si les éléments sont visibles, accessibles et interactifs. Cypress est spécialement conçu pour le développement et les tests d’UI et son DX est centré sur la conduite de vos composants visuels. Vous voyez votre composant rendu aux côtés du rapporteur de test. Une fois le test terminé, le composant reste interactif et vous pouvez déboguer toute défaillance qui se produit en utilisant les outils de développement de votre navigateur.

En revanche, Vitest se concentre sur la délivrance du meilleur DX possible pour des tests sans interface à la vitesse de l’éclair. Les runners basés sur Node, comme Vitest, soutiennent divers environnements de navigateur partiellement mis en œuvre, comme jsdom, qui mettent en œuvre suffisamment pour vous permettre de tester rapidement unité par unité tout code qui référence les API de navigateur. Le compromis est que ces environnements de navigateur ont des limitations dans ce qu’ils peuvent mettre en œuvre. Par exemple, jsdom manque de plusieurs fonctionnalités telles que window.navigation ou un moteur de disposition (offsetTop, etc).

Enfin, par rapport à Web Test Runner, le runner de test Cypress est plus semblable à un IDE qu’à un runner de test car vous voyez également le composant rendu en temps réel dans le navigateur, avec ses résultats de test et ses journaux.

Cypress a également été intégré à Vite dans leurs produits : reconstruction de l’UI de leur application en utilisant Vitesse et utilisation de Vite pour conduire le développement de leur projet.

Nous croyons que Cypress n’est pas une bonne option pour les tests unitaires de code sans interface, 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, similaire à Cypress, une alternative de runner de test basée sur le navigateur et un outil complémentaire à Vitest. Il peut être utilisé comme outil de test de bout en bout ainsi que pour tester des composants web. Il utilise même des composants de Vitest sous le capot, par exemple pour les mocks et les stubs au sein des tests de composants.

WebdriverIO offre les mêmes avantages que Cypress, vous permettant de tester votre logique dans un vrai navigateur. Cependant, il utilise de véritables normes 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 d’exécuter des tests sur mobile également, vous donnant accès à tester votre application dans encore plus d’environnements.

Web Test Runner

@web/test-runner exécute des tests dans un navigateur sans interface, fournissant le même environnement d’exécution que votre application web sans avoir besoin de simuler des API de navigateur ou le DOM. Cela rend également possible le débogage à l’intérieur d’un vrai navigateur en utilisant les outils de développement, bien qu’il n’y ait pas d’interface utilisateur affichée pour passer à travers le 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 simulation, il vous revient donc de les ajouter.

uvu

uvu est un runner de tests pour Node.js et le navigateur. Il exécute des tests dans un seul thread, donc les tests ne sont pas isolés et peuvent fuir 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 des require et des hooks de loaders. Vitest utilise Vite, donc les fichiers sont transformés avec toute la puissance du système de plugins de Vite. Dans un monde où nous avons Vite fournissant 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 définissez la configuration pour vos environnements de développement, de construction et de test en un seul pipeline, partageant les mêmes plugins et la même configuration.

uvu n’offre pas un mode watch intelligent pour relancer les tests modifiés, tandis que Vitest vous offre un DX incroyable grâce au mode watch par défaut utilisant le rechargement à chaud instantané de Vite (HMR).

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