Test af din React Native-app (Del-1)

(21. dec. 2020)

Introduktion

De fleste udviklere finder test kedelige og en smerte at skrive, men ved du hvad? Det kræver stor dygtighed og erfaring at vide, hvordan man skriver meningsfulde og vedligeholdelige tests. Den viden, du får ved at lære at teste din kode, vil også ændre den måde, du skriver kode på under udvikling. Denne artikel skal hjælpe dig med at komme i gang med din testvej.

Retningslinjer for bedre test

Dette er nogle af de retningslinjer, jeg lærte efter at have undersøgt, hvordan andre udviklere tester deres kode. At følge disse retningslinjer gjorde det lettere for mig at skrive og vedligeholde tests i hele kodebasen.

1. Test ikke implementeringen af ​​din kode

For at forstå, hvorfor dette er vigtigt, lad os gennemgå et scenario. Antag at du skrev en funktion, der tager n som input og output resultatet af tilføjelse af den første n numre.

Lad os antage, at du tester getSumOfFirstN for n=2 ved at hævde, at add kaldes 2 times med argumenterne henholdsvis (0, 2) og (2, 1) og output fra getSumOfFirstN er 3.

Senere finder du ud af, at der er en bedre måde at finde summen af ​​første n tal og omskriv ovenstående kode.

Din test begynder at bryde, fordi du ikke længere ringer til add

Dette var et ligetil eksempel, og det er wh y det kan virke kontraintuitivt, men jeg har set mange udviklere foretage nøjagtig denne form for test, hvor fejlen ikke er så let at se.

2. Lad ikke dine tests blive en anden teknisk gæld

Testing er vigtigt, men du skal også levere koden til de relevante interessenter til tiden. Hvis hver gang du skriver en ny funktion eller ændrer en eksisterende, bryder den dine gamle testsager, eller hvis du ender med at bruge en betydelig del af din tildelte tid på at rette gamle testsager i stedet for at opbygge de nødvendige funktioner, vil du i sidste ende ende med at slette alle de gamle tests og risikerer, at projektet mislykkes i produktionen.

Ved at følge disse retningslinjer skal det hjælpe dig med at sikre, at dine tests enten er let at reparere eller slet ikke går i stykker, når din codebase ændres.

3. Når du bruger UI, skal du skrive tests på en måde, der simulerer den faktiske brugeradfærd.

Antag at du tester om denne knap blev gengivet og fungerede som forventet eller ikke, så tænk først på, hvordan brugeren ville finde og interagere med denne knap. Jeg håber, at de vil se teksten “Send” og derefter trykke på den, så det er præcis det, vi ville simulere. I vores testtilfælde vil vi først søge efter teksten “Send” og derefter simulere “onPress” -hændelsen på den og derefter hævde, hvad det skulle være.

I nogle tilfælde er det muligvis ikke let at identificere den komponent, du vil målrette mod, og i så fald kan du bruge testID prop, men husk at du ikke vil simulere den fulde brugeradfærd, hvis du bruger testID fordi brugerne ikke målretter mod komponenter baseret på deres testID.

Hvorfor er dette vigtigt? Hvorfor skal vi forsøge at simulere brugeradfærd så meget som muligt, når vi bruger UI? Dette skyldes, at det i sidste ende vil være et menneske, der vil interagere med din brugergrænseflade og ikke en computer, og hvis de ser et “Hej” gengives i din knap snarere end en “Send”, skulle din testsag mislykkes, fordi det er noget, der kan smide slutbrugeren væk.

4. Rene funktioner er lettere at teste end urene funktioner

Rene funktioner er funktioner, der altid giver den samme output for en tilsvarende input, dvs. hvis en ren funktion pumper ud 2 for en 1 så ville det altid gøre det, mens urene funktioner måske pumpede ud 2 ved det første opkald og derefter pumpede ud 5 ved det andet opkald.

Dette er praktisk at huske på, når du skriver kode. Uren funktioner kan blive nemmere at teste, hvis det modul, der introducerer “urenheden” i sådanne funktioner, kan bespottes.

5.Brug inventar som input og påstande i dine tests

Antag at du har et objekt af typen medarbejder, og at du har forskellige funktioner, der fungerer på dem, såsom en funktion til at kapitalisere name, en funktion til at kontrollere, om medarbejderen er voksen eller ej osv.

Antag nu, at du tager dette objekt som input i alle dine testsager.

Dette er dine dummy-data eller din “fixture”. I din første testtilfælde, der tester, om funktionen, der navngiver navnet, fungerer som forventet eller ej, hævder du, at dets output er lig med { ...employee, name: employee.name.toUpperCase() }, og i din anden testtilfælde hævder du om funktionen udsender employee.age >= 18 eller ej og så videre.

Du undrer dig måske over hvilken fordel vi får ved at bruge armaturer på en sådan måde? Svaret er, at du gør det lettere for dig selv at lave tests hurtigt i fremtiden ved at skrive dine tests på denne måde.

F.eks. Hvad hvis vi vil tilføje en anden egenskab maritalStatus i medarbejderobjektet, for nu er alle vores medarbejdere forpligtet til at afsløre deres civilstand. Hvis vi i vores første testtilfælde hævdede, at outputen var lig med { name: "KARTIK", age: 25, sex: "Male", children: 0 } i stedet for { ...employee, name: employee.name.toUpperCase() }, bryder vores testsag. Det går også i stykker, hvis vi ændrer værdien af ​​name til noget andet. Med andre ord ville vores testsag overhovedet ikke være fleksibel og vil derfor have en større chance for at bryde på grund af ikke-relaterede ændringer i kodebasen.

6. Skriv enhedstest for komponenter og hjælpefunktioner

Dette er dele af din kode, der skal bruges af flere moduler. Derfor skal de testes for alle mulige input / edge-cases, fordi du ikke ved, hvordan de andre moduler skal bruge disse funktioner / komponenter. Derfor bør disse ikke have nogen uventet adfærd.

7. Skriv integrationstest til skærme

Det er svært at skrive enhedstest til skærme, fordi disse normalt afhænger af et stort antal komponenter og andre tredjepartsbiblioteker som en redux-butik. Så for at skrive enhedstest til skærme bliver du først nødt til at spotte alle disse afhængigheder, hvilket er meget arbejde. Derfor er det bedre at skrive integrationstest i dette tilfælde.

7. Skriv E2E-test til test af native-kode

Native code kører ikke i et jest-miljø. Så for at teste det bliver du nødt til at bruge et bibliotek som Detox.

8. Foretag altid snapshot-test for skærme og komponenter

Hvis du foretager en stilændring i en komponent, der bruges af flere andre skærme / komponenter, mislykkes snapshot-testene for dem, indtil du opdaterer snapshots. Det hjælper dig med at forstå, hvilke andre moduler der blev påvirket af den ændring, du foretog. Hvis du arbejder i et team, hjælper det virkelig korrekturlæseren under PR-anmeldelser med at forstå, hvilke moduler der blev påvirket af den særlige ændring, du foretog i komponenten, fordi ændringerne i snapshots af disse moduler afspejles i din PR.

Konklusion

Jeg håber, du fandt denne artikel nyttig, og hvis du er forvirret af det, du lige har læst, skal du ikke bekymre dig. Den anden del af denne serie vil være en vejledning i opsætning af testmiljøet i React Native med kodeeksempler på testskærme, komponenter og funktioner efter retningslinjerne, som vi har sat i denne første del.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *