Meniu

Cum să testați aplicațiile React folosind Jest Framework

  • Principal
  • Alte
  • Cum să testați aplicațiile React folosind Jest Framework

how test react apps using jest framework

Încercați Instrumentul Nostru Pentru Eliminarea Problemelor

În acest tutorial video, vom învăța să creăm și să testăm o aplicație React folosind Jest, Mocking folosind funcțiile Jest și Spying folosind comanda Jest spyOn:

LA Introducere completă a Jest a fost dat în tutorialul nostru anterior. În acest tutorial, vom vedea cum să utilizați Jest pentru testarea aplicațiilor bazate pe React.

Vom învăța să creăm o aplicație React bootstrapped folosind un simplu deasupra nivelului mării comandă bazată și utilizați aceeași aplicație pentru scrierea testelor de reacție Jest. Vom explora, de asemenea, conceptul de testare instantanee și vom cunoaște modul în care puteți derida și spiona componentele React folosind cadrul Jest și comanda Jest spyon.

Testarea aplicațiilor React & Jest batjocori și spioni

Ce veți învăța:

React - Noțiuni introductive

Jest a fost creat pentru testarea extensivă a aplicațiilor React, împreună cu suportul pentru toate celelalte cadre JavaScript.

Deoarece vom folosi aplicația React pentru a adăuga cadrul și testele Jest, este imperativ și într-adevăr o condiție prealabilă să avem o înțelegere de bază a aplicațiilor React.

Pentru a începe cu o aplicație de bază React, urmați pașii de mai jos:

# 1) Pentru a crea o aplicație React, puteți utiliza pur și simplu un executor de pachete nod (adică npx care vine, de asemenea, împreună cu npm) și executați comanda de mai jos.

npx create-react-app my-app

#Două) După finalizarea comenzii de mai sus, deschideți proiectul aplicația mea în orice editor la alegere - Codul Visual Studio care este disponibil gratuit este unul recomandat.

# 3) În fereastra terminal / comandă (în interiorul editorului), rulați proiectul utilizând comanda de mai jos.

npm start

# 4) Odată ce proiectul este compilat, acesta va deschide o nouă filă de browser cu adresa URL http: // localhost: 3000

# 5) De asemenea, vă rugăm să rețineți că toate dependențele legate de Jest vin instalate ca parte a proiectului React creat folosind comanda npx menționată mai sus.

# 6) Proiectul include, de asemenea, o bibliotecă de testare React numită jest-dom, care are o mulțime de elemente de potrivire personalizate DOM pentru Jest. (Verifica Aici pentru mai multe detalii despre conceptele React)

Există Testarea instantanee

Testarea instantaneelor ​​este o tehnică foarte utilă pentru a testa instantanee ale componentelor React folosind biblioteca Jest.

Să încercăm mai întâi să înțelegem ce testare instantanee înseamnă în esență.

Instantaneul nu este altceva decât un punct de reprezentare a timpului a orice. De exemplu, o captură de ecran, o imagine a camerei foto etc. sunt toate instantanee care reprezintă detalii despre orice pentru un anumit moment.

Din perspectiva React, Instantaneul nu este altceva decât un punct de reprezentare în timp sau o ieșire a unei componente React cu starea și comportamentul furnizat.

Acest lucru este explicat cu un exemplu simplu folosind pașii de mai jos.

# 1) Pentru a începe cu testarea instantanee, adăugați pachetul npm „react-test-renderer” folosind comanda de mai jos.

npm i react-test-renderer

#Două) Acum, să creăm o componentă simplă React, care va fi aplicația noastră testată. Această componentă va avea o stare simplă sub formă de variabile de clasă și proprietăți ale paginii.

Componenta ar arăta așa cum se arată mai jos. Să denumim această componentă ca Link (și astfel numele corespunzător al fișierului de reacție al componentei va fi 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} ); } }

În acest moment, așa va arăta structura fișierului pentru proiectul React.

Structura fișierelor pentru proiectul React

# 3) Să adăugăm un test instantaneu pentru această componentă.

la) Pentru a începe cu testul instantaneu - Pachetul Node react-test-renderer este o condiție prealabilă. Instalare react-nod-renderer folosind comanda de mai jos.

npm i react-test-renderer

b) Adăugați un fișier nou pentru adăugarea de teste pentru această nouă componentă. Să-l numim așa Link.test.js

c) Acum adăugați un test instantaneu. Aici, vom crea mai întâi un instantaneu prin redarea componentei React.

Testul ar arăta așa cum se arată mai jos.

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

Aici, în test, creăm o reprezentare JSON a componentei redate. Am trecut valoarea pentru proprietatea „pagină” ca „www.softwaretestinghelp.com”

d) Când se execută testul instantaneu - se creează un fișier instantaneu al componentei (cu extensia .snap ) și salvat în directorul proiectului care este reutilizat în timpul următoarelor execuții de testare.

În acest caz, va fi utilizat un fișier instantaneu cu proprietatea paginii, așa cum a fost furnizat în timpul testului. Să vedem fișierul instantaneu generat după rularea testului utilizând comanda „test npm”.

este) Un fișier instantaneu este creat sub un director numit „__snapshots__” în directorul proiectului src.

software ceas în ceas gratuit

Mai jos este prezentată structura proiectului pentru aceasta.

Directorul „__snapshots__”

Directorul „__snapshots__” din captura de ecran de mai sus se creează în directorul rădăcină al proiectului atunci când testul se execută pentru prima dată.

f) Să vedem cum va arăta fișierul instantaneu.

Deschideți fișierul - Link.test.js.snap

Fișier instantaneu

g) Mai sus este prezentat instantaneul care este stocat pentru componenta dată.

h) Acum, de exemplu, implementarea componentei de mai sus se schimbă. De exemplu, să schimbăm numele paginii proprietății cu un site din componentă și să încercăm din nou să rulăm testul.

Așa se modifică componenta (am schimbat proprietatea numită pagina într-o proprietate nouă numită 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} ); } }

Acum, să încercăm din nou să rulăm testele. Deoarece avem deja instantaneele în directorul proiectului, se așteaptă ca testul nostru să eșueze în acest scenariu - deoarece codul componentului s-a schimbat și vechea potrivire a instantaneului va fi un eșec.

Dat mai jos este rezultatul pe care îl obținem în timp ce rulăm testul:

Codul componentei sa schimbat

(i) Acum, să presupunem că aceste modificări sunt modificările necesare și necesită testele noastre pentru a actualiza vechiul instantaneu. În acest caz, rulați testele cu comanda de actualizare care ar suprascrie vechiul instantaneu și ar crea unul nou pe baza noilor modificări ale componentei în sine.

Executa comanda

yarn test -u

(j) Cu comanda de mai sus și afirmația actualizată, veți vedea testul trecând.

Astfel, testarea generală a instantaneului este o tehnică utilă pentru a testa întreaga componentă împotriva vizualizării finale și a stoca vechiul rezultat ca instantaneu care asigură că nu sunt introduse probleme de regresie ca urmare a modificărilor de cod sau a caracteristicilor sau, de altfel, orice refactorizare la componenta existentă.

Tutorial video: există testare instantanee

Batjocorind folosind Jest

În această secțiune, vom vedea cum putem folosi jocurile Jest. Mock-urile pot fi utilizate în numeroase moduri, așa cum se arată mai jos.

De exemplu,

  1. Batjocorind întreaga componentă React
  2. Derularea funcțiilor simple sau multiple - Acest lucru nu este specific niciunui cadru de dezvoltare Javascript. Deoarece Jest este o bibliotecă de testare javascript care nu este specifică unui anumit cadru, putem folosi chiar Jest pentru a batjocori un fișier Javascript vechi simplu care conține funcții.
  3. Apeluri de batjocorire API folosite în funcții sau cod Javascript - Putem folosi Jest pentru a bate joc de răspunsuri de la integrarea terților.

Să discutăm fiecare dintre aceste metode de batjocură în detaliu.

Componente de reacție batjocoritoare

Aplicația React este compusă din mai multe componente dependente una de cealaltă. Pentru o înțelegere simplă, considerați React Component ca o clasă - având prezentare și logică.

Ca orice sistem complex construit folosind programarea orientată pe obiecte este compus din mai multe clase, în mod similar, React App este o colecție de componente.

Acum, când testăm o componentă, ne-am dori să ne asigurăm că nu există dependențe care să aibă impact asupra testării acesteia, adică dacă există 2 componente, de care este dependentă componenta testată, atunci dacă avem mijloacele de a batjocori componentele dependente, atunci putem testa unitatea componentei testate într-un mod mai complet.

Să încercăm să înțelegem acest lucru cu ajutorul figurii de mai jos:

Componente de reacție batjocoritoare

Aici avem Component1, care este dependentă de Componenta 2 și 3.

În timp ce testăm unitatea Component1, putem înlocui Component2 și Component3 folosind Jest Mock cu omologii lor falși sau batjocoriți.

Să vedem cum putem configura aceste batjocuri. Vom folosi componente simple cu un text HTML plasat în interiorul unui div. În primul rând, vom vedea codul pentru componentele dependente - 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

Acum, să vedem cum va arăta Componenta1 care are componente dependente. Aici puteți vedea că importăm componentele dependente și le folosim ca o simplă etichetă HTML, cum ar fi & respectiv.

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

Acum, să vedem cum putem scrie teste pentru această componentă. Pentru a crea un test, creați un folder „teste” în directorul „src”. Aceasta este doar pentru a ne asigura că directorul nostru de proiecte rămâne curat și organizat.

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

În fișierul de test de mai sus, puteți vedea că am batjocorit Componentele1 și 2 folosind funcția este.most

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

Această configurare va înlocui pur și simplu toate invocațiile Component2 cu această reprezentare falsă. Deci, atunci când redăm Component1 în test, apelează versiunea batjocorită a Component2, pe care am afirmat-o și verificând dacă elementele Mock div există în document.

Am folosit „toBeInTheDocument () matcher aici. Acest meci este React Specific, întrucât ieșirea finală a aplicațiilor React nu este altceva decât cod HTML. Astfel, acest potrivitor caută ca elementul HTML dat să fie prezent în documentul HTML creat de React.

Tutorial video: Componente Jest - Mock React

Funcții de batjocură folosind Jest

Acum, să vedem cum putem folosi jocurile Jest, pentru a bate joc de o funcție specifică pentru un anumit fișier JavaScript.

Funcții de batjocură folosind Jest

În figura de mai sus, puteți vedea că înlocuim funcția 2, care este dependența funcției 1 cu o versiune stubbed / batjocorită a funcției 2

Mai întâi vom crea un fișier JavaScript de test care va servi ca aplicație testată și vom batjocori câteva metode acolo pentru a ilustra conceptul funcției de batjocură.

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

Aici avem 2 funcții, adică greet () și getFullName (). Funcția greet () folosește getFullName () pentru a obține numele complet. Vom vedea cum putem înlocui funcția getFullName () cu implementarea sa falsă în timp ce testăm metoda greet ().

Să scriem un test simplu pentru a batjocori acest comportament folosind funcția de batjocură Jest și să vedem cum putem valida dacă funcția batjocorită a fost apelată sau nu.

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

Aici, am declarat o funcție de batjocură Jest și am setat o valoare returnată ca „nume batjocorit”, care va fi returnată când funcția este apelată.

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

De asemenea, pentru a valida faptul că a fost apelată simularea, putem folosi potrivitoarele Jest așa cum se arată mai jos.

  • toHaveBeenCalled () - Validează dacă a fost apelat simulatorul.
  • toHaveBeenCalledWith (arg1, arg2) - Validează dacă simularea a fost apelată cu argumentele date.
  • toHaveBeenCalledTimes (n) - Validează de câte ori s-ar fi apelat Mock.

Există o altă caracteristică a Jest care se numește Spion.

Deci, ce sunt spionii și în ce se deosebesc de batjocuri?

De cele mai multe ori, Spies permite apelul funcțional real, dar ar putea fi folosit pentru a valida lucruri precum ce argumente au fost folosite pentru a apela metoda și, de asemenea, pentru a stabili dacă apelul metodei sa întâmplat sau nu.

Spionarea în Jest se poate face prin Există spyOn comanda. Jest spyOn ia argumente ca obiect și funcția reală care trebuie spionată, adică va apela de fapt funcția testată și va acționa ca un interceptor intermediar.

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

Deci, în codul de mai sus, puteți observa că:

(i) Am creat un spion pentru metoda „getFullName” folosind comanda de mai jos.

html5 întrebări și răspunsuri la interviu pentru experți
const getFullNameSpy = jest.spyOn(greeter, 'getFullName')

(ii) În afirmații, verificăm dacă spionul a fost chemat cu argumentele așteptate.

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

Comanda Jest spyOn poate fi, de asemenea, utilizată pentru a specifica o implementare falsă care ar trebui apelată în locul funcției reale folosind comanda de mai jos.

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

În acest caz, apelul funcțional real este înlocuit de o implementare falsă care este configurată cu spionul.

Video Tutorial: Funcții Jest-Mock Api

Derularea apelurilor API externe folosind Jest

În figura de mai jos, puteți vedea că funcția 1 efectuează apeluri către un punct final API extern. De exemplu - apelarea unui punct final al partenerului de plată care oferă răspuns la succes sau eșec.

Acum, când scriem teste unitare pentru această funcție, nu ne putem aștepta să apelăm punctul final extern de fiecare dată când se execută testele.

Există câteva motive pentru care ați evita apelarea punctelor finale externe în test.

  • Ar putea implica costuri.
  • Răspunsul său nu poate fi controlat. Nu puteți testa întotdeauna toate codurile de răspuns și eroare așteptate.
  • Este posibil să nu fie întotdeauna disponibil - dacă punctul final extern nu este disponibil, atunci rezultatele testului vor fi fragile.

Derularea apelurilor API externe folosind Jest

Din toate aceste motive, ar fi foarte util dacă am putea controla și contura comportamentul punctului final extern și a crea teste unitare robuste pentru funcția noastră.

Să vedem cum putem realiza apeluri API batjocoritoare folosind cadrul Jest. Axios este un modul NPM care ar putea fi descărcat / adăugat la proiect folosind comanda de mai jos.

npm install --save-dev axios

Vom folosi modulul „axios” pentru a efectua apeluri API în funcția noastră de testare, așa cum se arată mai jos.

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

Atingem un punct final extern fals care returnează date false și înregistrarea succesului și a răspunsului la erori.
Acum, în testul nostru unitar, vom bate joc de modulul axios și vom returna un răspuns fals sau batjocorit atunci când funcția apelează acest punct final extern.

Codul de testare va arăta așa cum se arată mai jos.

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

Aici, este important să înțelegem că batjocorim întregul modul „axios” aici, adică orice apel care merge la modulul Axios în timpul execuției testului va merge la implementarea batjocorită și va returna un răspuns așa cum este configurat în test.

Modulul este batjocorit folosind comanda de mai jos.

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

Am configurat simularea folosind comanda de mai jos.

axios.get.mockResolvedValue(mockedResponse)

În acest fel, putem bate joc de răspunsuri de la punctele finale API externe. Aici am folosit un punct final „GET”, dar aceeași abordare ar putea fi utilizată și pentru alte puncte finale cum ar fi POST, PUT etc.

Tutorial video: Jest - Mock Api Endpoints

Concluzie

În acest tutorial, am învățat cum să creăm o aplicație simplă React și am văzut cum Jest React poate fi utilizat pentru efectuarea testelor Instantanee pe componentele React, precum și pentru batjocorirea componentelor React în ansamblu.

De asemenea, am explorat despre Mocking folosind funcțiile Jest și Spying folosind comanda Jest spyOn care apelează la implementarea reală a metodei și acționează ca un interceptor pentru a afirma lucruri precum numărul de invocații, argumentele cu care a fost apelată metoda etc.

PREV Tutorial | NEXT Tutorial

Lectură recomandată

^