Catégories
Plugin et site web

Guide pratique pour tester les applications React avec Jest – Smashing Magazine

A propos de l'auteur

Adeneye David Abiodun est un amoureux de JavaScript et un passionné de technologie, a fondé @corperstechhub et est actuellement conférencier / technologue informatique @critm_ugep. Je construis …
Plus à propos
Adeneye

La construction d'une application qui fonctionne bien nécessite de bons tests; sinon, savoir si votre application fonctionne comme prévu serait une question de conjecture et de chance. Jest est l'un des meilleurs outils disponibles pour tester les applications React. Dans cet article, vous apprendrez tout ce dont vous avez besoin pour créer un test solide pour vos composants et votre application React.

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 familier avec React afin de suivre ce tutoriel.

Une brève introduction aux tests

Le test est 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. Les tests garantissent la fonctionnalité de composants complexes et d'applications modulaires.
  3. Des tests sont requis pour les performances efficaces d'une application logicielle ou d'un produit.

Les tests rendent 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 de l'unité

Dans ce type de test, des unités ou composants individuels 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.

Lors des tests unitaires, des procédures ou fonctions individuelles sont testées pour garantir leur bon fonctionnement et tous les composants sont testés individuellement. Par exemple, tester une fonction ou savoir si une instruction ou une boucle dans un programme fonctionne correctement relèverait de la portée des tests unitaires.

Test des composants

Les tests de composants vérifient 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.

Des tests comme celui-ci dans React nécessitent des outils plus sophistiqués. Nous aurions donc besoin d'outils Jest et parfois plus sophistiqués, comme Enzyme, dont nous discuterons brièvement plus tard.

Test d'instantané

Un test d'instantané 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.

Les 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 de se soucier du passé.
  3. Il permet la construction modulaire d'une application qui serait autrement trop complexe à construire.
  4. Cela réduit le besoin de vérification manuelle.

Désavantages

  1. Vous devez écrire plus de code, ainsi que déboguer et maintenir.
  2. Les échecs de test non critiques peuvent entraîner le rejet de l'application en termes d'intégration continue.

Introduction à Jest

Jest est un charmant cadre de test JavaScript axé sur la simplicité. Il peut être installé avec npm ou Yarn. Jest s'inscrit dans une catégorie plus large d'utilitaires appelés testeurs. 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 utilisée pour tester les applications React. Il est conçu pour tester les 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.

Processus d'exécution d'un test avec Jest

Dans cette section, nous allons installer Jest et écrire des tests. Si vous êtes nouveau dans React, je vous recommande d'utiliser Create React App, car il est prêt à l'emploi et livré 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 que vous utilisez).

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 setupTest.js fichier dans le src dossier du projet. Le fichier devrait ressembler à ceci:

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });

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.
  • describe

    Cette méthode facultative permet de regrouper un nombre illimité de it ou test déclarations.

  • expect

    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.

  • mount

    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. Cela nous permet de tester les composants de manière isolée.

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 tous les fichiers trouvés dans n'importe quel répertoire portant le nom __test__ sont considérés 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 tutoriel. Vous pouvez le cloner sur GitHub. Courir npm install pour installer tous les packages, puis npm start pour lancer l'application. Vérifier la README.md fichier 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("renders without crashing", () => {
  shallow();
});

it("renders Account header", () => {
  const wrapper = shallow();
  const welcome = 

Display Active Users Account Details

; expect(wrapper.contains(welcome)).toEqual(true); });

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

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

Maintenant, lancez le test:

npm run test 
/* OR */
npm test

La sortie de votre terminal devrait ressembler à ceci:

  PASS  src/App.test.js
  √ renders without crashing (34ms)
  √ renders Account header (13ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        11.239s, estimated 16s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

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 du test des instantanés, et vous pourrez également voir un exemple de test ayant échoué.

Sauter ou isoler un test

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

it.skip("renders without crashing", () => {
  shallow();
});

it("renders Account header", () => {
  const wrapper = shallow();
  const header = 

Display Active Users Account Details

; expect(wrapper.contains(header)).toEqual(true); });

Notre premier test sera ignoré car nous avons utilisé le skip méthode 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 aussi utiliser it.only().

Il est un peu frustrant d’apporter des modifications à un fichier de test, puis de l'exécuter manuellement npm test encore. 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 moqueuse

Une maquette est un doublon convaincant 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 fausses fonctions 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 la sortie.

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ées pour bloquer la fonctionnalité avec les 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 simulée dans la section suivante.

Test des composants React

La section combinera toutes les connaissances que nous avons 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 factice pour simuler si des accessoires sont passés entre les composants.

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

Créons une maquette pour le user accessoires:

const user = {
  name: "Adeneye David",
  email: "david@gmail.com",
  username: "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("accepts user account props", () => {
    const wrapper = mount();
    expect(wrapper.props().user).toEqual(user);
  });
  it("contains users account email", () => {
    const wrapper = mount();
    const value = wrapper.find("p").text();
    expect(value).toEqual("david@gmail.com");
  });
});

Nous avons deux tests ci-dessus, et nous utilisons un describe couche, qui prend le composant testé. En spécifiant les accessoires et les valeurs que nous prévoyons de passer avec succès, 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 Account composant. Ensuite, nous vérifions si nous pouvons trouver le

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

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

it("renders correctly with no error message", () => {
  const wrapper = mount();
  expect(wrapper.state("error")).toEqual(null);
});

Dans ce test, nous vérifions si l'état de notre erreur de composant est nul, 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 des tests d'instantanés, 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; sinon, 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 la première fois, l'instantané du code de ce composant sera composé et enregistré dans un nouveau __snapshots__ dossier dans le src annuaire.

it("renders correctly", () => {
  const tree = shallow();
  expect(toJson(tree)).toMatchSnapshot();
});

Lorsque le test ci-dessus s'exécute avec succès, le composant d'interface utilisateur actuel sera 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 __snapshots__ dossier. 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, shallow La méthode 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é 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é. Apportons quelques modifications à 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 d'instantané. Pour ce faire, modifions le

tag 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)
  × renders correctly (44ms)

  ● renders correctly

    expect(received).toMatchSnapshot()
    Snapshot name: `renders correctly
1

    - Snapshot
    + Received

      
        

- Loading... + Fetching Users...

7 | it("renders correctly", () => { 8 | const wrapper = shallow(); > 9 | expect(toJson(wrapper)).toMatchSnapshot(); | ^ 10 | }); 11 | 12 | /* it("renders without crashing", () => { at Object. (src/App.test.js:9:27) › 1 snapshot failed. Snapshot Summary › 1 snapshot failed from 1 test suite. Inspect your code changes or press `u` to update them. Test Suites: 1 failed, 1 total Tests: 1 failed, 1 total Snapshots: 1 failed, 1 total Time: 92.274s Ran all test suites related to changed files. Watch Usage: Press w to show more.

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 l'instantané.

› Press u to update failing snapshots.

Quand on presse u pour mettre à jour l'instantané, le test réussira.

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 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

Smashing Editorial(ks, ra, il, al)

Laisser un commentaire

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