Testing React avec la bibliothèque de tests Jest & React

Découvrez comment nous pouvons tester nos composants et React Hooks afin d’obtenir un code de meilleure qualité dans nos applications, d’optimiser leur réutilisation et de supprimer les erreurs.

Dans cet article, nous allons en apprendre davantage sur les tests dans React, comment Utilisez la bibliothèque Jest pour tester nos composants et rédigez les bons tests pour vous assurer que tout fonctionne comme prévu. Nous allons également en apprendre davantage sur la bibliothèque de tests React, une bibliothèque qui peut nous aider à rédiger de meilleurs tests, avec certaines fonctions et méthodes exceptionnelles, qui nous garantissent que notre code est bien testé et sûr.

Ce scénario vous semble-t-il familier? Vous avez appris JavaScript, créé vos premières fonctions et objets, puis commencé à apprendre React, créé vos premiers composants React, appris des modèles et créé des exemples d'applications pour le monde réel à diffuser dans le monde et en savoir plus. Votre code n'est pas le meilleur code qui soit, vous vous souciez peu d'avoir une bonne lisibilité du code, vous n'avez pas beaucoup de code à réutiliser dans vos applications, vous répétez beaucoup de logique dans votre application et vous n'écrivez pas des tests pour tester vos composants et la logique d'état pour voir si tout fonctionne comme prévu. Vous ne savez pas avec certitude si vos fonctions et composants renvoient et rendent les données exactes que vous souhaitez, mais pour vous, tout est parfait.

Pendant longtemps, les tests en cours de développement étaient cachés et négligés. Nous ne nous sommes pas souciés de tester lorsque nous parlions de la création d’applications gigantesques nécessitant de meilleurs modèles de code. Nous étions trop occupés à réfléchir à de nouvelles façons de créer la même chose en utilisant quelque chose de nouveau et nous ne nous sommes pas souciés de tester notre code. Mais maintenant, les tests sont de plus en plus importants et jouent un rôle important dans nos applications, en s'assurant que tout fonctionne correctement.

Lorsque nous commençons à programmer, nous ne nous soucions pas des tests au début, mais ensuite, lorsque nous en sommes au stade du développement, nous devons commencer à nous en préoccuper et à y penser. Surtout lorsque nous voulons commencer à contribuer à l'open source, ou lorsque nous allons commencer à occuper un nouveau poste dans une entreprise, nous devons (et même parfois être obligés de) apprendre à commencer à tester notre code pour nous assurer que tout fonctionne bien.

Beaucoup de gens pensent que tester du code est une perte de temps et que nous ne devrions pas faire de test, mais ils ont tort ou ne comprennent pas comment des tests peuvent améliorer notre code et notre projets. Les tests sont une partie vitale de notre application. Grâce aux tests, nous pouvons garantir que notre code fonctionne bien et ne pose aucun problème. Les tests présentent de nombreux avantages. Maintenir de bons tests dans vos applications signifie que votre code est exactement comme vous le souhaitez et que vous n'exécuterez aucune erreur ou effet secondaire inattendu lors de l'exécution de votre application.

Mise en route

Pour tester une application réelle ici, nous allons tester une application de tâche! Cela s'appelle Cactus, et c'est une application de tâche de base construite en utilisant React Hooks. Si vous ne savez pas encore comment les crochets fonctionnent vous pouvez également en apprendre davantage à ce sujet en consultant simplement le code. Pour commencer le projet, il suffit de le cloner, de l'installer et de l'exécuter.

Il s'agit du lien vers le référentiel, il vous suffit donc de le cloner et de l'installer à l'aide de fil :

 fil installé
yarn start 

Ou, si vous utilisez npm:

 npm install
npm start 

Maintenant, l'application devrait fonctionner correctement pour vous à localhost: 3000 et comme vous pouvez le constater, il s'agit d'une application très simple pour la tâche. Vous pouvez ajouter une tâche à faire, puis supprimer une tâche si vous le souhaitez, pas trop sophistiqué, mais c'est l'idée de base de n'importe quelle application de tâche! Nous allons maintenant en apprendre davantage sur Jest pour pouvoir commencer à écrire nos tests.

Jest

Que vous soyez débutant ou que vous travaillez avec React depuis quelque temps déjà, vous avez peut-être entendu de Jest. Jest est un framework de test JavaScript qui nous aide à écrire des tests et à voir si tout fonctionne correctement dans nos applications. Jest n'est pas limité à React, vous pouvez donc l'utiliser dans n'importe quel projet JavaScript de votre choix, avec des bibliothèques ou des frameworks tels que Vue ou Angular, mais c'est le framework de test le plus utilisé dans React. Voyons maintenant comment fonctionnent les tests Jest et comment nous pouvons en tirer profit dans notre code en écrivant notre premier test.

Écrivons un test simple ici pour voir comment fonctionne Jest. Alors maintenant, créons un fichier simple dans notre projet cloné appelé fullName.test.js . Dans ce fullName.test.js nous allons créer une fonction appelée fullName qui va ressembler à ceci:

 const fullName = (prenom, lastName) = > `Hey $ {firstName} $ {lastName}, ceci est votre premier test utilisant Jest! '; 

Eh bien, assez basique, cette fonction prend juste le firstName et le lastName passé et nous retourne une chaîne. Alors maintenant, testons cette fonction pour voir si elle fonctionnera comme nous le voulons. Sous la fonction, posons le code suivant:

 describe ('Test de la fonction fullName', () => {
  // ...
}); 

La fonction décris crée ici une suite de tests. C'est un bon moyen de tester car avec lui, vous pouvez créer une suite de tests pour chaque partie de votre code sous forme de fonctions, composants, objets, modules, etc. Ainsi, dans cet exemple, nous allons tester une fonction spécifique, nous ' Nous allons créer une suite de tests spécifique. Dans cette fonction de description, nous allons passer une chaîne pour définir ce que nous testons et une fonction de rappel. À l'intérieur de cette fonction de rappel, nous allons créer une autre fonction, cette fois appelée elle :

 décris ('Test de la fonction nom complet', () => {
  it ('Doit retourner le nom complet', () => {
  });
}); 

La fonction il est l'endroit où nous allons écrire nos tests et vous devez passer une chaîne comme premier argument. Cette chaîne devrait être une description de ce que vous testez exactement. Vous voulez que votre code soit lisible afin que les autres puissent le comprendre. Pour un code plus propre et plus lisible, décrivez brièvement ce que vous testez. Dans notre exemple, nous allons tester si la fonction renvoie le nom complet que nous attendons. Nous passons donc cette chaîne spécifique. La fonction il prend également une fonction de rappel et, à l'intérieur de cette fonction, nous allons écrire notre test.

N'oubliez pas que la fonction il indique où nous allons. écrire nos tests, et chaque fonction décris peut avoir autant de fonctions que vous le souhaitez. La fonction décrit consiste simplement à créer une suite de tests et à nous aider à organiser notre code de test.

Maintenant, écrivons notre test. Premièrement, nous allons écrire ce à quoi nous nous attendons. Je vais créer un const appelé result ; ce const va être une chaîne, avec les données exactes que nous attendons en conséquence. Je vais passer mon nom comme argument, donc le résultat const devrait ressembler à ceci:

 const result = 'Hey Leonardo Maldonado, ceci est votre premier test utilisant Jest!'; 

Nous allons maintenant utiliser la fonction expect importée de Jest. Cette fonction nous permet d'utiliser des matchers. Fondamentalement, les correspondants sont des fonctions qui nous permettent de tester les valeurs de différentes manières. Si vous voulez voir tous les joueurs disponibles, vous pouvez cliquer sur ici .

Notre fonction attendue va ressembler à ceci:

 expect (nom complet ("Leonardo", "Maldonado")). toBe (résultat); 

Nous passons notre fonction fullName à l'intérieur de celle-ci et transmettons mon nom comme argument. Après le expect nous utilisons le matcher toBe qui vérifie si le résultat de la fonction fullName correspond au résultat const que nous avons créé. [19659005] Maintenant, passons à notre test et voyons le résultat. Tout ce que nous avons à faire, c'est de donner un test de fil ou un npm test et notre test devrait réussir!

Notre test réussit, comme vous pouvez le constater, et il fonctionne plutôt bien! Apprenons-en plus sur ce qu'est React Testing Library et comment cela peut nous aider à tester nos composants React.

Test des composants React

Pour tester nos composants React, nous allons utiliser une bibliothèque appelée React Testing Library. , qui est une bibliothèque d’utilitaires de test DOM React axée sur les bonnes pratiques. Le projet l'utilise déjà, vous n'avez donc pas besoin de l'installer.

Nous allons maintenant commencer à écrire nos tests de composants React. J'ai défini des objectifs et des tests que nous allons écrire pour voir si tout fonctionne bien. Pour tester notre application, j'ai pensé à un test évident qui devrait être écrit et qui nous aidera à comprendre comment les utiliser dans des applications du monde réel. Voici les tests que nous allons écrire:

• Test si nous obtenons la valeur correcte pour l'entrée: Après avoir tapé quelque chose sur l'entrée, nous devrions obtenir une valeur correcte.
• Test si l'ajout est fait. une tâche lorsque vous cliquez sur le bouton: Après avoir tapé quelque chose sur l'entrée et cliqué sur le bouton, la tâche doit être ajoutée à l'état des tâches.
• Vérifiez si vous supprimez une tâche lorsque vous cliquez sur l'icône X: Devrait supprimer la tâche après avoir cliqué sur l'icône X.

Test 1: Valeur correcte sur l'entrée

Écrivons maintenant notre premier test. Accédez à notre dossier Components et à l'intérieur de notre dossier AddTask nous allons créer un fichier appelé AddTask.test.js qui contiendra tous de nos tests pour ce composant.

Dans ce fichier, écrivons notre premier test. Nous allons tester si le rendu de notre composant est correct. Premièrement, importons certaines choses dont nous aurons besoin:

 import Réagissez à partir de 'réagit';
importer {render, fireEvent} de 'react-testing-library';
importer AddTask depuis './AddTask';

Notre test va être un test simple en utilisant la fonction render que nous avons importée de react-testing-library. Cela va ressembler à ceci:

 it ('rend le AddTask', () => {
  const {getByText} = render ()
  const button = getByText ('Ajouter')
  attendre (bouton.innerHTML) .toBe ('Ajouter')
}); 

Écrivons un autre test pour ce composant. Cette fois, nous allons tester si nous obtenons la valeur exacte de l’entrée attendue. Notre test va ressembler à ceci:

 it ('Obtenir la valeur de l'entrée', () => {
  const {getByTestId} = render ()
  const input = getByTestId ('input');
  fireEvent.change (entrée, {cible: {valeur: 'tâche'}});
  attendre (valeur.entrée) .toBe ('tâche')
}) 

Dans ce test, nous utilisons la fonction fireEvent qui est une fonction fournie par la bibliothèque react-testing-testing pour simuler un événement DOM. Dans ce cas en particulier, nous simulons un changement de la valeur de l'entrée.

Test 2: ajout d'une tâche au clic du bouton

Écrivons notre dernier test pour ce composant, mais nous devons tout d'abord savoir certaines choses. . Ce projet utilise des crochets React, qui constituent un nouveau moyen de gérer l'état dans React. Pour tester Hooks, nous allons utiliser une bibliothèque appelée react-hooks-testing-library une bibliothèque destinée à nous aider à tester nos React Hooks et à vérifier si tout fonctionne correctement.

Maintenant , nous allons exporter certaines choses de la bibliothèque react-hooks-testing-library:

 importer {renderHook, act} de "react-hooks-testing-library"; 

Et importer notre useTasks Accrochage personnalisé dans notre fichier de test:

 importez useTasks à partir de '../../hooks/useTasks';

Maintenant, écrivons notre test. Ce sera un test assez simple. Nous allons tester si nous ajoutons une nouvelle tâche à chaque fois que nous appelons la fonction addTask . Notre test va ressembler à ceci:

 it ('Devrait ajouter une tâche après avoir cliqué sur le bouton Ajouter', () => {
  const {result} = renderHook (() => useTasks ());
  expect (result.current.tasks.length) .toBe (0);
  act (() => result.current.addTask ());
  attendez (resultat.tasks.length actuel) .toBe (1);
}) 

Nous avons utilisé la fonction renderHook de la bibliothèque react-hooks-testing-test pour rendre notre crochet personnalisé, puis nous avons testé certaines choses: la longueur des tâches devrait être 0 puis après que nous ayons appelé le addTask il devrait être 1 . Très simple et lisible, même les personnes qui commencent par React Hooks et les tests peuvent parfaitement comprendre ce qui se passe.

Maintenant, écrivons les tests du composant Task . Dans notre dossier Task nous allons créer un fichier appelé Task.test.js et commencer à écrire nos tests.

Nous allons tout d'abord écrire un test pour vérifier si tout se passe bien, donc ça va ressembler à ceci:

 decrire ('Task', () => {
  it ('rend la tâche', () => {
    const props = {text: "Une tâche simple", index: 1, deleteTask: jest.fn ()};
    rendre ()
  });
}) 

Test 3: Suppression d'une tâche avec l'icône X

Maintenant, pour notre dernier test pour ce fichier de tâche, nous allons tester s'il supprime une tâche après l'appel de la fonction deleteTask. Comme auparavant, nous allons importer des éléments de la bibliothèque react-hooks-testing-test:

 import {renderHook, act} de "react-hooks-testing-library"; 

Importons maintenant. notre useTasks Crochet personnalisé à notre fichier de test:

 import useTasks de '../../hooks/useTasks';[19659012hnreCetestseraassezsimilaireauprécédentmaiscettefoisnousallonsutiliserla addTask  pour ajouter une tâche, puis nous appellerons la  deleteTask  pour supprimer cette tâche. Notre test ressemblera à ceci: this: 

 it ('Doit supprimer une tâche après avoir cliqué sur le bouton X', () => {
  const {result} = renderHook (() => useTasks ());
  expect (result.current.tasks.length) .toBe (0);
  act (() => result.current.addTask ());
  attendez (resultat.tasks.length actuel) .toBe (1);
  act (() => result.current.deleteTask ());
  expect (result.current.tasks.length) .toBe (0);
}) 
 Maintenant que nous avons testé nos Hooks, nous allons écrire les tests du composant  Tasks . Dans notre dossier  Tasks nous allons créer un fichier appelé  Tasks.test.js . Dans ce composant, nous n'écrirons qu'un seul test.
 Nous allons tester s'il rend une liste de tâches. Notre test ressemblera donc à ceci:
 it ('Render the Tasks', () => {
  tâches constantes = [{ text: "A simple task", deleteTask: jest.fn() }];
  const {getAllByTestId} = render ()
  const tâche = getAllByTestId ('tâche'). map (li => li.textContent);
  const fakeTasks = tasks.map (task => task.text);
  s'attendre (tâche) .toEqual (fakeTasks);
}) 
 Et nous avons terminé! Nous avons testé notre  useTasks  Custom Hook à l'aide de la bibliothèque react-testing-test, et maintenant nous n'obtiendrons aucune erreur lors de l'utilisation de notre application et nous avons laissé notre code plus sûr. Dans cet exemple, nous n'avons écrit que trois tests. Nous aurions pu écrire beaucoup plus pour couvrir beaucoup plus de notre application.
 Vous devriez commencer à tester votre code maintenant, car avec lui, vous garantissez que votre code est plus sûr, vous êtes exempt d'erreurs de production et la lisibilité de votre code est améliorée, car vous aurez besoin d'écrire un meilleur code pour écrire les bons tests. Ne paniquez pas et commencez à tout tester dans votre application, car parfois cela n'a aucun sens. Vous devez tester les parties critiques de vos applications, en imaginant des cas réels pouvant survenir avec vos utilisateurs.
 Conclusion
 Dans cet article, nous avons vu comment écrire des tests avec Jest et également tester des composants avec Bibliothèque de tests de réaction. Nous avons également appris comment tester nos hooks personnalisés à l’aide de la bibliothèque react-hooks-testing-test. Nous avons vu comment tester nos composants React à l'aide de la bibliothèque de réact-test et de ses fonctions en tant qu'événement fireEvent ou rendu, et comment tester correctement nos crochets React.
 Merci de l'avoir lu et au prochain article. !