Comparaison avec d'autres outils de test

Jest

Jest s'est imposé comme un framework de test dominant en fournissant une prise en charge prête à l'emploi pour la plupart des projets JavaScript, une API simple d'utilisation (avec it et expect), et l'ensemble complet des fonctionnalités de test nécessaires à la plupart des configurations (snapshots, mocks, couverture). Nous remercions l'équipe et la communauté Jest pour avoir créé une API de test agréable et pour 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 créé vite-jest, qui vise à fournir une intégration Vite de première classe pour Jest. Les limitations récentes de Jest ayant été levées, c'est donc une option valide pour vos tests unitaires.

Cependant, dans un contexte où Vite prend en charge les outils web les plus courants (TypeScript, JSX, la plupart des frameworks d'interface utilisateur populaires), Jest introduit une complexité redondante. Si votre application est alimentée par Vite, il n'est pas justifié d'avoir deux pipelines différents à configurer et à maintenir. Avec Vitest, vous pouvez définir la configuration de vos environnements de développement, de construction et de test comme 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 elle offre une exécution plus rapide de vos tests unitaires et une meilleure expérience développeur grâce au mode watch par défaut utilisant le Hot Module Reload (HMR) instantané 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 direct de Jest.

Cypress

Cypress est un exécuteur de tests basé sur un 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 un navigateur.

Cypress est reconnu comme un outil de test de bout en bout, mais son nouvel exécuteur de tests de composants offre une excellente prise en charge des tests de composants Vite et est un choix idéal pour tester tout ce qui s'affiche dans un navigateur.

Les outils de test basés sur un navigateur, comme Cypress, WebdriverIO et Web Test Runner, peuvent identifier des problèmes que Vitest ne détectera pas, car ils utilisent un navigateur réel et ses API.

Le moteur de test de Cypress se concentre sur la détermination de la visibilité, de l'accessibilité et de l'interactivité des éléments. Cypress est spécialement conçu pour le développement et le test d'interface utilisateur, et son expérience développeur est centrée sur le test de vos composants visuels. Vous voyez votre composant rendu à côté du rapport de test. Une fois le test terminé, le composant reste interactif et vous pouvez déboguer les échecs à l'aide des outils de développement de votre navigateur.

En revanche, Vitest se concentre sur la fourniture de la meilleure expérience développeur possible pour des tests sans interface ultra-rapides. Les exécuteurs basés sur Node comme Vitest prennent en charge divers environnements de navigateur partiellement implémentés, tel que jsdom, qui offre une implémentation suffisante pour tester rapidement le code utilisant les API du navigateur. L'inconvénient est que ces environnements de navigateur ont des limitations quant à ce qu'ils peuvent implémenter. 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 davantage à un IDE qu'à un simple exécuteur de tests, car vous voyez également le composant rendu réel dans le navigateur, ainsi que ses résultats de test et ses journaux.

Cypress a également intégré Vite dans ses produits, notamment en reconstruisant l'interface utilisateur de son application avec Vitesse et en utilisant Vite pour le développement de ses projets.

Nous pensons que Cypress n'est pas une bonne option pour les tests unitaires de code sans interface graphique, mais que l'utilisation conjointe 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 un 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 en interne des composants de Vitest, par exemple pour le mocking et le stubbing dans les tests de composants.

WebdriverIO offre les mêmes avantages que Cypress, en permettant de tester la logique dans un navigateur réel. Cependant, il utilise les standards web réels 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 permettant de tester votre application dans encore plus d'environnements.

Web Test Runner

Web Test Runner exécute les tests à l'intérieur d'un navigateur headless, offrant le même environnement d'exécution que votre application web sans avoir besoin 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 parcourir le test, comme c'est le cas avec Cypress. Il existe un mode watch, mais il n'est pas aussi performant que celui de Vitest, et il ne relance pas toujours les tests souhaités.

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 seul thread, de sorte que les tests ne sont pas isolés et peuvent interférer entre les fichiers. Vitest, cependant, utilise des threads worker pour isoler les tests et les exécuter en parallèle.

Pour transformer votre code, uvu s'appuie sur require et les hooks de loader. Vitest utilise Vite, en tirant pleinement parti du système de plugins de Vite. Dans un contexte où Vite prend en charge les outils web les plus courants (TypeScript, JSX, la plupart des frameworks d'interface utilisateur populaires), uvu introduit une complexité redondante. Si votre application est alimentée par Vite, il n'est pas justifié d'avoir deux pipelines différents à configurer et à maintenir. Avec Vitest, vous pouvez définir la configuration de vos environnements de développement, de construction et de test comme un pipeline unique, partageant les mêmes plugins et le même configuration.

uvu ne fournit pas de mode watch intelligent pour relancer les tests modifiés, tandis que Vitest vous offre une expérience développeur incroyable grâce au mode watch par défaut utilisant le Hot Module Reload (HMR) instantané de Vite.

uvu est une solution rapide pour des tests simples, mais Vitest peut s'avérer plus rapide et plus fiable pour des tests plus complexes et des projets de plus grande envergure.