Share
Ce que vous allez créerTester le code est une pratique déroutante pour de nombreux développeurs. Cela est compréhensible car la rédaction de tests nécessite plus d’efforts, de temps et la capacité de prévoir les cas d’utilisation possibles. Les startups et les développeurs travaillant sur de plus petits projets préfèrent généralement ignorer les tests en raison du manque de ressources et de main-d'œuvre..
Cependant, je pense que vous devriez tester vos composants pour plusieurs raisons:
Réagir n'est pas différent non plus. Lorsque l'ensemble de votre application commence à se transformer en une pile de composants difficiles à gérer, les tests offrent stabilité et cohérence. Écrire des tests dès le premier jour vous aidera à rédiger un meilleur code, à repérer facilement les bogues et à maintenir un meilleur flux de travail de développement..
Dans cet article, je vais vous expliquer tout ce que vous devez savoir pour écrire des tests pour vos composants React. Je couvrirai également certaines des meilleures pratiques et techniques pendant que nous y sommes. Commençons!
Le test est le processus de vérification que notre affirmations de test sont vrais et qu'ils restent vrais tout au long de la vie de l'application. Une assertion de test est une expression booléenne qui renvoie true à moins qu'il y ait un bogue dans votre code.
Par exemple, une assertion peut être aussi simple que celle-ci: "Lorsque l'utilisateur accède à /s'identifier, un modal avec l'id #s'identifier devrait être rendu. "Ainsi, s'il s'avère que vous avez gâché le composant de connexion d'une manière ou d'une autre, l'assertion renverrait false. Les assertions ne se limitent pas à ce qui est restitué. Vous pouvez également indiquer comment l'application répond aux interactions de l'utilisateur et d'autres actions.
Il existe de nombreuses stratégies de test automatisé que les développeurs front-end utilisent pour tester leur code. Nous limiterons notre discussion à trois paradigmes de test de logiciel populaires avec React: le test unitaire, le test fonctionnel et le test d'intégration..
Le test unitaire est l'un des vétérans du test qui reste populaire dans les cercles de test. Comme son nom l'indique, vous testerez des éléments de code individuels pour vérifier qu'ils fonctionnent de manière indépendante, comme prévu. En raison de l'architecture des composants de React, les tests unitaires conviennent parfaitement. Ils sont également plus rapides, car vous n'avez pas à compter sur un navigateur..
Les tests unitaires vous aident à penser chaque composant de manière isolée et à les traiter comme des fonctions. Vos tests unitaires pour un composant particulier doivent répondre aux questions suivantes:
Les tests fonctionnels permettent de tester le comportement d’une partie de votre application. Les tests fonctionnels sont généralement écrits du point de vue de l'utilisateur. Une fonctionnalité ne se limite généralement pas à un seul composant. Il peut s'agir d'un formulaire à part entière ou d'une page entière.
Par exemple, lorsque vous créez un formulaire d'inscription, il peut impliquer des composants pour les éléments de formulaire, les alertes et les erreurs éventuelles. Le composant qui est rendu après la soumission du formulaire fait également partie de cette fonctionnalité. Cela ne nécessite pas de rendu de navigateur, car nous utiliserons un DOM virtuel en mémoire pour nos tests..
Le test d'intégration est une stratégie de test dans laquelle tous les composants individuels sont testés en tant que groupe. Les tests intégrés tentent de répliquer l'expérience utilisateur en exécutant les tests sur un navigateur réel. Cela est considérablement plus lent que les tests fonctionnels et les tests unitaires car chaque suite de tests est exécutée sur un navigateur actif..
Dans React, les tests unitaires et les tests fonctionnels sont plus populaires que les tests d'intégration, car ils sont plus faciles à écrire et à gérer. C'est ce que nous allons couvrir dans ce tutoriel.
Vous avez besoin de certains outils et dépendances pour démarrer avec le test unitaire et fonctionnel de votre application React. Je les ai énumérés ci-dessous.
Jest est un framework de test qui ne nécessite aucune configuration et est donc facile à configurer. Il est plus populaire que les frameworks de test comme Jasmine et Mocha car il a été développé par Facebook. Jest est également plus rapide que les autres car il utilise une technique astucieuse pour mettre en parallèle les tests sur les travailleurs. En dehors de cela, chaque test s'exécute dans un environnement sandbox afin d'éviter les conflits entre deux tests successifs..
Si vous utilisez create-react-app, il est livré avec Jest. Sinon, vous devrez peut-être installer Jest et quelques autres dépendances. Vous pouvez en savoir plus sur la page de documentation officielle de Jest.
Même si vous utilisez create-react-app, vous devrez installer ce package pour générer des instantanés. Le test d'instantané fait partie de la bibliothèque Jest. Ainsi, au lieu de restituer l'interface utilisateur de l'application entière, vous pouvez utiliser le moteur de rendu de test pour générer rapidement une sortie HTML sérialisable à partir du DOM virtuel. Vous pouvez l'installer comme suit:
fil ajouter react-test-renderer
réact-dom / test-utils comprend certains des utilitaires de test fournis par l’équipe React. Vous pouvez également utiliser le paquet Enzyme publié par Airbnb. Enzyme est bien meilleur que ReactTestUtils car il est facile d’affirmer, de manipuler et de parcourir la sortie de vos composants React. Nous commencerons nos tests avec les réactifs React, puis nous passerons plus tard à Enzyme..
Pour installer Enzyme, exécutez la commande suivante.
fil ajouter enzyme enzyme-adaptateur-reag-16
Ajoutez le code à src / SetupTests.js.
importer configure de 'enzyme'; importer adaptateur de 'enzyme-adapter-react-16'; configure (adaptateur: new Adapter ());
Il y a plus d'informations à ce sujet dans la section Testing Components de la page create-react-app.
Nous allons rédiger des tests pour une application de démonstration simple qui affiche une vue principale / détaillée d’une liste de produits. Vous pouvez trouver l'application de démonstration dans notre dépôt GitHub. L’application consiste en un composant conteneur appelé ProductContainer et trois composants de présentation: Liste de produits, Détails du produit, et ProductHeader.
. Package-lock.json, package.json, public, index.html, manifest.json, src, composants, application, application.js. Dans ProductContainer.js avec ProductDetails.jsx dans ProductHeader.js dans ProductList.jsx avec index.js dans style.css
Cette démo est un bon candidat pour les tests unitaires et les tests fonctionnels. Vous pouvez tester chaque composant séparément et / ou tester la fonctionnalité de liste de produits dans son ensemble..
Une fois la démo téléchargée, créez un répertoire avec le nom __tests__à l'intérieur / src / composants /. Vous pouvez ensuite stocker tous les fichiers de test liés à cette fonctionnalité dans la __tests__ annuaire. Les testeurs nomment généralement leurs fichiers de test comme suit: .spec.js ou .test.js-par exemple, ProductHeader.test.js ou ProductHeader.spec.js.
Créer un ProductHeader.test.js déposer si vous ne l'avez pas déjà fait. Voici à quoi ressembleront nos tests:
Accentsconagua
décris ('ProductHeader', () => it ('test réussi', () => expect (true) .toBeTruthy ();) it ('test échoué', () => expect (false) .toBeTruthy ();))La suite de tests commence par un décrire block, qui est une fonction Jest globale qui accepte deux paramètres. Le premier paramètre est le titre de la suite de tests et le second paramètre est la mise en œuvre réelle. Chaque il() dans une suite de tests correspond à un test ou une spécification. Un test contient une ou plusieurs attentes vérifiant l'état du code..
attend (vrai) .toBeTruthy ();
En Jest, une attente est une assertion qui renvoie soit vrai soit faux. Lorsque toutes les assertions d'une spécification sont vraies, on dit que cela passe. Sinon, le test est dit échouer.
Par exemple, nous avons créé deux spécifications de test. Le premier devrait évidemment passer, et le second doit échouer.
Remarque: toBeTruthy () est un matcher prédéfini. En mode Jest, chaque outil de comparaison compare la valeur attendue à la valeur réelle et renvoie un booléen. Il y a beaucoup plus de joueurs disponibles, et nous les examinerons dans un instant.
create-react-app a mis en place tout ce dont vous avez besoin pour exécuter la suite de tests. Tout ce que vous avez à faire est d’exécuter la commande suivante:
test de fil
Vous devriez voir quelque chose comme ça:
Pour réussir le test qui a échoué, vous devez remplacer le toBeTruthy () matcher avec toBeFalsy ().
attend (faux) .toBeFalsy ();
C'est tout!
Comme mentionné précédemment, Jest utilise des correspondants pour comparer les valeurs. Vous pouvez l'utiliser pour vérifier l'égalité, comparer deux nombres ou chaînes et vérifier la véracité des expressions. Voici la liste des matcheurs populaires disponibles à Jest.
être();toBeNull ()à définir()toBeUndefined ()toBeTruthy ()toBeFalsy ()toBeGreaterThan ()toBeLesserThan ()correspondre()contenir()Ceci est juste un avant-goût. Vous pouvez trouver tous les concordants disponibles dans les documents de référence..
Premièrement, nous allons écrire quelques tests pour le ProductHeader composant. Ouvrez le Fichier ProductHeader.js si vous ne l'avez pas déjà.
importer Réagir, Composant de 'réagir'; class ProductHeader étend le composant render () return (Page de liste de produits
) ; export par défaut ProductHeader;
Êtes-vous curieux de savoir pourquoi j'ai utilisé un composant de classe ici au lieu d'un composant fonctionnel? En effet, il est plus difficile de tester les composants fonctionnels avec ReactTestUtils. Si vous êtes curieux de savoir pourquoi, cette discussion sur le débordement de pile apporte la réponse..
Nous pourrions écrire un test avec les hypothèses suivantes:
h2 étiquette.h2 tag doit avoir une classe nommée Titre.Pour rendre un composant et récupérer les nœuds DOM pertinents, nous avons besoin de ReactTestUtils. Supprimez les spécifications factices et ajoutez le code suivant:
importer Réagir de 'réagir'; importer ReactTestUtils à partir de 'react-dom / test-utils'; importer ProductsList à partir de '… / ProductsList'; describe ('ProductHeader Component', () => it ('a une balise h2', () => // Test here); it ('est enveloppé dans une classe de titre', () => / / Testez ici)Pour vérifier l'existence d'un h2 noeud, nous devons d’abord rendre nos éléments React en un noeud DOM dans le document. Vous pouvez le faire à l’aide de certaines des API exportées par ReactTestUtils. Par exemple, pour rendre notre
composant const = ReactTestUtils.renderIntoDocument ()
Ensuite, vous pouvez extraire le h2 balise de la composante à l'aide de findRenderedDOMComponentWithTag ('nom de balise'). Il vérifie tous les nœuds enfants et trouve le nœud correspondant au nom de tag.
Voici le test complet.
it ('a une balise h2', () => const composant = ReactTestUtils.renderIntoDocument (Essayez de le sauvegarder, et votre coureur de test devrait vous montrer que le test est réussi. C’est un peu surprenant car nous n’avons pas de attendre() déclaration comme dans notre exemple précédent. La plupart des méthodes exportées par ReactTestUtils avoir des attentes intégrées en eux. Dans ce cas particulier, si l’utilitaire de test ne parvient pas à trouver le h2 balise, une erreur sera générée et les tests échoueront automatiquement.
Maintenant, essayez de créer le code pour le deuxième test. Vous pouvez utiliser findRenderedDOMcomponentWithClass () pour vérifier s'il y a un noeud avec la classe 'title'.
it ('a une classe de titre', () => const composant = ReactTestUtils.renderIntoDocument (C'est tout! Si tout se passe bien, vous devriez voir les résultats en vert.
Bien que nous venions de rédiger deux spécifications de test, nous avons couvert beaucoup de cheminement au cours du processus. Dans le prochain article, nous écrirons des tests complets pour notre page de liste de produits. Nous remplacerons également ReactTestUtils par Enzyme. Pourquoi? Enzyme offre une interface de haut niveau très facile à utiliser et conviviale pour les développeurs. Restez à l'écoute pour la deuxième partie!
Si, à un moment quelconque, vous vous sentez coincé ou avez besoin d'aide, faites-le nous savoir dans les commentaires..
