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 →

La famille de paquets @testing-library vous aide à tester les composants d'interface utilisateur d'une manière centrée sur l'utilisateur.

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

Le problème

Vous souhaitez écrire des tests maintenables qui vous donnent une grande confiance dans le fait que vos composants fonctionnent pour vos utilisateurs. Dans cette optique, vous voulez que vos tests évitent d'inclure des détails d'implémentation afin que les refontes de vos composants (changements d'implémentation sans modification de la fonctionnalité) ne cassent pas vos tests et ne ralentissent pas votre équipe.

La solution

La bibliothèque principale, DOM Testing Library, est une solution légère pour tester des pages web en interrogeant et en interagissant avec les nœuds du DOM (que ce soit simulé avec JSDOM/Jest ou dans le navigateur). Ses principales utilités consistent à interroger le DOM pour trouver des nœuds d'une manière similaire à celle dont l'utilisateur trouve les éléments sur la page. Ainsi, la bibliothèque garantit que vos tests vous donnent confiance dans le fait que votre application fonctionnera lorsqu'un véritable utilisateur l'utilisera.

La bibliothèque principale a été encapsulée pour fournir des API ergonomiques pour plusieurs frameworks, notamment React, Angular et Vue. Il existe également un plugin pour utiliser les requêtes de testing-library dans des tests de bout en bout avec Cypress et une implémentation pour React Native.

Ce que cette bibliothèque n'est pas

  1. Un runner ou framework de test

  2. Spécifique à un framework de test

DOM Testing Library fonctionne avec tout environnement fournissant des API DOM, tel que Jest, Mocha + JSDOM, ou un véritable navigateur.

Ce que vous devriez éviter avec Testing Library

Testing Library vous encourage à éviter de tester les détails d'implémentation comme les aspects internes d'un composant que vous testez (bien que cela soit toujours possible). Les Principes Directeurs de cette bibliothèque mettent l'accent sur des tests qui ressemblent étroitement à la manière dont les utilisateurs interagissent avec vos pages web.

Vous devriez éviter les détails d'implémentation suivants :

  1. L'état interne d'un composant

  2. Les méthodes internes d'un composant

  3. Les méthodes de cycle de vie d'un composant

  4. Les composants enfants