Hur man testar reagera appar med Jest Framework

how test react apps using jest framework

I denna videohandledning lär vi oss att skapa och testa en React-app med Jest, Mocking med Jest och Spying-funktioner med Jest spyOn-kommandot:

TILL Komplett introduktion av Jest gavs i vår tidigare handledning. I denna handledning kommer vi att se hur man använder Jest för att testa React-baserade appar.

Vi lär oss att skapa en bootstrapped React-app med en enkel över havsnivå baserat kommando och använda samma app för att skriva Jest reagera tester. Vi kommer också att utforska konceptet med ögonblicksbildtestning och lära oss hur du kan håna och spionera Reagera komponenter med Jest-ramverket och Jest-spyon-kommandot.

Vad du kommer att lära dig:

• Reagera - Komma igång
• Det är ögonblicksprövning
  • Videohandledning: Det finns ögonblicksprövning
• Spottar med Skämt
  • Spottande reaktionskomponenter
    • Videohandledning: Skämt - Mock React Components
  • Spottfunktioner med Jest
    • Videohandledning: Jest- Mock Api-funktioner
  • Hånar externa API-samtal med Jest
    • Videohandledning: Jest - Mock Api Endpoints
• Slutsats
  • Rekommenderad läsning

Reagera - Komma igång

Jest byggdes för att testa React-appar i stor utsträckning tillsammans med stöd för alla andra JavaScript-ramar.

Eftersom vi kommer att använda React-appen för att lägga till Jest-ramverk och tester är det absolut nödvändigt och verkligen en förutsättning att ha en grundläggande förståelse för React-appar.

För att komma igång med en grundläggande React-app, följ stegen nedan:

# 1) För att skapa en React-app kan du helt enkelt använda en nodpaketutförare (dvs. npx som också kommer tillsammans med npm) och utföra kommandot nedan.

#två) När ovanstående kommando har slutförts, öppna projektet min app i valfri redigerare - Visual Studio-kod som är fritt tillgänglig är en rekommenderad.

# 3) I terminal- / kommandofönstret (inuti redigeraren) kör du projektet med kommandot nedan.

# 4) När projektet har kompilerats öppnar det en ny webbläsarflik med URL: en: http: // localhost: 3000

# 5) Observera också att alla Jest-relaterade beroenden installeras som en del av React-projektet skapat med ovan nämnda npx-kommando.

# 6) Projektet innehåller också ett React-testbibliotek med namnet jest-dom som har många användbara anpassade DOM-elementmatchare för Jest. (Kolla upp här för mer information om React-koncept)

Det är ögonblicksprövning

Snapshot-testning är en mycket användbar teknik för att testa React-komponent-snapshots med Jest-biblioteket.

Låt oss först försöka förstå vilken ögonblicksbildtestning i huvudsak betyder.

Ögonblicksbild är inget annat än en tidpunkt som representerar någonting. Till exempel, en skärmdump, en kamerabild etc. är alla ögonblicksbilder som representerar detaljerna i vad som helst under en tid.

Ur React-perspektivet är Snapshot ingenting annat än en tidpunktrepresentation eller output av en React-komponent med det medföljande tillståndet och beteendet.

Detta förklaras med ett enkelt exempel med hjälp av nedanstående steg.

# 1) För att komma igång med ögonblicksbildtestning, lägg till npm-paketet 'reagera-test-renderare' med kommandot nedan.

#två) Nu ska vi skapa en enkel React-komponent som kommer att bli vår applikation som testas. Denna komponent har ett enkelt tillstånd i form av klassvariabler och sidegenskaper.

Komponenten ser ut som visas nedan. Låt oss namnge den här komponenten som länk (och så blir motsvarande filnamn för reaktionskomponenten Link.react.js)

För närvarande är det så här filstrukturen kommer att se ut för React-projektet.

# 3) Låt oss lägga till ett ögonblicksbildtest för den här komponenten.

till) För att komma igång med ögonblicksbildtestet - Nodpaketet för reaktest-renderare är en förutsättning. Installera reagera-nod-renderare med kommandot nedan.

b) Lägg till en ny fil för att lägga till tester för den här nya komponenten. Låt oss namnge det som Link.test.js

c) Lägg nu till ett ögonblicksbildtest. Här skapar vi först en ögonblicksbild genom att återge React-komponenten.

Testet skulle se ut som visas nedan.

Här i testet skapar vi en JSON-representation av den renderade komponenten. Vi har skickat värdet för egenskapen 'page' som 'www.softwaretestinghelp.com'

d) När ögonblicksbildstestet körs skapas en ögonblicksbildsfil av komponenten (med tillägget .knäppa ) och sparas i projektkatalogen som återanvänds under nästa testkörning.

I det här fallet skulle en stillbildsfil med sidegenskapen som tillhandahålls under testet användas. Låt oss se den ögonblicksbildsfil som genereras efter att ha kört testet med kommandot 'npm test'.

är) En ögonblicksbildsfil skapas under en katalog med namnet “__snapshots__” i projektets src-katalog.

lägga till ett värde i en matris

Nedan följer projektstrukturen för detta.

Katalogen “__snapshots__” i skärmdumpen ovan skapas i projektets rotkatalog när testet körs för första gången.

f) Låt oss se hur ögonblicksbildfilen kommer att se ut.

Öppna fil - Link.test.js.snap

g) Ovan visas en ögonblicksbild som lagras för den givna komponenten.

h) Nu ändras till exempel implementeringen av ovanstående komponent. Till exempel, låt oss ändra namnet på egenskapssidan till en webbplats i komponenten, och låt oss köra testet igen.

Så här ändras komponenten (vi har ändrat egenskapens namnsida till en ny egendom med namnet webbplats).

Låt oss nu köra testerna igen. Eftersom vi redan har ögonblicksbilder i projektkatalogen förväntas vårt test misslyckas i detta scenario - eftersom komponentkoden har ändrats och den gamla ögonblicksbildsmatchen kommer att misslyckas.

Nedan visas resultatet som vi får när vi kör testet:

(i) Låt oss nu anta att dessa ändringar är de nödvändiga ändringarna och kräver våra tester för att uppdatera den gamla ögonblicksbilden. I så fall kör du testerna med uppdateringskommandot som skulle skriva över den gamla ögonblicksbilden och skapa en ny baserat på de nya ändringarna i själva komponenten.

Kör kommando

(j) Med ovanstående kommando och uppdaterad påstående kommer du att se testet passera.

Således är övergripande ögonblicksprövning en användbar teknik för att testa hela komponenten mot den slutliga vyn och lagra det gamla resultatet som en ögonblicksbild som säkerställer att inga regressionsproblem införs som ett resultat av kodändringar eller funktioner eller för den delen någon refactoring till den befintliga komponenten.

Videohandledning: Det finns ögonblicksprövning

Spottar med Skämt

I det här avsnittet kommer vi att se hur vi kan använda Jest-mocks. Spottarna kan användas på flera sätt som visas nedan.

Till exempel,

1. Hånar hela React Component
2. Hånar enstaka eller flera funktioner - Detta är inte specifikt för något Javascript-utvecklingsramverk. Eftersom Jest är ett javascript-testbibliotek som inte är specifikt för något särskilt ramverk kan vi till och med använda Jest för att håna en vanlig gammal Javascript-fil som innehåller funktioner.
3. Mocking API-samtal som används i funktioner eller Javascript-kod - Vi kan använda Jest för att håna svar från tredje parts integration.

Låt oss diskutera var och en av dessa hånande metoder i detalj.

Spottande reaktionskomponenter

React App består av flera komponenter beroende på varandra. För enkel förståelse, betrakta React Component som en klass - med presentation och logik.

Liksom alla komplexa system som byggs med hjälp av objektorienterad programmering består av flera klasser, på samma sätt är React App en samling komponenter.

Nu, när vi testar en komponent, skulle vi vilja se till att det inte finns några beroenden som påverkar testningen av det, dvs. om det finns två komponenter som komponenten som testas är beroende av, om vi har möjlighet att håna de beroende komponenterna, då kan vi testa komponenten under test på ett mer fullständigt sätt.

Låt oss försöka förstå detta med hjälp av nedanstående figur:

Windows 10 är standardgatewayen inte tillgänglig

Här har vi komponent1, som är beroende av komponent 2 och 3.

Medan vi testar komponent1 kan vi byta ut Component2 & Component3 med Jest Mocks med sina falska eller hånade motsvarigheter.

Låt oss se hur vi kan ställa in dessa hånar. Vi kommer att använda enkla komponenter med en HTML-text placerad i en div. Först ser vi koden för beroende komponenter - Komponent2 och Komponent3 .

Låt oss nu se hur komponent1 som har beroende komponenter kommer att se ut. Här kan du se att vi importerar de beroende komponenterna och använder dem som en enkel HTML-tagg som & respektive.

Låt oss nu se hur vi kan skriva tester för den här komponenten. För att skapa ett test, skapa en mapp 'test' i 'src' -katalogen. Detta är bara för att säkerställa att vår projektkatalog förblir ren och organiserad.

I ovanstående testfil kan du se att vi har hånat Komponenter1 & 2 med funktionen is.mock

Denna inställning kommer helt enkelt att ersätta alla anrop av Component2 med denna mock-representation. Så när vi gör Component1 i testet kallar det den hånade versionen av Component2, som vi också har hävdat genom att kontrollera om Mock div-elementen finns i dokumentet.

Vi har använt ”toBeInTheDocument () matcher här. Den här matchern är React Specific, eftersom React-applikationer som slutgiltig renderad utdata inte är annat än HTML-kod. Således letar den här matcharen efter det angivna HTML-elementet för att finnas i HTML-dokumentet som skapats av React.

Videohandledning: Skämt - Mock React Components

Spottfunktioner med Jest

Låt oss nu se hur vi kan använda Jest-mocks för att håna en specifik funktion för en viss JavaScript-fil.

I figuren ovan kan du se att vi ersätter funktion 2 som är beroende av funktion1 med en stubbad / hånad version av funktion 2

Vi skapar först en test-JavaScript-fil som fungerar som en applikation som testas och vi kommer att håna några metoder där för att illustrera konceptet för hånfunktion.

Vi har två funktioner här, dvs. hälsar () och getFullName (). Hälsningsfunktionen () använder getFullName () för att få fullständigt namn. Vi kommer att se hur vi kan ersätta getFullName () -funktionen med dess mock-implementering medan vi testar hälsningsmetoden ().

Låt oss skriva ett enkelt test för att håna detta beteende med Jest-mock-funktionen och se hur vi kan verifiera om den hånade funktionen anropades eller inte.

Här har vi förklarat en Jest-mock-funktion och ställt in ett returvärde som 'hånat namn' som kommer att returneras när funktionen anropas.

För att verifiera att mocken anropades kan vi också använda Jest-matcharna som visas nedan.

• toHaveBeenCalled () - Validerar om mocken anropades.
• toHaveBeenCalledWith (arg1, arg2) - Validerar om mocken anropades med givna argument.
• toHaveBeenCalledTimes (n) - Validerar antalet gånger som Mock skulle ha anropats.

Det finns en annan funktion i Jest som heter Spy.

Så vad är spioner och hur skiljer de sig från hånar?

För det mesta tillåter Spies det verkliga funktionsanropet men kan användas för att validera saker som vilka argument som användes för att anropa metoden och också för att fastställa om metodanropet hände eller inte.

Spionera i Jest kan göras genom Det finns spyOn kommando. Jest spyOn tar argument som objektet och den faktiska funktionen som ska spioneras på, dvs det kommer faktiskt att ringa funktionen som testas och fungera som en mellanliggande avlyssnare.

Så i ovanstående kod kan du observera att:

(i) Vi har skapat en spion på metoden 'getFullName' med kommandot nedan.

(ii) I påståenden verifierar vi att spionen anropades med förväntade argument.

Jest spyOn-kommandot kan också användas för att specificera en mock-implementering som ska kallas istället för den faktiska funktionen med kommandot nedan.

I det här fallet ersätts det verkliga funktionsanropet med en mock-implementering som är inställd med spionen.

Videohandledning: Jest- Mock Api-funktioner

Hånar externa API-samtal med Jest

I figuren nedan kan du se att funktion1 ringer till en extern API-slutpunkt. Till exempel - anropa en betalningspartners slutpunkt som ger framgång eller misslyckande.

Nu när vi skriver enhetstester för den här funktionen kan vi inte förvänta oss att ringa till den externa slutpunkten varje gång testen körs.

Det finns ett par anledningar till att du skulle undvika att anropa externa slutpunkter i testet.

• Det kan innebära kostnad.
• Dess svar kan inte kontrolleras. Du kan inte alltid testa för alla förväntade svar och felkoder.
• Det kanske inte alltid är tillgängligt - om den externa slutpunkten inte är tillgänglig blir testresultaten fläckiga.

Av alla dessa skäl skulle det vara mycket användbart om vi kunde styra och stoppa beteendet hos den externa slutpunkten och skapa robusta enhetstester för vår funktion.

Låt oss se hur vi kan uppnå hånfulla API-samtal med Jest-ramverket. Axios är en NPM-modul som kan laddas ner / läggas till projektet med kommandot nedan.

Vi använder ”axios” -modulen för att ringa API-samtal i vår testfunktion som visas nedan.

Vi träffar en dummy extern slutpunkt som returnerar falska data och loggar framgång & fel svar.
Nu, i vårt enhetstest, ska vi håna axios-modulen och returnera ett falskt eller hånat svar när funktionen kallar denna externa slutpunkt.

Testkoden ser ut som visas nedan.

Här är det viktigt att förstå att vi hånar hela 'axios'-modulen här, dvs. alla samtal som går till Axios-modulen under testkörningen kommer att gå till den hånade implementeringen och returnera ett svar som konfigurerat i testet.

Modulen hånas med kommandot nedan.

Vi har konfigurerat mocken med hjälp av kommandot nedan.

På detta sätt kan vi håna svar från externa API-slutpunkter. Här har vi använt en ”GET” -ändpunkt, men samma tillvägagångssätt kan också användas för andra slutpunkter som POST, PUT, etc.

Videohandledning: Jest - Mock Api Endpoints

Slutsats

I den här handledningen lärde vi oss hur man skapar en enkel React-app och såg hur Jest React kan användas för att utföra Snapshot-tester på React-komponenter såväl som för att håna React-komponenter som helhet.

Vi undersökte också Mocking med Jest och Spying-funktioner med Jest spyOn-kommandot som kallar den verkliga implementeringen av metoden och fungerar som en avlyssnare för att hävda saker som antalet anrop, argument som metoden kallades med etc.

PREV-handledning | NÄSTA självstudie

Rekommenderad läsning

• Jest Tutorial - JavaScript-enhetstestning med Jest Framework
• Skämtkonfiguration och felsökning av skämtbaserade tester
• 25 bästa Java-testramar och verktyg för automatiseringstestning (del 3)
• Så här ställer du in Node.js Testing Framework: Node.js Tutorial
• Introduktion till JUnit Framework and Its Use in Selenium Script - Selenium Tutorial # 11
• Jasmine Framework Tutorial Inklusive Jasmine Jquery med exempel
• Java Collections Framework (JCF) Tutorial