Aller au contenu principal

Introduction

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Vue Testing Library s'appuie sur DOM Testing Library en ajoutant des APIs pour travailler avec des composants Vue. Elle est construite sur @vue/test-utils, la bibliothèque de test officielle pour Vue.

En bref, Vue Testing Library accomplit trois choses :

  1. Réexporte les utilitaires de requête et les helpers de DOM Testing Library.

  2. Masque les méthodes de @vue/test-utils qui entrent en conflit avec le Principe directeur de Testing Library.

  3. Ajuste certaines méthodes des deux sources.

Démarrage rapide​

Si vous utilisez Vue2

npm install --save-dev @testing-library/vue@5

Si vous utilisez Vue3

npm install --save-dev @testing-library/vue

Vous pouvez désormais utiliser toutes les commandes getBy, getAllBy, queryBy et queryAllBy de DOM Testing Library. Consultez la liste complète des requêtes.

Vous pourriez également installer @testing-library/jest-dom pour bénéficier des matchers personnalisés Jest pour le DOM.

Le problème​

Vous souhaitez écrire des tests maintenables pour vos composants Vue. Dans cette optique, vous voulez que vos tests évitent les détails d'implémentation de vos composants. Vous préférez vous concentrer sur la capacité de vos tests à vous donner la confiance attendue.

Cette solution​

Vue Testing Library est une solution extrêmement légère pour tester des composants Vue. Elle fournit des fonctions utilitaires minimales basées sur @vue/test-utils, encourageant ainsi de meilleures pratiques de test.

Son principe directeur fondamental est :

Plus vos tests ressemblent à la façon dont votre logiciel est utilisé, plus ils vous donnent de confiance.

Ainsi, plutôt que de manipuler des instances de composants Vue rendus, vos tests interagissent directement avec des nœuds DOM réels.

Les utilitaires fournis facilitent l'interrogation du DOM comme le ferait un utilisateur. Ils permettent de localiser des éléments par leur texte d'étiquette, trouver des liens/boutons via leur libellé, et vérifier l'accessibilité de votre application.

Elle propose également une méthode recommandée utilisant data-testid comme "porte de secours" pour les éléments où le contenu textuel ou l'étiquette sont inadaptés ou impraticables.