how test react apps using jest framework
I denne videoopplæringen lærer vi å lage og teste en React-app ved hjelp av Jest, Mocking ved hjelp av Jest og Spioneringsfunksjoner ved hjelp av Jest spyOn-kommandoen:
TIL Komplett introduksjon av Jest ble gitt i vår forrige opplæring. I denne opplæringen vil vi se hvordan du bruker Jest til å teste React-baserte apper.
Vi lærer å lage en bootstrapped React-app ved hjelp av en enkel over havnivå basert kommando og bruke den samme appen til å skrive Jest-reaktortester. Vi vil også utforske konseptet med øyeblikksbilde-testing og bli kjent med hvordan du kan spotte og spionere React-komponenter ved hjelp av Jest-rammeverket og Jest spyon-kommandoen.
Hva du vil lære:
Reager - Komme i gang
Jest ble bygget for å teste React-apper mye sammen med støtte for alle andre JavaScript-rammer.
Ettersom vi skal bruke React-appen for å legge til Jest-rammeverk og tester, er det viktig og faktisk en forutsetning å ha en grunnleggende forståelse av React-apper.
For å komme i gang med en grunnleggende React-app, følg trinnene nedenfor:
#1) For å opprette en React-app, kan du ganske enkelt bruke en node-pakkeutfører (dvs. npx som også følger med npm) og utføre kommandoen nedenfor.
npx create-react-app my-app#to) Når kommandoen ovenfor er fullført, åpner du prosjektet min app i hvilken som helst redaktør du ønsker - Visual Studio-kode som er fritt tilgjengelig, er en anbefalt.
# 3) I terminal- / kommandovinduet (inne i editoren), kjør prosjektet ved hjelp av kommandoen nedenfor.
npm start# 4) Når prosjektet er kompilert, åpner det en ny nettleserfane med URL http: // localhost: 3000
# 5) Vær også oppmerksom på at alle Jest-relaterte avhengigheter installeres som en del av React-prosjektet opprettet ved hjelp av ovennevnte npx-kommando.
# 6) Prosjektet inkluderer også et React testing Library kalt jest-dom som har mange nyttige tilpassede DOM-elementmatchere for Jest. (Sjekk her for mer informasjon om React-konsepter)
Det er Snapshot Testing
Øyeblikksbilde-testing er en veldig nyttig teknikk for å teste øyeblikksbilder av React-komponenter ved hjelp av Jest-biblioteket.
La oss først prøve å forstå hvilken øyeblikksbilde-testing betyr egentlig.
Øyeblikksbilde er ikke annet enn et tidspunkt å representere noe. For eksempel, et skjermbilde, et kamerabilde osv. er øyeblikksbilder som representerer detaljene til hva som helst i et øyeblikk.
Fra React perspektiv er øyeblikksbilde ikke annet enn et tidspunkt for representasjon eller utdata av en React-komponent med den medfølgende tilstanden og oppførselen.
Dette forklares med et enkelt eksempel ved hjelp av trinnene nedenfor.
#1) For å komme i gang med øyeblikksbildetesting, legg til npm-pakken “react-test-renderer” ved hjelp av kommandoen nedenfor.
npm i react-test-renderer#to) La oss nå lage en enkel React-komponent som vil være vår applikasjon som testes. Denne komponenten vil ha en enkel tilstand i form av klassevariabler og sideegenskaper.
Komponenten ser ut som vist nedenfor. La oss kalle denne komponenten som Link (og det korresponderende reaktorkomponentens filnavn blir altså 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 tidspunktet er dette hvordan filstrukturen vil se ut for React-prosjektet.
# 3) La oss legge til en øyeblikksbildetest for denne komponenten.
til) For å komme i gang med øyeblikksbildetesten - Reade-test-gjengiveren Node-pakke er en forutsetning. Installere reager-node-gjengir ved hjelp av kommandoen nedenfor.
npm i react-test-rendererb) Legg til en ny fil for å legge til tester for denne nye komponenten. La oss kalle det som Link.test.js
c) Legg nå til en øyeblikksbildetest. Her oppretter vi først et øyeblikksbilde ved å gjengi React-komponenten.
Testen vil se ut 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 lager vi en JSON-representasjon av den gjengitte komponenten. Vi har overført verdien for 'side' -egenskapen som 'www.softwaretestinghelp.com'
d) Når øyeblikksbildetesten kjøres - opprettes en øyeblikksbildefil av komponenten (med utvidelsen .snap ) og lagres i prosjektkatalogen som gjenbrukes under neste testutførelse.
I dette tilfellet vil en øyeblikksbildefil med sideegenskapen som ble levert under testen, brukes. La oss se øyeblikksbildefilen som blir generert etter å ha kjørt testen ved hjelp av kommandoen 'npm test'.
er) En øyeblikksbildefil blir opprettet under en katalog med navnet “__snapshots__” i prosjektets src-katalog.
den enkleste måten å legge til verdiene i en matrise er å bruke
Nedenfor er prosjektstrukturen for dette.
Katalogen “__snapshots__” i skjermbildet ovenfor blir opprettet i prosjektets rotkatalog når testen kjøres for første gang.
f) La oss se hvordan øyeblikksbildefilen vil se ut.
Åpne fil - Link.test.js.snap
g) Ovenfor vises øyeblikksbildet som lagres for den gitte komponenten.
h) Nå endres for eksempel implementeringen av komponenten ovenfor. For eksempel, la oss endre navnet på eiendomssiden til et nettsted i komponenten, og la oss prøve å kjøre testen igjen.
Slik endres komponenten (vi har endret eiendomsnavnet til et nytt område med navn).
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} ); } } La oss nå prøve å kjøre testene igjen. Ettersom vi allerede har øyeblikksbildene i prosjektkatalogen, forventes testen vår å mislykkes i dette scenariet - da komponentkoden har endret seg og den gamle øyeblikksbildematchen vil være en feil.
Nedenfor er resultatet vi får når vi kjører testen:
(Jeg) La oss anta at disse endringene er de nødvendige endringene og krever at vi tester for å oppdatere det gamle øyeblikksbildet. I så fall kjører du testene med oppdateringskommandoen som vil overskrive det gamle øyeblikksbildet og opprette et nytt basert på de nye endringene i selve komponenten.
Kjør kommando
yarn test -u(j) Med kommandoen ovenfor og oppdatert påstand vil du se testen bestå.
Dermed er samlet øyeblikksbilde-testing en nyttig teknikk for å teste hele komponenten mot den endelige visningen og lagre det gamle resultatet som et øyeblikksbilde som sikrer at ingen regresjonsproblemer blir introdusert som et resultat av kodeendringer eller funksjoner eller for den saks skyld noen refactoring til den eksisterende komponenten.
Videoopplæring: Det er snapshot-testing
Spott med Jest
I denne delen vil vi se hvordan vi kan bruke Jest-mocks. Spottene kan brukes på flere måter som vist nedenfor.
den beste youtube til mp3-omformeren
For eksempel,
- Håner hele React Component
- Hånende enkelt- eller flere funksjoner - Dette er ikke spesifikt for noen Javascript-utviklingsrammer. Ettersom Jest er et javascript-testbibliotek som ikke er spesifikt for et bestemt rammeverk, kan vi til og med bruke Jest til å spotte en vanlig gammel Javascript-fil som inneholder funksjoner.
- Mocking API-anrop som brukes i funksjoner eller Javascript-kode - Vi kan bruke Jest til å spotte svar fra tredjepartsintegrasjon.
La oss diskutere hver av disse spottemetodene i detalj.
Mocking React-komponenter
React App består av flere komponenter avhengig av hverandre. For enkel forståelse, vurder React Component som en klasse - med presentasjon og logikk.
Som ethvert komplekst system som er bygd ved hjelp av objektorientert programmering, består av flere klasser, på samme måte er React App en samling av komponenter.
Nå, når vi tester en komponent, vil vi sikre at det ikke er noen avhengigheter som påvirker testing av den, dvs. hvis det er to komponenter som komponenten som testes er avhengig av, så hvis vi har midler til å spotte de avhengige komponentene, så kan vi enhetsteste komponenten under test på en mer komplett måte.
La oss prøve å forstå dette ved hjelp av figuren nedenfor:
Her har vi Komponent1, som er avhengig av Komponent 2 & 3.
Mens vi tester komponent1, kan vi erstatte Component2 & Component3 ved hjelp av Jest Mocks med falske eller spottede kolleger.
La oss se hvordan vi kan sette opp disse spottene. Vi vil bruke enkle komponenter med en HTML-tekst plassert i en div. Først vil vi se koden for avhengige 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 La oss nå se hvordan komponent1 som har avhengige komponenter vil se ut. Her kan du se at vi importerer de avhengige komponentene og bruker dem som en enkel HTML-tag som henholdsvis &.
import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1 La oss nå se hvordan vi kan skrive tester for denne komponenten. For å lage en test, opprett en mappe “tester” i “src” katalogen. Dette er bare for å sikre at prosjektkatalogen vår forblir ren og organisert.
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 testfilen ovenfor kan du se at vi har spottet Komponenter1 og 2 ved hjelp av funksjonen er. spott
jest.mock('../components/component2', () => () => Hello Mock Component2 ) Dette oppsettet vil ganske enkelt erstatte alle påkallelsene til Component2 med denne spotte representasjonen. Så når vi gjengir Component1 i testen, kaller den den spottede versjonen av Component2, som vi også har hevdet ved å sjekke om Mock div-elementene finnes i dokumentet.
Vi har brukt ‘toBeInTheDocument () matcher her. Denne matcheren er React Specific, da React-applikasjoner endelig gjengitt output ikke er annet enn HTML-kode. Dermed ser denne matcheren etter det gitte HTML-elementet å være til stede i HTML-dokumentet opprettet av React.
Videoopplæring: Jest - Mock React Components
Spottfunksjoner ved bruk av spøk
La oss nå se hvordan vi kan bruke Jest-mocks, til å spotte en bestemt funksjon for en gitt JavaScript-fil.
I figuren ovenfor kan du se at vi erstatter funksjon 2 som er avhengigheten av funksjon1 med en stubbet / spottet versjon av funksjon 2
Vi oppretter først en test JavaScript-fil som skal fungere som en applikasjon under test, og vi vil spotte noen metoder der for å illustrere konseptet med mocking-funksjonen.
function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet} Vi har to funksjoner her, dvs. hilser () og getFullName (). Hilsen () -funksjonen bruker getFullName () for å få fullstendig navn. Vi vil se hvordan vi kan erstatte getFullName () -funksjonen med sin mock-implementering mens vi tester greet () -metoden.
La oss skrive en enkel test for å spotte denne oppførselen ved hjelp av Jest-mock-funksjonen og se hvordan vi kan validere om den hånede funksjonen ble kalt eller ikke.
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 erklært en Jest-mock-funksjon og satt opp en returverdi som 'spottet navn' som vil bli returnert når funksjonen kalles.
const mock = jest.fn().mockReturnValue('mocked name')For å validere at mock ble kalt, kan vi også bruke Jest-matcherne som vist nedenfor.
- toHaveBeenCalled () - Validerer hvis mock ble kalt.
- toHaveBeenCalledWith (arg1, arg2) - Validerer hvis mock ble oppringt med de gitte argumentene.
- toHaveBeenCalledTimes (n) - Validerer antall ganger Mock ville blitt kalt.
Det er en annen funksjon av Jest som heter Spy.
Så hva er spioner, og hvordan skiller de seg fra hån?
Mesteparten av tiden tillater Spies den virkelige funksjonsanropet, men kan brukes til å validere ting som hvilke argumenter som ble brukt for å kalle metoden, og også for å fastslå om metoden samtalen skjedde eller ikke.
Spionering i Jest kan gjøres gjennom Det er spyOn kommando. Jest spyOn tar argumenter som objektet og den faktiske funksjonen som skal spioneres på, dvs. det vil faktisk kalle funksjonen som testes og fungere som en mellomliggende avlytter.
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 koden ovenfor kan du observere at:
(Jeg) Vi har satt opp en spion på metoden ‘getFullName’ ved hjelp av kommandoen nedenfor.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName')(ii) I påstander bekrefter vi at spionen ble tilkalt med forventede argumenter.
expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') Jest spyOn-kommandoen kan også brukes til å spesifisere en mock-implementering som skal kalles i stedet for den faktiske funksjonen ved hjelp av kommandoen nedenfor.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()I dette tilfellet blir den virkelige funksjonsanropet erstattet av en mock-implementering som er satt opp med spionen.
Videoopplæring: Jest- Mock Api Functions
Spottende eksterne API-samtaler ved bruk av Jest
I figuren nedenfor kan du se at funksjon1 ringer til et eksternt API-endepunkt. For eksempel - ringe et betalingspartnerens endepunkt som gir suksess eller svikt.
Nå når vi skriver enhetstester for denne funksjonen, kan vi ikke forvente å ringe det eksterne endepunktet hver gang testene kjøres.
Det er et par grunner til at du vil unngå å ringe eksterne endepunkter i testen.
- Det kan medføre kostnad.
- Dens respons kan ikke kontrolleres. Du kan ikke alltid teste for alle forventede respons- og feilkoder.
- Det kan ikke alltid være tilgjengelig - hvis det eksterne endepunktet ikke er tilgjengelig, vil testresultatene være flassete.
Av alle disse grunnene ville det være veldig nyttig hvis vi kunne kontrollere og stubbe oppførselen til det eksterne endepunktet og lage robuste enhetstester for vår funksjon.
La oss se hvordan vi kan oppnå hånende API-samtaler ved hjelp av Jest-rammeverket. Axios er en NPM-modul som kan lastes ned / legges til prosjektet ved hjelp av kommandoen nedenfor.
npm install --save-dev axiosVi bruker 'axios' -modulen for å ringe API-samtaler i testfunksjonen vår 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 treffer et dummy eksternt endepunkt som returnerer falske data og logger suksess og feilrespons.
Nå, i vår enhetstest, skal vi spotte axios-modulen og returnere en falsk eller spottet respons når funksjonen kaller dette eksterne endepunktet.
Testkoden vil se ut 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 viktig å forstå at vi håner hele 'axios'-modulen her, dvs. ethvert anrop som går til Axios-modulen under testutførelsen, vil gå til den hånede implementeringen og returnere et svar som konfigurert i testen.
Modulen spottes ved hjelp av kommandoen nedenfor.
const axios = require('axios') jest.mock('axios'); Vi har konfigurert mock ved å bruke kommandoen nedenfor.
axios.get.mockResolvedValue(mockedResponse)På denne måten kan vi spotte svar fra eksterne API-endepunkter. Her har vi brukt et 'GET' endepunkt, men den samme tilnærmingen kan også brukes til andre endepunkter som POST, PUT, etc.
Videoopplæring: Jest - Mock Api Endpoints
Konklusjon
I denne opplæringen lærte vi hvordan vi oppretter en enkel React-app, og så hvordan Jest React kan brukes til å utføre Snapshot-tester på React-komponenter, samt å spotte React-komponenter som helhet.
Vi utforsket også om Mocking ved hjelp av Jest og Spying-funksjoner ved hjelp av Jest spyOn-kommandoen som kaller den virkelige implementeringen av metoden og fungerer som en avlytter for å hevde ting som antall påkallelser, argumenter som metoden ble kalt til osv.
PREV Opplæring | NESTE veiledning
Anbefalt lesing
- Jest Tutorial - JavaScript Unit Testing Using Jest Framework
- Jest-konfigurasjon og feilsøking Jest-baserte tester
- 25 beste Java-testrammer og verktøy for automatiseringstesting (del 3)
- Hvordan sette opp Node.js Testing Framework: Node.js Tutorial
- Introduksjon til JUnit Framework and Its Usage in Selenium Script - Selenium Tutorial # 11
- Jasmine Framework Tutorial Inkludert Jasmine Jquery med eksempler
- Java Collections Framework (JCF) Tutorial