Menu

Comment tester les applications React à l'aide de Jest Framework

  • Principal
  • Autre
  • Comment tester les applications React à l'aide de Jest Framework

how test react apps using jest framework

Essayez Notre Instrument Pour Éliminer Les Problèmes

Dans ce didacticiel vidéo, nous allons apprendre à créer et tester une application React en utilisant Jest, Mocking en utilisant les fonctions Jest et Spying à l'aide de la commande Jest spyOn:

À Introduction complète de Jest a été donnée dans notre tutoriel précédent. Dans ce tutoriel, nous verrons comment utiliser Jest pour tester les applications basées sur React.

Nous allons apprendre à créer une application React bootstrap en utilisant un simple au dessus du niveau de la mer basée sur la commande et utilisez la même application pour écrire des tests de réaction Jest. Nous explorerons également le concept de test d'instantanés et découvrirons comment vous pouvez simuler et espionner les composants React à l'aide du framework Jest et de la commande Jest spyon.

Tester les applications React et les moqueries et les espions Jest

Ce que vous apprendrez:

React - Premiers pas

Jest a été conçu pour tester de manière approfondie les applications React avec la prise en charge de tous les autres frameworks JavaScript.

Comme nous utiliserons l'application React pour ajouter le framework et les tests Jest, il est impératif et même préalable d'avoir une compréhension de base des applications React.

Pour commencer avec une application React de base, veuillez suivre les étapes ci-dessous:

#1) Pour créer une application React, vous pouvez simplement utiliser un exécuteur de package de nœuds (c'est-à-dire npx qui vient également avec npm) et exécuter la commande ci-dessous.

npx create-react-app my-app

#deux) Une fois la commande ci-dessus terminée, ouvrez le projet my-app dans n'importe quel éditeur de votre choix - Visual Studio Code qui est disponible gratuitement est recommandé.

# 3) Dans la fenêtre de terminal / commande (dans l'éditeur), exécutez le projet en utilisant la commande ci-dessous.

npm start

# 4) Une fois le projet compilé, il ouvrira un nouvel onglet de navigateur avec l'URL http: // localhost: 3000

# 5) Veuillez également noter que toutes les dépendances liées à Jest sont installées dans le cadre du projet React créé à l'aide de la commande npx mentionnée ci-dessus.

# 6) Le projet comprend également une bibliothèque de tests React nommée jest-dom qui contient de nombreux correspondants d'éléments DOM personnalisés utiles pour Jest. (Vérifier ici pour plus de détails sur les concepts React)

Il y a des tests d'instantané

Le test d'instantanés est une technique très utile pour tester les instantanés des composants React à l'aide de la bibliothèque Jest.

Essayons d'abord de comprendre quels tests d'instantanés signifie essentiellement.

L'instantané n'est rien d'autre qu'une représentation ponctuelle de quoi que ce soit. Par exemple, une capture d'écran, une image de la caméra, etc. sont tous des instantanés qui représentent les détails de quoi que ce soit à un moment donné.

Du point de vue de React, Snapshot n'est rien d'autre qu'une représentation ponctuelle ou une sortie d'un composant React avec l'état et le comportement fournis.

Ceci est expliqué avec un exemple simple en utilisant les étapes ci-dessous.

#1) Pour commencer à tester les instantanés, ajoutez le package npm «react-test-renderer» à l'aide de la commande ci-dessous.

npm i react-test-renderer

#deux) Maintenant, créons un composant React simple qui sera notre application en cours de test. Ce composant aura un état simple sous la forme de variables de classe et de propriétés de page.

Le composant ressemblerait à celui ci-dessous. Appelons ce composant Link (et le nom de fichier du composant de réaction correspondant sera Link.react.js)

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.page} {this.state.welcomeMessage} ); } }

À ce stade, voici comment la structure de fichiers recherchera le projet React.

Structure de fichier pour le projet React

# 3) Ajoutons un test d’instantané pour ce composant.

à) Pour démarrer avec le test de cliché - Le package Node react-test-renderer est un prérequis. Installer react-node-renderer en utilisant la commande ci-dessous.

npm i react-test-renderer

b) Ajoutez un nouveau fichier pour ajouter des tests pour ce nouveau composant. Appelons-le comme Link.test.js

c) Ajoutez maintenant un test d'instantané. Ici, nous allons d'abord créer un instantané en rendant le composant React.

Le test ressemblerait à celui ci-dessous.

import React from 'react'; import Link from './Link.react' import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create() .toJSON(); console.log(tree) expect(tree).toMatchSnapshot(); });

Ici, dans le test, nous créons une représentation JSON du composant rendu. Nous avons transmis la valeur de la propriété 'page' à 'www.softwaretestinghelp.com'

ré) Lors de l'exécution du test d'instantané, un fichier d'instantané du composant est créé (avec l'extension .se casser ) et sauvegardé dans le répertoire du projet qui est réutilisé lors des prochaines exécutions de test.

Dans ce cas, un fichier d'instantané avec la propriété de page telle que fournie lors du test serait utilisé. Voyons le fichier instantané généré après l'exécution du test à l'aide de la commande 'npm test'.

est) Un fichier d'instantané est créé dans un répertoire nommé «__snapshots__» dans le répertoire src du projet.

questions et réponses d'entretien de sélénium webdriver pour les expérimentés

Vous trouverez ci-dessous la structure du projet pour cela.

Répertoire «__snapshots__»

Le répertoire «__snapshots__» dans la capture d'écran ci-dessus est créé dans le répertoire racine du projet lorsque le test s'exécute pour la première fois.

F) Voyons à quoi ressemblera le fichier d’instantané.

Ouvrir le fichier - Link.test.js.snap

Fichier instantané

g) Ci-dessus, l'instantané qui est stocké pour le composant donné.

h) Maintenant, par exemple, la mise en œuvre des changements de composants ci-dessus. Par exemple, modifions le nom de la page de propriétés en un site du composant, et essayons à nouveau d'exécuter le test.

C'est ainsi que le composant est modifié (nous avons changé la propriété nommée page en une nouvelle propriété nommée site).

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.site} {this.state.welcomeMessage} ); } }

Essayons maintenant de relancer les tests. Comme nous avons déjà les instantanés dans le répertoire du projet, notre test devrait échouer dans ce scénario - car le code du composant a changé et l'ancienne correspondance d'instantané sera un échec.

Ci-dessous, le résultat que nous obtenons lors de l'exécution du test:

Le code du composant a changé

(je) Supposons maintenant que ces modifications soient les modifications requises et nécessitent nos tests pour mettre à jour l'ancien instantané. Dans ce cas, exécutez les tests avec la commande de mise à jour qui écraserait l'ancien instantané et en créerait un nouveau en fonction des nouvelles modifications du composant lui-même.

Exécuter la commande

yarn test -u

(j) Avec la commande ci-dessus et l'assertion mise à jour, vous verrez le test passer.

Ainsi, le test d'instantané global est une technique utile pour tester l'ensemble du composant par rapport à la vue finale et stocker l'ancien résultat sous forme d'instantané, ce qui garantit qu'aucun problème de régression n'est introduit à la suite de changements de code ou de fonctionnalités ou d'ailleurs de toute refactorisation. au composant existant.

Tutoriel vidéo: il y a des tests d'instantanés

Se moquer à l'aide de Jest

Dans cette section, nous verrons comment utiliser les simulations Jest. Les simulacres peuvent être utilisés de nombreuses manières, comme indiqué ci-dessous.

Par exemple,

  1. Se moquer de tout le composant React
  2. Mocking des fonctions simples ou multiples - Ceci n'est spécifique à aucun cadre de développement Javascript. Comme Jest est une bibliothèque de test javascript qui n'est spécifique à aucun framework particulier, nous pouvons même utiliser Jest pour simuler un ancien fichier Javascript contenant des fonctions.
  3. Appels d'API moqueurs utilisés dans des fonctions ou du code Javascript - Nous pouvons utiliser Jest pour simuler les réponses d'une intégration tierce.

Discutons en détail de chacune de ces méthodes moqueuses.

Composants moqueurs de React

React App est composé de plusieurs composants dépendants les uns des autres. Pour une compréhension simple, considérez React Component comme une classe - avec présentation et logique.

Comme tout système complexe construit à l'aide de la programmation orientée objet est composé de plusieurs classes, de la même manière, React App est une collection de composants.

Maintenant, lorsque nous testons un composant, nous voudrions nous assurer qu'il n'y a pas de dépendances qui impactent le test, c'est-à-dire s'il y a 2 composants dont dépend le composant testé, alors si nous avons les moyens de nous moquer des composants dépendants, ensuite, nous pouvons tester de manière plus complète le composant testé.

Essayons de comprendre cela à l'aide de la figure ci-dessous:

Composants moqueurs de React

Ici, nous avons le composant 1, qui dépend des composants 2 et 3.

Pendant les tests unitaires du composant1, nous pouvons remplacer le composant2 et le composant3 en utilisant Jest Mocks par leurs homologues faux ou simulés.

Voyons comment nous pouvons mettre en place ces simulations. Nous utiliserons des composants simples avec un texte Html placé à l'intérieur d'un div. Tout d'abord, nous verrons le code des composants dépendants - Component2 et Component3 .

import React, { Component} from 'react' class Component2 extends Component { render() { return( Hello Component2 ) } } export default Component2 import React, { Component} from 'react' class Component3 extends Component { render() { return( Hello Component3 ) } } export default Component3

Voyons maintenant à quoi ressemblera le composant1 qui a des composants dépendants. Ici, vous pouvez voir que nous importons les composants dépendants et les utilisons comme une simple balise HTML comme & respectivement.

import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1

Voyons maintenant comment nous pouvons écrire des tests pour ce composant. Pour créer un test, créez un dossier «tests» dans le répertoire «src». C'est juste pour nous assurer que notre répertoire de projet reste propre et organisé.

le meilleur convertisseur youtube en mp3
import React, {Component} from 'react' import {render, container} from '@testing-library/react' import Component1 from '../components/component1' // arrange - mock setup jest.mock('../components/component2', () => () => Hello Mock Component2 ) jest.mock('../components/component3', () => () => Hello Mock Component3 ) describe('mock component tests', () => { test('mocked components in react', () => { // act const {container} = render() // assert console.log(container.outerHTML) const mockComponent2 = container.querySelector('div#mockComponent2') const mockComponent3 = container.querySelector('div#mockComponent3') expect(mockComponent2).toBeInTheDocument() expect(mockComponent3).toBeInTheDocument() }) })

Dans le fichier de test ci-dessus, vous pouvez voir que nous nous sommes moqués de Components1 & 2 en utilisant la fonction is.mock

jest.mock('../components/component2', () => () => Hello Mock Component2 )

Cette configuration remplacera simplement toutes les invocations de Component2 par cette représentation simulée. Ainsi, lorsque nous rendons Component1 dans le test, il appelle la version simulée de Component2, ce que nous avons également affirmé en vérifiant si les éléments div Mock existent dans le document.

Nous avons utilisé le matcher ‘toBeInTheDocument () ici. Ce matcher est spécifique à React, car le rendu final des applications React n'est rien d'autre que du code HTML. Ainsi, ce matcher recherche l'élément HTML donné présent dans le document HTML créé par React.

Tutoriel vidéo: Jest - Composants Mock React

Fonctions moqueuses utilisant Jest

Voyons maintenant comment nous pouvons utiliser les simulations Jest, pour simuler une fonction spécifique pour un fichier JavaScript donné.

Fonctions moqueuses utilisant Jest

Dans la figure ci-dessus, vous pouvez voir que nous remplaçons la fonction 2 qui est la dépendance de function1 par une version stubbed / simulée de la fonction 2

Nous allons d'abord créer un fichier JavaScript de test qui servira d'application à tester et nous nous moquerons de certaines méthodes pour illustrer le concept de la fonction moqueuse.

function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}

Nous avons 2 fonctions ici, à savoir saluer () et getFullName (). La fonction greet () utilise getFullName () pour obtenir le nom complet. Nous verrons comment nous pouvons remplacer la fonction getFullName () par sa mise en œuvre fictive tout en testant la méthode greet ().

Écrivons un test simple pour simuler ce comportement à l'aide de la fonction simulée Jest et voir comment nous pouvons valider si la fonction simulée a été appelée ou non.

test('illustrate mocks', () => { // arrange const mock = jest.fn().mockReturnValue('mocked name') const greeter = require('../app.js') greeter.getFullName = mock // act const result = greeter.greet('aman', 'kumar') // assert expect(result).toBe('Hello! mocked name') expect(mock).toHaveBeenCalled() expect(mock).toHaveBeenCalledTimes(1) expect(mock).toHaveBeenCalledWith('aman','kumar') })

Ici, nous avons déclaré une fonction fictive Jest et mis en place une valeur de retour en tant que «nom fictif» qui sera retourné lorsque la fonction sera appelée.

const mock = jest.fn().mockReturnValue('mocked name')

De plus, pour valider que le simulacre a été appelé, nous pouvons utiliser les matchers Jest comme indiqué ci-dessous.

  • toHaveBeenCalled () - Valide si la maquette a été appelée.
  • toHaveBeenCalledWith (arg1, arg2) - Valide si la simulation a été appelée avec les arguments donnés.
  • toHaveBeenCalledTimes (n) - Valide le nombre de fois où le Mock aurait été appelé.

Il existe une autre fonctionnalité de Jest qui s'appelle Spy.

Alors, que sont les espions et en quoi diffèrent-ils des simulacres?

La plupart du temps, Spies autorise l'appel de fonction réel, mais pourrait être utilisé pour valider des choses comme les arguments utilisés pour appeler la méthode et également pour vérifier si l'appel de la méthode s'est produit ou non.

L'espionnage dans Jest peut être fait par Il y a spyOn commander. Jest spyOn prend les arguments comme l'objet et la fonction réelle à espionner, c'est-à-dire qu'il appellera en fait la fonction testée et agira comme un intercepteur intermédiaire.

test('illustrate spy', () => { // arrange const greeter = require('../app.js') const getFullNameSpy = jest.spyOn(greeter, 'getFullName') // act const result = greeter.greet('aman', 'kumar') // assert expect(getFullNameSpy).toHaveBeenCalled() expect(result).toBe('Hello! aman kumar') expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') })

Ainsi, dans le code ci-dessus, vous pouvez observer que:

(je) Nous avons configuré une méthode d'espionnage 'getFullName' à l'aide de la commande ci-dessous.

const getFullNameSpy = jest.spyOn(greeter, 'getFullName')

(ii) Dans les assertions, nous vérifions que l'espion a été appelé avec les arguments attendus.

expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')

La commande Jest spyOn peut également être utilisée pour spécifier une implémentation fictive qui doit être appelée à la place de la fonction réelle à l'aide de la commande ci-dessous.

const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()

Dans ce cas, l'appel de fonction réel est remplacé par une implémentation fictive qui est configurée avec l'espion.

Tutoriel vidéo: Jest - Fonctions Mock Api

Se moquer des appels d'API externes à l'aide de Jest

Dans la figure ci-dessous, vous pouvez voir que function1 effectue des appels à un point de terminaison d'API externe. Par exemple - appeler un point de terminaison partenaire de paiement qui donne une réponse de succès ou d'échec.

Maintenant, lorsque nous écrivons des tests unitaires pour cette fonction, nous ne pouvons pas nous attendre à appeler le point de terminaison externe à chaque fois que les tests sont exécutés.

Il y a plusieurs raisons pour lesquelles vous éviteriez d'appeler des points de terminaison externes dans le test.

  • Cela peut entraîner des coûts.
  • Sa réponse ne peut être contrôlée. Vous ne pouvez pas toujours tester tous les codes de réponse et d'erreur attendus.
  • Il peut ne pas être toujours disponible - si le point de terminaison externe n'est pas disponible, les résultats des tests seront irréguliers.

Se moquer des appels d

Pour toutes ces raisons, il serait très utile que nous puissions contrôler et stuber le comportement du point de terminaison externe et créer des tests unitaires robustes pour notre fonction.

Voyons comment nous pouvons réaliser des appels d'API simulés à l'aide du framework Jest. Axios est un module NPM qui peut être téléchargé / ajouté au projet à l'aide de la commande ci-dessous.

npm install --save-dev axios

Nous utiliserons le module «axios» pour effectuer des appels API dans notre fonction de test, comme indiqué ci-dessous.

function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }

Nous atteignons un point de terminaison externe factice qui renvoie de fausses données et enregistre le succès et la réponse aux erreurs.
Maintenant, dans notre test unitaire, nous allons nous moquer du module axios et retourner une réponse fausse ou simulée lorsque la fonction appelle ce point de terminaison externe.

Le code de test ressemblera à celui ci-dessous.

const axios = require('axios') jest.mock('axios'); describe('mock api calls', () => { test('mocking external endpoint in axios', () => { // arrange const mockedResponse = {data: {username:'test-user', address:'India'}} axios.get.mockResolvedValue(mockedResponse) const app = require('../app.js') // act app.getUserData() // asserts expect(axios.get).toHaveBeenCalled() expect(axios.get).toHaveBeenCalledWith('https://reqres.in/api/users/2') }) })

Ici, il est important de comprendre que nous nous moquons de l'ensemble du module «axios» ici, c'est-à-dire que tout appel qui va au module Axios pendant l'exécution du test ira à l'implémentation simulée et retournera une réponse telle que configurée dans le test.

Le module est simulé à l'aide de la commande ci-dessous.

const axios = require('axios') jest.mock('axios');

Nous avons configuré la maquette en utilisant la commande ci-dessous.

axios.get.mockResolvedValue(mockedResponse)

De cette façon, nous pouvons simuler les réponses des points de terminaison d'API externes. Ici, nous avons utilisé un point de terminaison «GET», mais la même approche pourrait également être utilisée pour d'autres points de terminaison tels que POST, PUT, etc.

Tutoriel vidéo: Jest - Mock Api Endpoints

Conclusion

Dans ce didacticiel, nous avons appris à créer une application React simple et avons vu comment Jest React peut être utilisé pour effectuer des tests d'instantané sur les composants React ainsi que pour se moquer des composants React dans leur ensemble.

Nous avons également exploré la moquerie en utilisant les fonctions Jest et Spying en utilisant la commande Jest spyOn qui appelle l'implémentation réelle de la méthode et agit comme un intercepteur pour affirmer des choses comme le nombre d'invocations, les arguments avec lesquels la méthode a été appelée, etc.

Tutoriel PREV | Tutoriel SUIVANT

lecture recommandée

^