Vill du undvika äldre koder? Alla koder som inte är testade klassificeras som äldre koder. Vad kan du göra för att undvika äldre koder? Lösningen är ganska enkel – använd testdriven utveckling (TDD)!
Det finns många verktyg för att testa JavaScript och React.JS-ramverket, vi begränsar vår diskussion till enhetstestning av React med hjälp av Jest och Enzyme.
Vad är enhetstestning och varför är det viktigt?
Enhetstestning är en integrerad del av mjukvaruutveckling processen för att säkerställa produkt stabilitet. Genom enhetstestning kan du vara säker på att alla komponenter i din produkt är testade och redo att användas.
Varför är enhetstestning viktig i mjukvaruutvecklingsprocessen? Det kan:
- Förbättra kodens kvalitet
- Snabbt identifiera framtida avbrott i ett ständigt föränderligt programvarukrav
- Buggar kan hittas i ett tidigt skede, och därmed kan kostnaden för att fixa buggar minskas.
Hur liknar Jest Enzyme?
Jest och Enzyme är motståndskraftiga verktyg för att testa React User Interfaces. Dessa hjälper till att se till att din React-app har ett användargränssnitt som uppfyller de uppställda kraven. Jest och Enzyme utvecklas och installeras med Node Pack Manager. Den har en stor stödjande gemenskap för att hitta din väg ut under en stagnationspunkt under apputvecklingsprocessen.
Hur skiljer sig Jest från Enzyme?
Syftet med Jest och Enzyme skiljer sig något från varandra.
Jest är ett komplett funktionsrikt testramverk. Jest kan köra testskript på alla dina tester och hela påståendebiblioteket. Jest fungerar bra inte bara med React, utan även med andra ramverk. En JavaScript-baserad webbapplikation kommer att använda Node JS för att bygga servern, Jest låter dig köra tester för hela din applikation med ett testbibliotek.
Enzym istället för att tjäna ett komplett testbibliotek, fungerar det som biblioteket som gör testning av React-komponenter ännu enklare. Enzym kan integreras med olika testbibliotek inklusive Jest.
Om du utvecklar en React-app är det mer vettigt att använda både Jest och Enzyme tillsammans för automatiserad UI-testing.
Enhetstestning av React.JS-appar med hjälp av Jest och Enzyme: En steg-för-steg-strategi
Jest är ett JavaScript-testramverk centrerat på enkelhet, som fungerar på ett ultramodernt ramverk och med rent JavaScript. Enzyme används för att testa React.JS-komponenter och är ett mycket lättanvänt och intuitivt bibliotek.
Här är steg-för-steg-proceduren för att testa React-appen med Jest och Enzyme:
Installation
- Börja installera alla nödvändiga bibliotek
- Öppna applikationen och konsolen med yarn eller npm för att installera Jest, Enzyme och andra nödvändiga plugins
- Appar skapade med create-react -appen behöver inte installera Jest eftersom den redan är inbyggd
- Om det inte finns någon förinstallerad Jest kan du använda yarn add jest kommandotÖppna
- slutligen applikationskoden och ställ in testmiljön
Fixa
- testfil Öppna setupTest.js filen och konfigurera adaptern för att använda Jest i testmiljön på rätt sätt
- När den är klar och sparad, börja överväga testfall
Konfigurera testfall
- Förstå vad som händer inuti medan du testar en app och vara säker på de fall som är mycket avgörande för oss att testa . Se till att alla komponenter i appen återges.
- Verifiera om rekvisita som passerat genom komponenterna är korrekta
- För att kontrollera logiken, se till att när du klickar på knapparna ändras värdena på båda kontona. Testa
- slutligen ögonblicksbilder
Nu har vi fyra huvudgrupper till att testa och informerade under
Components rendering check
- testa om dina komponenter i den första gruppen återges korrekt och grupp som använder beskriva
- Öppna App.test.js filen och dra alla tester. Större applikationer måste läggas in i olika filer och om de större applikationerna har två komponenter är det idealiskt att skapa en testfil för var och en av dem separat.
- Använd grunt, se till att komponenterna återges utan barn. Om det finns ytterligare ett element i komponenten, definiera det elementet och använd metoden .contain () för att se om det finns.
- Att använda userBalance- objektet kan hjälpa till med moicks för rekvisita som används för nästa steg.
Godkänd rekvisitatestning Skicka
- nu rekvisitan till komponenterna
- Skapa en annan grupp med beskriv ()
- Inuti gruppen, ställ in tester för att kontrollera om rekvisitan accepteras, visas korrekt och meddelanderekvisita också har godkänts.
- Se till att rekvisitan skickas till underordnade komponenter framgångsrikt
- Testa logiken i din applikation just nu
Logiktestning
- Logik kan vara komplicerad eftersom en viktig funktionalitet som att ändraär inblandad
- Lägg till ytterligare en () kontovärden på enbeskriv-grupp i App.test.js
- knappklickshändelseAnvänd .simulate ()-metoden för att simulera klicka på händelsen på den valda knappen
- Kör tester för att kontrollera funktionaliteten efter en klickhändelse
Ögonblicksbilder
- Använd ytterligare plugin som installerades i början enzym-to-json
- Definiera fall för App-komponent, AccountBalance och Notification-komponent
- Om det finns en uppdatering i användargränssnittet, och ögonblicksbildstesten misslyckas, du kan använda u för att uppdatera ögonblicksbilderna.
- Först gjorda ögonblicksbilder, nya mappar i din app som heter __snapshots__ där det kommer att sparas
Testing
- Ru n de tester och testa din ansökan
- Öppna terminalen och körkommandot garntest eller NPM prov
- se till att testerna körs och du kommer att ha en lista av tester som passerade och kan se tester för att förstå hur de tester för att se hur det ser ut när den misslyckas
Slutsats
Med robusta testramverk som Jets och Enzyme blir din React-app mer stabil och förbättrar kvaliteten på din kod. Det hjälper utvecklare att fixa buggar snabbare. För komplicerade applikationer kommer dessa testramverk att säkerställa att deras koder fungerar som de förväntades, och QA-ingenjörer kan minska sina ansträngningar för UI-regressioner.
Förbättringen av din programvara säkerställs genom att använda verktyg som Jest och Enzyme. När projekten blir mer komplexa kan rätt verktyg som Jest och Enzyme hjälpa dig att hantera den komplexiteten.
