Aller au contenu principal

React Testing Library

[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 →

React Testing Library étend DOM Testing Library en ajoutant des API pour travailler avec les composants React.

Installation​

Pour commencer avec React Testing Library, installez-la avec sa dépendance requise @testing-library/dom :

npm install --save-dev @testing-library/react @testing-library/dom

Avec TypeScript​

Pour une couverture complète des types, installez également les types pour react et react-dom :

npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom

Le problème​

Vous souhaitez écrire des tests maintenables pour vos composants React. Dans cette optique, vos tests doivent éviter les détails d'implémentation et se concentrer sur la confiance qu'ils sont censés apporter. De plus, votre suite de tests doit rester maintenable à long terme afin que les refontes de composants (changements d'implémentation sans modification fonctionnelle) ne cassent pas vos tests et ne ralentissent pas votre équipe.

Cette solution​

React Testing Library est une solution légère pour tester des composants React. Elle fournit des utilitaires simples basés sur react-dom et react-dom/test-utils, encourageant les bonnes pratiques de test. Son principe directeur principal est :

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

Plutôt que de manipuler des instances de composants React rendus, vos tests travailleront directement avec les nœuds DOM. Les utilitaires facilitent l'interrogation du DOM comme le ferait un utilisateur : trouver des éléments de formulaire par leur label, localiser liens et boutons via leur texte. Une méthode de secours avec data-testid est également fournie pour les cas où le texte ou le label ne sont pas pertinents.

Cette bibliothèque encourage le développement d'applications plus accessibles et permet de concevoir des tests qui utilisent vos composants comme le ferait un utilisateur. Cela renforce la confiance dans le bon fonctionnement de votre application en conditions réelles.

Cette bibliothèque remplace Enzyme. Bien qu'il soit possible de suivre ces principes avec Enzyme, son respect est plus difficile à cause des utilitaires supplémentaires qu'il fournit (qui facilitent le test des détails d'implémentation). Plus d'informations dans la FAQ.

Ce que cette bibliothèque n'est pas :

  1. Un runner ou framework de test

  2. Liée à un framework de test spécifique (bien que nous recommandions Jest, elle fonctionne avec tous. Voir Utilisation sans Jest)

NOTE : Cette bibliothèque repose sur DOM Testing Library où se trouve la logique principale des requêtes.

Tutoriels​

Visionnez la vidéo "What is React Testing library?" ci-dessous pour une présentation de la bibliothèque.

what is react testing library

Ne manquez pas non plus ce tutoriel sur React Testing Library.