Dans cet article, je vais vous présenter un outil de test React nommé Jest ainsi que la bibliothèque populaire Enzyme qui est conçue pour tester les composants React. Je vais vous présenter les techniques de test Jest, notamment: l'exécution de tests, le test de composants React, le test d'instantanés et la simulation.
Si vous êtes nouveau dans les tests et que vous vous demandez comment commencer, vous trouverez ce tutoriel utile car nous commencerons par une introduction aux tests. À la fin, vous serez opérationnel et testerez les applications React à l'aide de Jest et Enzyme. Vous devez être familiarisé avec React pour suivre ce didacticiel.

Une brève introduction aux tests

Les tests sont un examen ligne par ligne de la façon dont votre code s'exécutera. Une suite de tests pour une application comprend différents bits de code pour vérifier si une application s'exécute avec succès et sans erreur. Les tests sont également utiles lorsque des mises à jour sont apportées au code. Après avoir mis à jour un morceau de code, vous pouvez exécuter un test pour vous assurer que la mise à jour ne casse pas déjà les fonctionnalités de l'application.

Pourquoi tester?

Il est bon de comprendre pourquoi nous faisons quelque chose avant de le faire. Alors, pourquoi tester et quel est son objectif?

1. Le premier objectif du test est d'empêcher la régression. La régression est la réapparition d'un bug qui avait été corrigé auparavant. Il empêche une fonctionnalité de fonctionner comme prévu après qu'un certain événement se soit produit.
2. Le test garantit la fonctionnalité des composants complexes et des applications modulaires.
3. Le test est requis pour les performances efficaces d'une application logicielle ou d'un produit.

Le test fait une application plus robuste et moins sujette aux erreurs. C'est un moyen de vérifier que votre code fait ce que vous voulez qu'il fasse et que votre application fonctionne comme prévu pour vos utilisateurs.

Passons en revue les types de tests et ce qu'ils font.

Test unitaire

Dans ce type de test, des unités individuelles ou des composants du logiciel sont testés. Une unité peut être une fonction, une méthode, une procédure, un module ou un objet individuel. Un test unitaire isole une section de code et vérifie son exactitude, afin de valider que chaque unité du code du logiciel fonctionne comme prévu.

Dans le test unitaire, des procédures ou fonctions individuelles sont testées pour garantir qu'elles fonctionnent correctement, et tous les composants sont testés individuellement. Par exemple, le test d'une fonction ou le fonctionnement correct d'une instruction ou d'une boucle dans un programme relèverait du test unitaire.

Test de composant

Le test de composant vérifie la fonctionnalité d'une partie individuelle d'une application. Des tests sont effectués sur chaque composant indépendamment des autres composants. En général, les applications React sont composées de plusieurs composants, donc les tests de composants traitent de tester ces composants individuellement.

Par exemple, considérons un site Web qui a différentes pages Web avec de nombreux composants. Chaque composant aura ses propres sous-composants. Le test de chaque module sans considérer l'intégration avec d'autres composants est appelé test de composant.

Un test comme celui-ci dans React nécessite des outils plus sophistiqués. Ainsi, nous aurions besoin d'outils Jest et parfois plus sophistiqués, comme Enzyme, dont nous discuterons brièvement plus tard.

Test de cliché

Un test de cliché garantit que l'interface utilisateur (UI) d'une application Web ne change pas de façon inattendue . Il capture le code d'un composant à un moment donné, afin que nous puissions comparer le composant dans un état avec tout autre état possible qu'il pourrait prendre.

Nous découvrirons les tests d'instantanés dans une section ultérieure.

Avantages et inconvénients des tests

Les tests sont excellents et devraient être effectués, mais ils présentent des avantages et des inconvénients.

Avantages

1. Il empêche une régression inattendue.
2. Il permet au développeur de se concentrer sur la tâche actuelle, plutôt que
3. Il permet la construction modulaire d'une application qui serait autrement trop complexe à construire.
4. Il réduit le besoin de vérification manuelle.

Inconvénients

1. Vous devez écrire plus de code, comme
2. Les échecs de tests non critiques peuvent entraîner le rejet de l'application en termes d'intégration continue.

Introduction to Jest

Jest est un charmant cadre de test JavaScript avec un accent sur simplicité. Il peut être installé avec npm ou Yarn. Jest s'inscrit dans une catégorie plus large d'utilitaires appelés test runners . Il fonctionne très bien pour les applications React, mais il fonctionne également très bien en dehors des applications React.

Enzyme est une bibliothèque qui est utilisée pour tester les applications React. Il est conçu pour tester des composants, et il permet d'écrire des assertions qui simulent des actions qui confirment que l'interface utilisateur fonctionne correctement.

Jest et Enzyme se complètent si bien, donc dans cet article, nous utiliserons les deux. [19659038] Processus d'exécution d'un test avec Jest

Dans cette section, nous allons installer Jest et écrire des tests. Si vous débutez avec React, je vous recommande d'utiliser Créer une application React car elle est prête à l'emploi et livrée avec Jest.

 npm init react-app my-app

Nous devons installer Enzyme **** et enzyme-adapter-react-16 avec react-test-renderer (le nombre doit être basé sur la version de React you

 npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

Maintenant que nous avons créé notre projet avec Jest et Enzyme, nous devons créer un fichier setupTest.js dans le dossier src du projet. Le fichier doit ressembler à ceci:

 import {configure} from "enzyme";
importer l'adaptateur de "enzyme-adapter-react-16";
configure ({adaptateur: nouvel adaptateur ()});

Cela importe Enzyme et configure l'adaptateur pour exécuter nos tests.

Avant de continuer, apprenons quelques notions de base. Certains éléments clés sont beaucoup utilisés dans cet article, et vous devrez les comprendre.

• it ou test
  Vous passeriez une fonction à cette méthode et le lanceur de test exécuterait cette fonction comme un bloc de tests.
• décrivez
  Cette méthode facultative permet de regrouper n'importe quel nombre de it ou tests .
• attendez
  C'est la condition que le test doit réussir. Il compare le paramètre reçu au matcher. Il vous donne également accès à un certain nombre d'apparieurs qui vous permettent de valider différentes choses. Vous pouvez en savoir plus à ce sujet dans la documentation .
• monture
  Cette méthode rend le DOM complet, y compris les composants enfants du composant parent, dans lequel nous exécutons les tests.
• shallow
  Cela rend uniquement les composants individuels que nous testons. Il ne rend pas les composants enfants.

Création d'un fichier de test

Comment Jest sait-il ce qu'est un fichier de test et ce qui ne l'est pas? La première règle est que tout fichier trouvé dans un répertoire portant le nom __ test __ est considéré comme un test. Si vous placez un fichier JavaScript dans l'un de ces dossiers, Jest tentera de l'exécuter lorsque vous appelez Jest, pour le meilleur ou pour le pire. La deuxième règle est que Jest reconnaîtra tout fichier avec le suffixe .spec.js ou .test.js . Il recherchera les noms de tous les dossiers et de tous les fichiers dans l'ensemble de votre référentiel.

Créons notre premier test, pour une mini-application React créée pour ce didacticiel. Vous pouvez le cloner sur Git H ub . Exécutez npm install pour installer tous les packages, puis npm start pour lancer l'application. Consultez le fichier README.md pour plus d'informations.

Ouvrons App.test.js pour écrire notre premier test. Tout d'abord, vérifiez si notre composant d'application s'affiche correctement et si nous avons spécifié une sortie:

 it ("s'affiche sans se bloquer", () => {
  peu profond ();
});

it ("rend l'en-tête du compte", () => {
  const wrapper = peu profond ();
  const welcome = 
 Afficher les détails du compte des utilisateurs actifs 
;
  expect (wrapper.contains (welcome)). toEqual (true);
});

Dans le test ci-dessus, le premier test, avec peu profond vérifie si notre composant d'application s'affiche correctement sans se bloquer. N'oubliez pas que la méthode superficielle ne rend qu'un seul composant, sans composants enfants.

Le deuxième test vérifie si nous avons spécifié une sortie de balise h1 de «Afficher le compte d'utilisateur actif» dans notre composant d'application, avec un Jest matcher de toEqual .

Maintenant, lancez le test:

 npm run test
/* OU */
test npm

La sortie de votre terminal devrait ressembler à ceci:

 PASS src / App.test.js
  √ rend sans s'écraser (34 ms)
  √ rend l'en-tête du compte (13 ms)

Suites de tests: 1 réussite, 1 total
Tests: 2 réussis, 2 au total
Instantanés: 0 au total
Temps: 11.239s, estimé 16s
Exécuté toutes les suites de tests liées aux fichiers modifiés.

Utilisation de la montre: appuyez sur w pour afficher plus.

Comme vous pouvez le voir, notre test a réussi. Cela montre que nous avons une suite de tests nommée App.test.js avec deux tests réussis lors de l'exécution de Jest. Nous parlerons plus tard des tests d'instantanés, et vous verrez également un exemple d'échec de test.

Ignorer ou isoler un test

Ignorer ou isoler un test signifie que lorsque Jest s'exécute, un test marqué spécifique est pas exécuté.

 it.skip ("s'affiche sans planter", () => {
  peu profond ();
});

it ("rend l'en-tête du compte", () => {
  const wrapper = peu profond ();
  const header = 
 Afficher les détails du compte des utilisateurs actifs 
;
  attend (wrapper.contains (en-tête)). toEqual (true);
});

Notre premier test sera ignoré car nous avons utilisé la méthode skip pour isoler le test. Ainsi, il ne s'exécutera pas et n'apportera aucune modification à notre test lors de l'exécution de Jest. Seul le second s'exécutera. Vous pouvez également utiliser it.only () .

Il est un peu frustrant d'apporter des modifications à un fichier de test, puis de réexécuter manuellement le test npm . Jest a une fonctionnalité intéressante appelée mode de surveillance, qui surveille les modifications de fichiers et exécute les tests en conséquence. Pour exécuter Jest en mode montre, vous pouvez exécuter npm test - --watch ou jest --watch . Je recommanderais également de laisser Jest en cours d'exécution dans la fenêtre du terminal pour le reste de ce didacticiel.

Fonction de simulation

Une simulation est une copie convaincante d'un objet ou d'un module sans aucun fonctionnement interne réel. Il pourrait avoir un tout petit peu de fonctionnalité, mais par rapport à la réalité, c'est une maquette. Il peut être créé automatiquement par Jest ou manuellement.

Pourquoi devrions-nous nous moquer? La simulation réduit le nombre de dépendances, c'est-à-dire le nombre de fichiers associés qui doivent être chargés et analysés lors de l'exécution d'un test. Ainsi, l'utilisation de nombreuses simulations accélère l'exécution des tests.

Les fonctions fantômes sont également appelées «espions», car elles vous permettent d'espionner le comportement d'une fonction appelée directement par un autre code, plutôt que de simplement tester

Il existe deux façons de simuler une fonction: soit en créant une fonction simulée pour l'utiliser dans le code de test, soit en écrivant une maquette manuelle pour remplacer une dépendance de module.

Les simulations manuelles **** sont utilisé pour bloquer la fonctionnalité avec des données factices. Par exemple, au lieu d'accéder à une ressource distante, comme un site Web ou une base de données, vous pouvez créer une maquette manuelle qui vous permet d'utiliser de fausses données.

Nous utiliserons une fonction de simulation dans la section suivante.

Test des composants React

Cette section regroupera toutes les connaissances acquises jusqu'à présent pour comprendre comment tester les composants React. Les tests consistent à s'assurer que la sortie d'un composant n'a pas été modifiée de manière inattendue pour quelque chose d'autre. Construire des composants de la bonne manière est de loin le moyen le plus efficace pour garantir la réussite des tests.

Une chose que nous pouvons faire est de tester les accessoires des composants – en particulier, tester si les accessoires d'un composant sont passés à un autre. Jest et l'API Enzyme nous permettent de créer une fonction simulée pour simuler si les accessoires sont passés entre les composants.

Nous devons passer les accessoires du compte utilisateur du composant principal App au composant Compte . Nous devons donner les détails du compte utilisateur au compte afin de rendre le compte actif des utilisateurs. C'est là que la simulation est utile, nous permettant de tester nos composants avec de fausses données.

Créons une maquette pour l'utilisateur accessoires:

 const user = {
  nom: "Adeneye David",
  e-mail: "david@gmail.com",
  nom d'utilisateur: "Dave",
};

Nous avons créé une fonction de simulation manuelle dans notre fichier de test et l'avons enroulée autour des composants. Supposons que nous testons une grande base de données d'utilisateurs. Il n'est pas conseillé d'accéder à la base de données directement depuis notre fichier de test. Au lieu de cela, nous créons une fonction factice, qui nous permet d'utiliser de fausses données pour tester notre composant.

 describe ("", () => {
  it ("accepte les accessoires du compte utilisateur", () => {
    const wrapper = mount ();
    attend (wrapper.props (). utilisateur) .toEqual (utilisateur);
  });
  il ("contient l'e-mail du compte des utilisateurs", () => {
    const wrapper = mount ();
    const value = wrapper.find ("p"). text ();
    attendre (valeur) .toEqual ("david@gmail.com");
  });
});
 

Nous avons deux tests ci-dessus, et nous utilisons une couche décrivant qui prend le composant testé. En spécifiant les accessoires et les valeurs que nous nous attendons à passer par le test, nous pouvons continuer.

Dans le premier test, nous vérifions si les accessoires que nous avons passés au composant monté sont égaux aux accessoires factices que nous avons créés ci-dessus.

Pour le deuxième test, nous passons les accessoires de l'utilisateur au composant Account monté. Ensuite, nous vérifions si nous pouvons trouver l'élément

qui correspond à ce que nous avons dans le composant Account . Lorsque nous exécuterons la suite de tests, vous verrez que le test s’exécute correctement.

Nous pouvons également tester l’état de notre composant. Vérifions si l'état du message d'erreur est égal à null:

 it ("s'affiche correctement sans message d'erreur", () => {
  const wrapper = mount ();
  expect (wrapper.state ("error")). toEqual (null);
});
 

Dans ce test, nous vérifions si l'état de notre erreur de composant est égal à zéro, en utilisant un toEqual () matcher. S'il y a un message d'erreur dans notre application, le test échouera lors de son exécution.

Dans la section suivante, nous allons voir comment tester les composants React avec le test de cliché, une autre technique étonnante.

Test de cliché

Le test de capture instantanée capture le code d'un composant à un moment donné, afin de le comparer à un fichier de capture instantanée de référence stocké à côté du test. Il est utilisé pour suivre les modifications de l'interface utilisateur d'une application.

La représentation réelle du code d'un instantané est un fichier JSON, et ce JSON contient un enregistrement de ce à quoi ressemblait le composant lorsque l'instantané a été créé. Pendant un test, Jest compare le contenu de ce fichier JSON à la sortie du composant pendant le test. S'ils correspondent, le test réussit; si ce n'est pas le cas, le test échoue.

Pour convertir un wrapper Enzyme dans un format compatible avec le test d'instantané Jest, nous devons installer enzyme-to-json :

 npm install --save-dev enzyme-to-json

Créons notre test d'instantané. Lorsque nous l'exécutons pour la première fois, l'instantané du code de ce composant sera composé et enregistré dans un nouveau dossier __ instantanés __ dans le répertoire src .

 il ("s'affiche correctement" , () => {
  arbre const = peu profond ();
  attendez (toJson (arbre)). toMatchSnapshot ();
});

Lorsque le test ci-dessus réussit, le composant d'interface utilisateur actuel est comparé au composant existant.

Maintenant, exécutons le test:

 npm run test

Lorsque la suite de tests s'exécute, un nouvel instantané est généré et enregistré dans le dossier __ instantanés __ . Lorsque nous exécutons un test par la suite, Jest vérifie si les composants correspondent à l'instantané.

Comme expliqué dans la section précédente, cette méthode superficielle du package Enzyme est utilisée pour rendre un seul composant et rien d'autre . Il ne rend pas les composants enfants. Au contraire, cela nous donne un bon moyen d'isoler le code et d'obtenir de meilleures informations lors du débogage. Une autre méthode, nommée mount est utilisée pour rendre le DOM complet, y compris les composants enfants du composant parent, dans lequel nous exécutons les tests.

Nous pouvons également mettre à jour notre instantané, faisons-en quelques-uns modifications de notre composant afin de faire échouer notre test, ce qui se produira car le composant ne correspond plus à ce que nous avons dans le fichier de capture instantanée. Pour ce faire, modifions la balise

dans notre composant de

Loading ...

à

Fetching Users ...

. Lorsque le test s'exécute, voici ce que nous obtiendrons dans le terminal:

  FAIL src / App.test.js (30.696s)
  × s'affiche correctement (44 ms)

  ● rend correctement

    attendre (reçu) .toMatchSnapshot ()
    Nom de l'instantané: `s'affiche correctement
1

    - Instantané
    + Reçu

      
        

     - Chargement ...
    + Récupération des utilisateurs ...
        
      

        7 | il ("rend correctement", ()
=> {
       8 | const wrapper = peu profond ();
    > 9 | attendez (toJson (wrapper)). toMatchSnapshot ();
         | ^ 10 | });
      11 |
      12 | / * it ("rend sans planter", () => {

      chez Object.  (src / App.test.js: 9: 27)

 ›1 instantané a échoué.
Résumé de l'instantané
 ›1 instantané a échoué dans 1 suite de tests. Inspectez vos modifications de code ou appuyez sur «u» pour les mettre à jour.

Suites de tests: 1 échec, 1 total
Tests: 1 échec, 1 total
Instantanés: 1 échec, 1 total
Temps: 92.274s
Exécuté toutes les suites de tests liées aux fichiers modifiés.

Utilisation de la montre: appuyez sur w pour afficher plus.

Si nous voulons que notre test réussisse, nous changerons le test à son état précédent ou mettrons à jour le fichier d'instantané. Dans la ligne de commande, Jest fournit des instructions sur la mise à jour de l'instantané. Tout d'abord, appuyez sur w dans la ligne de commande pour afficher plus, puis appuyez sur u pour mettre à jour le cliché.

 ›Appuyez sur u pour mettre à jour les clichés défaillants.

Lorsque nous appuyons sur u pour mettre à jour le cliché, le test réussit.

Conclusion

J'espère que vous avez apprécié ce didacticiel. Nous avons appris certaines techniques de test Jest à l'aide de la bibliothèque de tests enzymatiques. Je vous ai également présenté le processus d'exécution d'un test, de test des composants React, de simulation et de test d'instantané. Si vous avez des questions, vous pouvez les laisser dans la section des commentaires ci-dessous, et je serai heureux de répondre à chacune et de résoudre tous les problèmes avec vous.

Ressources et lectures complémentaires

( ks, ra, il, al)