Menu

Sådan testes reageringsapps ved hjælp af Jest Framework

  • Vigtigste
  • Andet
  • Sådan testes reageringsapps ved hjælp af Jest Framework

how test react apps using jest framework

Prøv Vores Instrument Til At Fjerne Problemer

I denne videovejledning lærer vi at oprette og teste en React-app ved hjælp af Jest, Mocking ved hjælp af Jest og Spioneringsfunktioner ved hjælp af Jest spyOn-kommandoen:

TIL Komplet introduktion af Jest blev givet i vores tidligere tutorial. I denne vejledning vil vi se, hvordan du bruger Jest til at teste React-baserede apps.

Vi lærer at oprette en bootstrapped React-app ved hjælp af en simpel over havniveau baseret kommando og bruge den samme app til at skrive Jest reagerer test. Vi vil også undersøge konceptet med snapshot-test og lære, hvordan du kan spotte og spionere React-komponenter ved hjælp af Jest-rammen og Jest spyon-kommandoen.

Test af React Apps & Jest mocks and spies

Hvad du lærer:

Reager - Kom godt i gang

Jest blev bygget til at teste React-apps i vid udstrækning sammen med understøttelsen af ​​alle andre JavaScript-rammer.

Da vi bruger React-appen til at tilføje Jest-rammer og tests, er det bydende nødvendigt og faktisk en forudsætning for at have en grundlæggende forståelse af React-apps.

For at komme i gang med en grundlæggende React-app skal du følge nedenstående trin:

# 1) For at oprette en React-app kan du simpelthen bruge en node-pakkeekspert (dvs. npx, som også følger med npm) og udføre nedenstående kommando.

npx create-react-app my-app

#to) Når ovenstående kommando er afsluttet, skal du åbne projektet min app i en hvilken som helst redaktør efter eget valg - Visual Studio-kode, der er frit tilgængelig, anbefales.

# 3) I terminal- / kommandovinduet (inde i editoren) skal du køre projektet ved hjælp af nedenstående kommando.

npm start

# 4) Når projektet er kompileret, åbner det en ny browserfane med URL'en http: // localhost: 3000

# 5) Bemærk også, at alle Jest-relaterede afhængigheder installeres som en del af React-projektet oprettet ved hjælp af ovennævnte npx-kommando.

# 6) Projektet inkluderer også et React-testbibliotek med navnet jest-dom, der har mange nyttige tilpassede DOM-elementmatchere til Jest. (Kontrollere her for flere detaljer om React-koncepter)

Der er Snapshot-test

Snapshot-test er en meget nyttig teknik til at teste React-komponent-snapshots ved hjælp af Jest-biblioteket.

Lad os først prøve at forstå, hvad snapshot-testning er betyder i det væsentlige.

Snapshot er intet andet end et tidspunkt, der repræsenterer noget. For eksempel, et skærmbillede, et kamerabillede osv. er alle snapshots, der repræsenterer detaljerne i noget i et stykke tid.

Fra React perspektiv er Snapshot intet andet end et tidspunkt for repræsentation eller output af en React-komponent med den leverede tilstand og adfærd.

Dette forklares med et simpelt eksempel ved hjælp af nedenstående trin.

# 1) For at komme i gang med snapshot-test skal du tilføje npm-pakken 'react-test-renderer' ved hjælp af nedenstående kommando.

npm i react-test-renderer

#to) Lad os nu oprette en simpel React-komponent, der er vores applikation, der testes. Denne komponent har en simpel tilstand i form af klassevariabler og sideegenskaber.

Komponenten ser ud som vist nedenfor. Lad os navngive denne komponent som Link (og så vil det tilsvarende reaktionskomponentfilnavn være 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} ); } }

På dette tidspunkt vil filstrukturen se ud for React-projektet.

Filstruktur til React-projekt

# 3) Lad os tilføje et øjebliksbillede af denne komponent.

til) For at komme i gang med øjebliksbillede-testen - Node-pakke med reakt-render-renderer er en forudsætning. Installere reager-node-renderer ved hjælp af nedenstående kommando.

npm i react-test-renderer

b) Tilføj en ny fil for at tilføje tests til denne nye komponent. Lad os navngive det som Link.test.js

c) Tilføj nu en snapshot-test. Her opretter vi først et øjebliksbillede ved at gengive React-komponenten.

Testen ser ud som vist nedenfor.

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

Her i testen opretter vi en JSON-repræsentation af den gengivne komponent. Vi har videregivet værdien for egenskaben 'side' som 'www.softwaretestinghelp.com'

d) Når snapshot-testen køres - oprettes en snapshot-fil af komponenten (med udvidelsen .snap ) og gemmes i projektmappen, der genbruges under de næste testudførelser.

I dette tilfælde vil der blive brugt en snapshotfil med sideegenskaben som leveret under testen. Lad os se snapshot-filen, der bliver genereret efter at have kørt testen ved hjælp af kommandoen 'npm test'.

er) En snapshot-fil oprettes under en mappe med navnet “__snapshots__” i projektets src-mappe.

youtube til mp3-konverter med billede

Nedenfor er projektstrukturen til dette.

Mappen “__snapshots__” i ovenstående skærmbillede oprettes i projektets rodmappe, når testen udføres for første gang.

f) Lad os se, hvordan snapshot-filen ser ud.

Åbn fil - Link.test.js.snap

Snapshot-fil

g) Ovenfor vises det øjebliksbillede, der gemmes for den givne komponent.

h) Nu ændres f.eks. Implementeringen af ​​ovenstående komponent. For eksempel, lad os ændre ejendomssiden til et sted i komponenten, og lad os prøve at køre testen igen.

Dette er, hvordan komponenten ændres (vi har ændret egenskabens navneside til en ny ejendom med navnet websted).

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

Lad os nu køre testene igen. Da vi allerede har snapshots i projektmappen, forventes vores test at mislykkes i dette scenario - da komponentkoden er ændret, og det gamle snapshot-match vil være en fiasko.

Nedenfor er det resultat, vi får, når vi kører testen:

Komponentkoden er ændret

(jeg) Lad os nu antage, at disse ændringer er de krævede ændringer og kræver vores tests for at opdatere det gamle øjebliksbillede. I så fald skal du køre testene med opdateringskommandoen, der overskriver det gamle øjebliksbillede og oprette et nyt baseret på de nye ændringer i selve komponenten.

Kør kommando

yarn test -u

(j) Med ovenstående kommando og opdateret påstand vil du se testen bestå.

Således er samlet snapshot-test en nyttig teknik til at teste hele komponenten mod den endelige visning og gemme det gamle resultat som et snapshot, der sikrer, at der ikke introduceres nogen regressionsproblemer som følge af kodeændringer eller funktioner eller for den sags skyld enhver refactoring til den eksisterende komponent.

Videovejledning: Der er snapshot-test

Mocking ved hjælp af jest

I dette afsnit vil vi se, hvordan vi kan bruge Jest-mocks. Mocks kan bruges på adskillige måder som vist nedenfor.

For eksempel,

  1. Håner hele reaktionskomponenten
  2. Mocking af enkelte eller flere funktioner - Dette er ikke specifikt for nogen Javascript-udviklingsrammer. Da Jest er et javascript-testbibliotek, der ikke er specifikt for nogen bestemt ramme, kan vi endda bruge Jest til at spotte en almindelig gammel Javascript-fil, der indeholder funktioner.
  3. Mocking API-opkald, der bruges i funktioner eller Javascript-kode - Vi kan bruge Jest til at spotte svar fra tredjepartsintegration.

Lad os diskutere hver af disse spottemetoder i detaljer.

Spottende reaktionskomponenter

React App består af flere komponenter, der er afhængige af hinanden. For enkel forståelse, overvej React Component som en klasse - med præsentation og logik.

Som ethvert komplekst system bygget med objektorienteret programmering er sammensat af flere klasser, ligesom React App er en samling af komponenter.

Når vi nu tester en komponent, vil vi sikre os, at der ikke er nogen afhængigheder, der påvirker testning af det, dvs. hvis der er to komponenter, som komponenten under test er afhængig af, så hvis vi har midlerne til at spotte de afhængige komponenter, så kan vi enhedstest komponenten under test på en mere komplet måde.

Lad os prøve at forstå dette ved hjælp af nedenstående figur:

Spottende reaktionskomponenter

Her har vi Komponent1, som er afhængig af Komponent 2 & 3.

Mens enhedstestning af komponent1 kan vi udskifte Component2 & Component3 ved hjælp af Jest Mocks med deres falske eller hånede kolleger.

Lad os se, hvordan vi kan oprette disse mocks. Vi bruger enkle komponenter med en HTML-tekst placeret i en div. Først vil vi se koden for afhængige komponenter - Komponent2 og Komponent3 .

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

Lad os nu se, hvordan komponent1, der har afhængige komponenter, vil se ud. Her kan du se, at vi importerer de afhængige komponenter og bruger dem som et simpelt HTML-tag som henholdsvis &.

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

Lad os nu se, hvordan vi kan skrive tests til denne komponent. For at oprette en test skal du oprette en 'test' -mappe i 'src' -mappen. Dette er bare for at sikre, at vores projektkatalog forbliver ren og organiseret.

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

I ovenstående testfil kan du se, at vi har hånet Komponenter1 & 2 ved hjælp af funktionen er. sjov

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

Denne opsætning erstatter simpelthen alle påkaldelser af Component2 med denne mock-repræsentation. Så når vi gengiver Component1 i testen, kalder den den mocked version af Component2, som vi også har hævdet ved at kontrollere, om Mock div-elementerne findes i dokumentet.

Vi har brugt 'toBeInTheDocument () matcher her. Denne matcher er React Specific, da React-applikationer endelig gengivet output er intet andet end HTML-kode. Således søger denne matcher, at det givne HTML-element skal være til stede i HTML-dokumentet oprettet af React.

Videovejledning: Jest - Mock React Components

Mocking-funktioner ved hjælp af jest

Lad os nu se, hvordan vi kan bruge Jest-mocks til at spotte en bestemt funktion for en given JavaScript-fil.

Mocking-funktioner ved hjælp af Jest

I ovenstående figur kan du se, at vi erstatter funktion 2, som er afhængigheden af ​​funktion1 med en stubbet / spottet version af funktion 2

Vi opretter først en JavaScript-testfil, der fungerer som en applikation under test, og vi vil spotte nogle metoder der for at illustrere mocking-funktionskonceptet.

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

Vi har to funktioner her, dvs. hilse () og getFullName (). Hilsen () -funktionen bruger getFullName () til at få det fulde navn. Vi vil se, hvordan vi kan erstatte getFullName () -funktionen med dens mock-implementering, mens vi tester greet () -metoden.

Lad os skrive en simpel test for at spotte denne adfærd ved hjælp af Jest-mock-funktionen og se, hvordan vi kan validere, om den mocked-funktion blev kaldt eller ej.

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

Her har vi deklareret en Jest-mock-funktion og indstillet en returværdi som 'mocked name', som returneres, når funktionen kaldes.

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

For at validere, at mocken blev kaldt, kan vi også bruge Jest-matcherne som vist nedenfor.

  • toHaveBeenCalled () - Valideres, hvis mocken blev kaldt.
  • toHaveBeenCalledWith (arg1, arg2) - Valideres hvis mock blev kaldt med de givne argumenter.
  • toHaveBeenCalledTimes (n) - Validerer antallet af gange, Mock ville være blevet kaldt.

Der er en anden funktion af Jest, der hedder Spy.

Så hvad er spioner, og hvordan adskiller de sig fra mocks?

Det meste af tiden tillader Spies det rigtige funktionsopkald, men kan bruges til at validere ting som hvilke argumenter der blev brugt til at kalde metoden og også for at fastslå, om metodekaldet skete eller ej.

Spionering i Jest kan gøres igennem Der er spyOn kommando. Jest spyOn tager argumenter som objektet og den faktiske funktion, der skal udspioneres, dvs. det vil faktisk kalde den funktion, der testes, og fungere som en mellemliggende interceptor.

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

Så i ovenstående kode kan du observere, at:

(jeg) Vi har oprettet en spion på metoden 'getFullName' ved hjælp af kommandoen nedenfor.

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

(ii) Under påstande verificerer vi, at spionen blev kaldt med forventede argumenter.

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

Jest spyOn-kommandoen kan også bruges til at specificere en mock-implementering, der skal kaldes i stedet for den faktiske funktion ved hjælp af nedenstående kommando.

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

I dette tilfælde erstattes det virkelige funktionsopkald med en mock-implementering, der er konfigureret med spionen.

Videovejledning: Jest- Mock Api-funktioner

Mocking af eksterne API-opkald ved hjælp af Jest

I nedenstående figur kan du se, at funktion1 foretager opkald til et eksternt API-slutpunkt. For eksempel - kalde et betalingspartners slutpunkt, der giver succes eller fiasko.

Når vi nu skriver enhedstest for denne funktion, kan vi ikke forvente at ringe til det eksterne slutpunkt hver gang testene køres.

Der er et par grunde til, at du undgår at kalde eksterne slutpunkter i testen.

  • Det kan medføre omkostninger.
  • Dens svar kan ikke kontrolleres. Du kan ikke altid teste for alle de forventede respons- og fejlkoder.
  • Det er muligvis ikke altid tilgængeligt - hvis det eksterne slutpunkt ikke er tilgængeligt, vil testresultaterne være flaky.

Mocking af eksterne API-opkald ved hjælp af Jest

Af alle disse grunde ville det være meget nyttigt, hvis vi kunne styre og stoppe opførelsen af ​​det eksterne slutpunkt og oprette robuste enhedstest til vores funktion.

Lad os se, hvordan vi kan opnå mocking API-opkald ved hjælp af Jest-rammen. Axios er et NPM-modul, der kan downloades / føjes til projektet ved hjælp af nedenstående kommando.

npm install --save-dev axios

Vi bruger 'axios' modul til at foretage API-opkald i vores testfunktion som vist nedenfor.

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

Vi rammer et dummy eksternt slutpunkt, der returnerer falske data og logger succes & fejlrespons.
Nu, i vores enhedstest, skal vi spotte axios-modulet og returnere et falsk eller spottet svar, når funktionen kalder dette eksterne slutpunkt.

Testkoden ser ud som vist nedenfor.

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

Her er det vigtigt at forstå, at vi håner hele 'axios'-modulet her, dvs. ethvert opkald, der går til Axios-modulet under testudførelsen, går til den mocked implementering og returnerer et svar som konfigureret i testen.

Modulet bespottes ved hjælp af nedenstående kommando.

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

Vi har konfigureret mock ved hjælp af kommandoen nedenfor.

axios.get.mockResolvedValue(mockedResponse)

På denne måde kan vi spotte svar fra eksterne API-slutpunkter. Her har vi brugt et 'GET' slutpunkt, men den samme tilgang kan også bruges til andre slutpunkter som POST, PUT osv.

Videovejledning: Jest - Mock Api Endpoints

Konklusion

I denne vejledning lærte vi, hvordan man opretter en simpel React-app, og så hvordan Jest React kan bruges til at udføre Snapshot-test på React-komponenter såvel som til at spotte React-komponenter som helhed.

Vi undersøgte også Mocking ved hjælp af Jest- og Spioning-funktioner ved hjælp af Jest spyOn-kommandoen, der kalder den virkelige implementering af metoden og fungerer som en interceptor til at hævde ting som antallet af påkaldelser, argumenter, som metoden blev kaldt med osv.

PREV-vejledning | NÆSTE vejledning

Anbefalet læsning

^