Tests côté client avec Jest, React Testing Library et Cypress

Online Coding Courses for Kids

Pour rendre un composant, nous importons le rendu de React Testing Library.

Après le rendu, nous pouvons utiliser les méthodes utilitaires de React Testing Library pour rechercher la présence d’un mot-clé dans le DOM.

Ensuite, nous allons attirer notre attention sur le formulaire. Nous voulons vérifier que la validation fonctionne sur l’événement de soumission de formulaire et que des erreurs de validation sont présentes.

le useform Le crochet sur lequel nous comptons rend cela un peu plus délicat car il déclenche des événements dans le DOM de manière asynchrone. Ce n’est pas un problème pour React Testing Library.

Nous utilisons à nouveau des méthodes utilitaires pour vérifier la présence d’erreurs de validation dans le DOM rendu et remplir le formulaire pour nous assurer qu’il se soumet correctement.

C’est bien car cela nous permet d’isoler notre composant Form, sans avoir à faire de demande d’API fictive, et pourrait être utile lorsque je décide de réutiliser le formulaire dans d’autres domaines de l’application.

Ensuite, je veux vérifier que je peux soumettre mon formulaire, que la demande fonctionne et qu’un jeton est ajouté à mon localStorage.

Nous pouvons nous moquer des données renvoyées par la demande. Dans ce cas, nous nous moquons du user_token.

Je veux vérifier que la connexion se comporte comme je m’y attendais après une demande réussie. Encore une fois, je remplis mon formulaire, le soumets et vérifie que ma réponse à l’alerte est comme prévu et qu’un jeton est enregistré sur mon localStorage.

Donc, avec cela, nous pouvons voir que nous sommes en mesure d’obtenir une couverture de test assez décente via React Testing Library et Jest avec une combinaison de tests unitaires et de tests d’intégration. Mais nous n’avons fait qu’effleurer la surface ici, en testant l’élément DOM, les événements, une requête HTTP et les actions asynchrones.

React Testing Library vous permettra également de tester les tests React Router, Redux, Context et SnapShot.

Close Menu