Menú

Com provar React Apps amb Jest Framework

how test react apps using jest framework

Proveu El Nostre Instrument Per Eliminar Problemes

En aquest vídeo tutorial, aprendrem a crear i provar una aplicació React mitjançant Jest, Mocking mitjançant funcions Jest i Spying mitjançant l'ordre Jest spyOn:

A Introducció completa de Jest es va donar al nostre tutorial anterior. En aquest tutorial, veurem com utilitzar Jest per provar aplicacions basades en React.

Aprendrem a crear una aplicació React arrencada amb una aplicació senzilla sobre el nivell del mar i utilitzeu la mateixa aplicació per escriure proves de reacció de Jest. També explorarem el concepte de proves d’instantànies i coneixerem com es poden burlar i espiar els components de React mitjançant el marc Jest i l’ordre Jest spyon.

Provant aplicacions React i burles i espies Jest

Què aprendreu:

Reacciona - Introducció

Jest es va crear per provar àmpliament les aplicacions React juntament amb el suport per a la resta de marcs JavaScript.

Com que utilitzarem l'aplicació React per afegir el marc i les proves de Jest, és imprescindible i, de fet, és un requisit previ per tenir una comprensió bàsica de les aplicacions React.

Per començar a utilitzar una aplicació bàsica React, seguiu els passos següents:

# 1) Per crear una aplicació React, només podeu utilitzar un executor de paquets de nodes (és a dir, npx que també inclou npm) i executar l'ordre següent.

npx create-react-app my-app

# 2) Un cop s'hagi completat l'ordre anterior, obriu el projecte my-app a qualsevol editor que trieu: el codi Visual Studio que està disponible de forma gratuïta és recomanable.

# 3) A la finestra del terminal / ordre (dins de l'editor), executeu el projecte mitjançant l'ordre següent.

npm start

# 4) Un cop s'hagi compilat el projecte, s'obrirà una nova pestanya del navegador amb l'URL http: // localhost: 3000

# 5) A més, tingueu en compte que totes les dependències relacionades amb Jest s’instal·len com a part del projecte React creat mitjançant l’ordre npx esmentada anteriorment.

# 6) El projecte també inclou una biblioteca de proves React anomenada jest-dom que té molts ajudants personalitzats d’elements DOM personalitzats per a Jest. (Comprovar aquí per obtenir més detalls sobre els conceptes React)

Hi ha proves instantànies

La prova d’instantànies és una tècnica molt útil per provar instantànies de components React mitjançant la biblioteca Jest.

Intentem primer comprendre quines proves de captura de pantalla significa essencialment.

La instantània no és res més que una representació puntual de qualsevol cosa. Per exemple, una captura de pantalla, una imatge de càmera, etc. són instantànies que representen els detalls de qualsevol cosa durant un moment determinat.

Des de la perspectiva de React, Snapshot no és res més que un punt de representació o sortida d’un component React amb l’estat i el comportament subministrats.

Això s’explica amb un exemple senzill seguint els passos següents.

# 1) Per començar a fer proves d'instantànies, afegiu el paquet npm 'react-test-renderer' mitjançant l'ordre següent.

npm i react-test-renderer

# 2) Ara, creem un component React simple que serà la nostra aplicació en prova. Aquest component tindrà un estat senzill en forma de variables de classe i propietats de pàgina.

El component es veuria com es mostra a continuació. Anomenem aquest component com a enllaç (i, per tant, el nom corresponent del fitxer de component de reacció serà 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} ); } }

En aquest moment, és així com l’estructura de fitxers buscarà el projecte React.

Estructura de fitxers per al projecte React

# 3) Afegim una prova instantània d’aquest component.

a) Per començar amb la prova de la instantània: el paquet Node react-test-renderer és un requisit previ. Instal·la react-node-renderer mitjançant l'ordre següent.

npm i react-test-renderer

b) Afegiu un fitxer nou per afegir proves d’aquest nou component. Anomenem-ho com Link.test.js

c) Ara afegiu una prova instantània. Aquí, primer crearem una instantània representant el component React.

La prova quedaria com es mostra a continuació.

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(); });

Aquí a la prova, estem creant una representació JSON del component representat. Hem passat el valor de la propietat 'pàgina' com a 'www.softwaretestinghelp.com'

d) Quan s’executa la prova d’instantànies, es crea un fitxer d’instantànies del component (amb l’extensió .snap ) i desat al directori del projecte que es reutilitza durant les properes execucions de prova.

En aquest cas, s'utilitzaria un fitxer d'instantània amb la propietat de la pàgina tal com es va proporcionar durant la prova. Vegem el fitxer de captura de pantalla que es genera després d'executar la prova mitjançant l'ordre 'npm test'.

és) Es crea un fitxer d'instantània al directori anomenat '__snapshots__' del directori del projecte src.

no s'ha instal·lat cap reproductor de fitxers swf on flash d'ona de xoc

A continuació es mostra l'estructura del projecte per a això.

Directori

El directori '__snapshots__' de la captura de pantalla anterior es crea al directori arrel del projecte quan s'executa la prova per primera vegada.

f) Vegem com serà el fitxer de la instantània.

Obre el fitxer: Link.test.js.snap

Fitxer instantània

g) A la part superior es mostra la instantània que s’emmagatzema per al component determinat.

h) Ara, per exemple, la implementació del component anterior canvia. Per exemple, canviem el nom de la pàgina de propietats per un lloc del component i provem de tornar a executar la prova.

Així es canvia el component (hem canviat la pàgina anomenada propietat per una nova propietat anomenada lloc).

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} ); } }

Ara tornem a provar d'executar les proves. Com que ja tenim les instantànies al directori del projecte, s'espera que la nostra prova falli en aquest escenari, ja que el codi del component ha canviat i la coincidència de la instantània antiga serà un error.

A continuació es mostra el resultat que obtenim mentre s’executa la prova:

El codi del component ha canviat

(i) Ara, suposem que aquests canvis són els canvis necessaris i que necessitem les nostres proves per actualitzar la instantània anterior. En aquest cas, executeu les proves amb l'ordre d'actualització que sobreescriuria l'antiga instantània i en crearíeu una de nova basada en els nous canvis del component.

Executa l'ordre

yarn test -u

(j) Amb l'ordre anterior i l'afirmació actualitzada, veureu que la prova passa.

Per tant, la Prova d’instantànies en general és una tècnica útil per provar tot el component contra la vista final i emmagatzemar el resultat anterior com una instantània que garanteix que no s’introdueixen problemes de regressió com a conseqüència de canvis de codi o funcions o, per tant, de qualsevol refactorització al component existent.

Vídeo tutorial: hi ha proves instantànies

Burleta fent servir broma

En aquesta secció, veurem com podem fer servir els simulacres de broma. Els simulacres es poden utilitzar de moltes maneres, tal com es mostra a continuació.

Per exemple,

  1. Es burla de tot el component React
  2. Escarnir funcions individuals o múltiples: això no és específic per a cap marc de desenvolupament Javascript. Com que Jest és una biblioteca de proves de javascript que no és específica per a cap marc particular, fins i tot podem utilitzar Jest per burlar un fitxer Javascript antic i senzill que conté funcions.
  3. Mitjançant trucades d'API utilitzades dins de funcions o codi Javascript: podem utilitzar Jest per burlar les respostes de la integració de tercers.

Analitzem detalladament cadascun d’aquests mètodes de burla.

Components de reacció burleta

L’aplicació React es compon de diversos components dependents els uns dels altres. Per a una comprensió senzilla, considereu React Component com una classe amb presentació i lògica.

Igual que qualsevol sistema complex construït mitjançant la programació orientada a objectes es compon de diverses classes, de la mateixa manera, React App és una col·lecció de components.

Ara, quan provem un component, voldríem assegurar-nos que no hi hagi dependències que afectin la prova, és a dir, si hi ha 2 components, dels quals depèn el component que es prova, llavors si tenim els mitjans per burlar els components dependents, a continuació, podem provar per unitat el component sotmès a prova d’una manera més completa.

Intentem entendre-ho amb l'ajut de la figura següent:

Components de reacció burleta

Aquí tenim Component1, que depèn del Component 2 i 3.

Mentre provem unitats Component1, podem substituir Component2 i Component3 mitjançant Jest Mocks per les seves contraparts falses o burlades.

Vegem com podem configurar aquestes burles. Utilitzarem components simples amb un text HTML situat dins d’un div. En primer lloc, veurem el codi dels components dependents: Component2 i 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

Ara, vegem com serà el component 1 que té components dependents. Aquí podeu veure que importem els components dependents i els fem servir com a simple etiqueta HTML com & respectivament.

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

Ara, vegem com podem escriure proves d’aquest component. Per crear una prova, creeu una carpeta 'proves' al directori 'src'. Això és només per assegurar-nos que el nostre directori de projectes estigui net i organitzat.

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() }) })

Al fitxer de prova anterior, podeu veure que ens hem burlat de Components1 i 2 mitjançant la funció és.mock

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

Aquesta configuració simplement substituirà totes les invocacions de Component2 amb aquesta representació simulada. Per tant, quan representem Component1 a la prova, crida a la versió burlada de Component2, que també hem afirmat comprovant si els elements Mock div existeixen al document.

Aquí hem utilitzat el parell ‘toBeInTheDocument (). Aquest aparellador és React Specific, ja que la sortida representada final de les aplicacions React no és res més que codi HTML. Per tant, aquest aparellador busca que l'element HTML donat estigui present al document HTML creat per React.

Vídeo tutorial: Jest - Mock React Components

Funcions de burla mitjançant Jest

Ara, vegem com podem fer servir simulacions Jest per burlar una funció específica per a un fitxer JavaScript determinat.

Funcions de burla mitjançant Jest

A la figura anterior, podeu veure que substituïm la funció 2, que és la dependència de la funció 1 per una versió de funció 2 que es burla / es burla

Primer crearem un fitxer JavaScript de prova que servirà com a aplicació en prova i hi farem mofes d'alguns mètodes per il·lustrar el concepte de funció de burla.

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

Aquí tenim 2 funcions, és a dir, greet () i getFullName (). La funció greet () utilitza getFullName () per obtenir el nom complet. Veurem com podem substituir la funció getFullName () per la seva implementació simulada mentre provem el mètode greet ().

Escrivim una prova senzilla per burlar aquest comportament mitjançant la funció de burla de broma i veure com podem validar si la funció burlada es va cridar o no.

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') })

Aquí hem declarat una funció simulada Jest i hem configurat un valor de retorn com a 'nom simulat' que es retornarà quan es cridi la funció.

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

A més, per validar que es va trucar al simulacre, podem utilitzar els aparells Jest com es mostra a continuació.

  • toHaveBeenCalled (): valida si es va trucar a la simulació.
  • toHaveBeenCalledWith (arg1, arg2): valida si es va cridar la simulació amb els arguments donats.
  • toHaveBeenCalledTimes (n): valida el nombre de vegades que s'hauria trucat al simulador.

Hi ha una altra característica de Jest que es diu Spy.

Llavors, què són els espies i en què es diferencien de les burles?

La majoria de les vegades, Spies permet la trucada de funció real, però es podria utilitzar per validar coses com ara els arguments que s’utilitzaven per anomenar el mètode i també per determinar si la trucada del mètode va passar o no.

L’espionatge a Jest es pot dur a terme Hi ha spyOn comandament. Jest spyOn pren arguments com a objecte i la funció real a espiar, és a dir, realment cridarà la funció que s’està provant i actuarà com a interceptor intermedi.

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') })

Així, al codi anterior, podeu observar que:

(i) Hem configurat un mètode espia 'getFullName' mitjançant l'ordre següent.

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

(ii) En afirmacions, estem verificant que es cridés a l'espia amb els arguments esperats.

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

L'ordre Jest spyOn també es pot utilitzar per especificar una implementació simulada que s'hauria de cridar en lloc de la funció real mitjançant l'ordre següent.

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

En aquest cas, la trucada de funció real se substitueix per una falsa implementació configurada amb l’espia.

Video Tutorial: Funcions Jest-Mock Api

Escarnir trucades d'API externes mitjançant Jest

A la figura següent, podeu veure que function1 fa trucades a un punt final d’API extern. Per exemple - trucar a un punt final de soci de pagament que doni resposta a l'èxit o al fracàs.

Ara, quan escrivim proves unitàries per a aquesta funció, no podem esperar trucar al punt final extern cada vegada que s’executen les proves.

Hi ha un parell de motius pels quals evitaríeu trucar a extrems externs a la prova.

  • Pot implicar un cost.
  • La seva resposta no es pot controlar. No sempre podeu provar tots els codis d'error i de resposta esperats.
  • Pot ser que no sempre estigui disponible; si el punt final extern no està disponible, els resultats de la prova seran escassos.

Escarnir trucades d

Per tots aquests motius, seria molt útil que poguéssim controlar i analitzar el comportament del punt final extern i crear proves unitàries robustes per a la nostra funció.

Vegem com podem aconseguir burles de trucades API mitjançant el marc Jest. Axios és un mòdul NPM que es pot descarregar / afegir al projecte mitjançant l'ordre següent.

npm install --save-dev axios

Utilitzarem el mòdul 'axios' per fer trucades API a la nostra funció de prova, tal com es mostra a continuació.

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

Estem donant un punt final extern fictici que retorna dades falses i registra l'èxit i la resposta d'errors.
Ara, en la nostra prova unitària, farem mofes del mòdul axios i retornarem una resposta falsa o burlada quan la funció cridi aquest punt final extern.

El codi de prova es mostrarà com es mostra a continuació.

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') }) })

Aquí, és important entendre que aquí ens burlem de tot el mòdul 'axios', és a dir, qualsevol trucada que vagi al mòdul Axios durant l'execució de la prova anirà a la implementació burlada i retornarà una resposta tal com es configura a la prova.

El mòdul es burla mitjançant l'ordre següent.

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

Hem configurat el simulacre mitjançant l'ordre següent.

axios.get.mockResolvedValue(mockedResponse)

D'aquesta manera, podem fer mofes de respostes des de punts finals de l'API externa. Aquí hem utilitzat un punt final 'GET', però també es podria utilitzar el mateix enfocament per a altres punts finals, com ara POST, PUT, etc.

la millor aplicació gratuïta de descàrrega de mp3 per a Android

Vídeo tutorial: Jest - Mock Api Endpoints

Conclusió

En aquest tutorial, vam aprendre a crear una aplicació simple React i vam veure com es pot utilitzar Jest React per realitzar proves d’instantànies en components React i burlar-se dels components React en el seu conjunt.

També vam explorar Mocking mitjançant funcions Jest i Spying mitjançant l'ordre Jest spyOn que crida a la implementació real del mètode i actua com a interceptor per afirmar sobre coses com el nombre d'invocacions, arguments amb els quals es va cridar el mètode, etc.

PREV Tutorial | NEXT Tutorial

Lectura recomanada

^