Testar din React Native-app (Del-1)

Publicerad

(21 dec 2020)

Inledning

De flesta utvecklare tycker att test är tråkigt och det är svårt att skriva, men vet du vad? Det kräver stor skicklighet och erfarenhet för att veta hur man skriver meningsfulla och underhållbara tester. Den kunskap som du får genom att lära dig testa din kod kommer också att förändra hur du skriver kod under utveckling. Den här artikeln ska hjälpa dig att komma igång på din testväg.

Riktlinjer för bättre testning

Det här är några av de riktlinjer som jag lärde mig efter att ha undersökt hur andra utvecklare testar sin kod. Att följa dessa riktlinjer gjorde det lättare för mig att skriva och underhålla tester i hela kodbasen.

1. Testa inte implementeringen av din kod

För att förstå varför detta är viktigt, låt oss gå igenom ett scenario. Antag att du skrev en funktion som tar n som ingång och matar ut resultatet av att lägga till den första n siffror.

Låt oss anta att du testar getSumOfFirstN för n=2 genom att hävda att add heter 2 times med argumenten (0, 2) respektive (2, 1) och utdata från getSumOfFirstN är 3.

Senare får du reda på att det finns ett bättre sätt att hitta summan av första n siffror och skriv om ovanstående kod.

Ditt test kommer att börja brytas eftersom du inte längre ringer till add

Detta var ett enkelt exempel, och det är så y det kan tyckas kontraintuitivt, men jag har sett många utvecklare göra exakt denna typ av testning där misstaget inte är så lätt att se.

2. Låt inte dina test bli en annan teknisk skuld

Testning är viktigt, men du måste också leverera koden till berörda intressenter i tid. Om du, när du skriver en ny funktion eller ändrar en befintlig, bryter dina gamla testfall eller att du spenderar en betydande del av din tilldelade tid på att fixa gamla testfall i stället för att bygga de nödvändiga funktionerna, kommer du i slutändan att ta bort alla gamla tester och riskerar att projektet misslyckas i produktionen.

Att följa dessa riktlinjer bör hjälpa dig att se till att dina tester antingen är lätta att fixa eller inte går sönder alls när din kodbas ändras.

3. När du testar användargränssnittet, skriv tester på ett sätt som simulerar det faktiska användarnas beteende.

Antag att du testar om den här knappen återges och fungerar som förväntat eller inte, tänk först på hur användaren skulle hitta och interagera med den här knappen. Jag hoppas att de skulle se ”Skicka” texten och sedan trycka på den och så är det precis vad vi skulle simulera. I vårt testfall kommer vi först att söka efter texten ”Skicka” och sedan simulera ”onPress” -händelsen på den och sedan hävda vad som var tänkt att göra.

I vissa fall kanske det inte är enkelt att identifiera den komponent som du vill rikta in dig på, och i så fall kan du använda testID prop men kom ihåg att du inte kommer att simulera hela användarnas beteende om du använder testID eftersom användare inte riktar in sig på komponenter baserat på deras testID.

Varför är detta viktigt? Varför måste vi försöka simulera användarnas beteende så mycket som möjligt när vi testar användargränssnittet? Det beror på att det i slutändan kommer att vara en människa som kommer att interagera med ditt användargränssnitt och inte en dator och om de ser att ”Hej” återges i din knapp snarare än ett ”Skicka”, bör ditt testfall misslyckas eftersom det är något som kan slänga slutanvändaren.

4. Rena funktioner är lättare att testa än orena funktioner

Rena funktioner är funktioner som alltid ger samma utgång för en motsvarande ingång, dvs om en ren funktion pumpar ut 2 för en 1 då skulle det alltid göra det medan orena funktioner kan pumpa ut 2 vid det första samtalet och sedan pumpa ut 5 vid det andra samtalet.

Detta är praktiskt att tänka på när du skriver kod. Orena funktioner kan bli lättare att testa om modulen som introducerar ”orenhet” i sådana funktioner är hånfull.

5.Använd fixturer som inmatning och påståenden i dina tester

Antag att du har ett objekt av typen anställd och att du har olika funktioner som fungerar på dem, till exempel en funktion för att kapitalisera name, en funktion för att kontrollera om den anställde är vuxen eller inte, etc.

Antag att du tar det här objektet som input i alla dina testfall.

Detta är dina dummydata eller din ”fixture”. I ditt första testfall som testar om den funktion som aktiverar namnet fungerar som förväntat eller inte, hävdar du att dess utdata är lika med { ...employee, name: employee.name.toUpperCase() } och i ditt andra testfall påstår du om funktionen matar ut employee.age >= 18 eller inte, och så vidare.

Du undrar kanske vilken fördel vi får genom att använda armaturer på ett sådant sätt? Svaret är att du gör det lättare för dig själv att fixa tester snabbt i framtiden genom att skriva dina tester på detta sätt.

T.ex. Vad händer om vi vill lägga till en annan egendom maritalStatus i anställdens objekt eftersom nu alla våra anställda är skyldiga att avslöja deras civilstånd. Om vi ​​i vårt första testfall hävdade att utdata var lika med { name: "KARTIK", age: 25, sex: "Male", children: 0 } istället för { ...employee, name: employee.name.toUpperCase() }, kommer vårt testfall att bryta. Det kommer också att brytas om vi ändrar värdet på name till något annat. Med andra ord skulle vårt testfall inte vara flexibelt alls och kommer därför att ha en högre chans att bryta på grund av orelaterade förändringar i kodbasen.

6. Skriv enhetstester för komponenter och verktygsfunktioner

Detta är delar av din kod som ska användas av flera moduler. Därför måste de testas för alla möjliga ingångar / kantfall eftersom du inte vet hur de andra modulerna kommer att använda dessa funktioner / komponenter. Dessa bör därför inte ha något oväntat beteende.

7. Skriv integrationstester för skärmar

Det är svårt att skriva enhetstester för skärmar, eftersom de vanligtvis beror på ett stort antal komponenter och andra tredjepartsbibliotek som en redux-butik. Så för att skriva enhetstester för skärmar måste du först håna alla dessa beroenden, vilket är mycket arbete. Det är därför det är bättre att skriva integrationstester i det här fallet.

7. Skriv E2E-tester för att testa inbyggd kod

Inbyggd kod körs inte i en jest-miljö. Så för att testa det måste du använda ett bibliotek som Detox.

8. Gör alltid ögonblicksbildtester för skärmar och komponenter

Om du gör en stilförändring i en komponent som används av flera andra skärmar / komponenter, misslyckas ögonblicksbildstesterna för dessa tills du uppdaterar stillbilderna. Det hjälper dig att förstå vilka andra moduler som påverkades av den ändring du gjorde. Om du arbetar i ett team hjälper det verkligen granskaren under PR-granskningar att förstå vilka moduler som påverkades av den specifika ändringen du gjorde i komponenten eftersom ändringarna i snapshots för dessa moduler återspeglas i din PR.

Slutsats

Jag hoppas att du tyckte att den här artikeln var till hjälp och om du är förvirrad av vad du just läste, oroa dig inte. Den andra delen av denna serie kommer att vara en handledning om hur du konfigurerar testmiljön i React Native med kodexempel på testskärmar, komponenter och funktioner, enligt riktlinjerna som vi har ställt upp i den här första delen.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *