Test de vos composants dans React – Meilleure programmation

Online Coding Courses for Kids

La bibliothèque de tests React est construite sur . En comparant les tests pour l’instantané, la syntaxe suivante est légèrement plus simple que Test Renderer:

Pour utiliser React Testing Library, et sont généralement ajoutés à dans un fichier.

"devDependencies": {
"@testing-library/jest-dom": "^5.5.0",
"@testing-library/react": "^10.0.2",
}
  • fournit des fonctions utilitaires légères au-dessus de et .
  • fournit un ensemble d’apparieurs Jest personnalisés, tels que , , et . Ces comparateurs se concentrent sur les attributs d’un élément, son contenu textuel, ses classes CSS, etc. Cela rend la phrase attendue plus déclarative, lisible et maintenable.

Exemple

Nous créons un exemple pour illustrer comment utiliser React Testing Library.

Voici la conception UX de l’exemple. Initialement, la valeur actuelle est 0. Si le bouton, , est cliqué, la valeur actuelle est supérieure 1. Si le bouton, , est cliqué, la valeur actuelle est supérieure 2. Si le bouton, , est cliqué, la valeur actuelle est en hausse 3. Si le bouton, , est cliqué, la valeur actuelle est réinitialisée à 0.

Code source

Nous avons révisé pour mettre en œuvre cet exemple.

Dans le code ci-dessus, les boutons et les utilitaires sont définis dans des fichiers séparés pour simuler la complication du monde réel.

exporte un composant par défaut:

utilise une exportation nommée:

Utils.js utilise également une exportation nommée:

Tests d’instantanés

Nous écrivons un test d’instantané pour la version révisée .

Voici le contenu de l’instantané généré, avec tous les éléments DOM:

Ensuite, nous ajoutons des simulations pour et :

Former le contenu instantané généré suivant, nous pouvons voir que le contenu a été raccourci de 34 lignes à 22 lignes. C’est ainsi que nous effectuons un rendu superficiel pour isoler les tests. Vous pouvez imaginer combien de temps nous gagnerions si les deux et étaient des composants compliqués.

Tests interactifs

React Testing Library teste le code de la même manière qu’un utilisateur l’utiliserait. Il fournit des API pour simuler les opérations. Les clics de scénario de test suivants , , et boutons et vérifie que le résultat est .

Dans le cas de test ci-dessus, il utilise pour récupérer le . Les boutons sont définis dans une autre source JavaScript, où les ID de test peuvent ne pas être fournis. est utilisé pour récupérer l’élément.

Ici, et sont déstructurés du résultat du rendu.

Dans le cas de test ci-dessous, nous importons et du module. L’invocation doit ensuite spécifier le conteneur exact. Ce scénario de test clique et boutons et vérifie que le résultat est .

Dans les exemples ci-dessus, nous nous sommes moqués et . Et le les fonctions? Ils peuvent également être moqués pour simplifier la logique:

Close Menu