PC & Mobile

Comment tester les composants de réaction – Joshua Van Deren

Comment tester les composants de réaction - Joshua Van Deren


Un bon exemple à suivre est Test-Page.test.jsx.

Pour commencer, disposer d’un cadre solide et d’un ensemble d’outils de test contribuera au succès des tests. Je voudrais vous familiariser avec les éléments suivants utilisés dans cet exemple:

Tout d'abord, en règle générale, chaque composant (par conséquent, chaque fichier) doit être associé à un scénario de test. Cela garantit que le code ne laisse pas de mauvais trous disparaître avant le déploiement. Lorsqu'un système logiciel grossit, il est impératif que les bogues soient détectés rapidement et corrigés rapidement, car ils peuvent entraîner des effets secondaires dévastateurs à mesure que le code évolue.

Comme avec le code de développement, le code de test devrait également avoir un format standard:

Exemple de structure de fichier de test

Il y a 4 sections de niveau supérieur dans tous mes fichiers de test:

Importations

En dessous de Importations, J'ai différentes sous-sections:

Avec des composants, s'il y a des exportations nommées, j'importerais celles là. Sinon, j'importerais un composant normalement. De cette façon, le code de test est déconnecté de la logique de niveau supérieur de notre HOC. Nous pouvons maintenant tester nos composants de manière isolée 🎉.

Se moque

En dessous de Se moque, J'ai tous mes jest.mock () code aménagé. Par exemple, dans Test-Page.test.jsx, voici les exemples suivants:

Exemple factice

Est-ce que ces simulacres semblent familiers? Pourquoi oui, ils sont tous les composants de la sous-section Components du fichier de code! Pourquoi est-ce utile? Encore une fois, nous testons chaque composant isolé; chaque composant dont on se moque aura leur posséder des tests aussi. Par conséquent, nous pouvons tester davantage ce composant isolément sans connaître les détails de mise en œuvre des composants en cours de composition.

Interne

En dessous de Interne, J'aime utiliser les fonctions d'assistance uniques propres à un composant pour faciliter les tests. Par exemple, dans Test-Page.test.jsx, voici les fonctions internes suivantes:

Test d'un exemple interne

Comment je sais quoi defaultProps utiliser? Pourquoi j’examine simplement les PropTypes du code pour m'aider à comprendre cela.

Lors de l'utilisation getComponent, les accessoires peuvent être facilement changés pour tout autre accessoire:

Exemple d'utilisation de «getComponent»

Des tests

En dessous de Des tests, J'aime bien commencer par décrire qui contient le chemin d'accès à un composant donné. Sous ce titre, je créerai généralement 3 suites de tests différentes dans la première décrire pour l’ensemble de tests d’un composant donné.

Le rendu

Pour Le rendu, ce seront des tests d’instantané pour s’assurer que le composant est restitué correctement dans un DOM donné. Par exemple, dans Test-Page.test.jsx, voici la configuration du test de rendu:

Exemple de test de rendu

Cycle de la vie

Pour Cycle de la vie, il s’agira de tests impliquant des méthodes du cycle de vie de Reacts qui n’auraient peut-être pas été abordés lors du rendu initial (tels que composantDidUpdate ou shouldComponentUpdate). Par exemple, dans Test-Page.test.jsx, voici la configuration du test de cycle de vie:

Exemple de test de cycle de vie

Interaction

Pour Interaction, il s’agit de tests impliquant des actions que l’utilisateur peut effectuer, telles que cliquer sur un bouton ou saisir du texte. Par exemple, dans Test-Page.test.jsx, voici la configuration du test d'interaction:

Exemple de test d'interaction

Lors du test de HOC, veuillez vous référer à un exemple de test HOC donné (tel que hasError.test.jsx).

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer