Testování vaší nativní aplikace React (část 1)

(21. prosince 2020)

Úvod

Většina vývojářů považuje testování za nudné a obtížné psát, ale víte co? Psaní smysluplných a udržovatelných testů vyžaduje velké dovednosti a zkušenosti. Znalosti, které získáte, když se naučíte testovat svůj kód, také změní způsob psaní kódu ve vývoji. Tento článek by vám měl pomoci začít na vaší cestě testování.

Pokyny pro lepší testování

Toto jsou některé z pokynů, které jsem se naučil po prozkoumání toho, jak ostatní vývojáři testují svůj kód. Dodržování těchto pokynů mi usnadnilo psaní a údržbu testů v celé základně kódu.

1. Netestujte implementaci svého kódu

Abychom pochopili, proč je to důležité, projdeme si scénář. Předpokládejme, že jste napsali funkci, která bere n jako vstup a vydává výsledek přidání první n čísla.

Předpokládejme, že testujete getSumOfFirstN na n=2 tvrzením, že add se nazývá 2 times s argumenty (0, 2) a (2, 1) a výstupem getSumOfFirstN je 3.

Později zjistíte, že existuje lepší způsob, jak zjistit součet prvních n čísla a přepište výše uvedený kód.

Váš test se začne lámat, protože již nevoláte add

Toto byl přímý příklad, a to je Může se to zdát protiintuitivní, ale viděl jsem spoustu vývojářů, kteří provádějí přesně tento druh testování, kde chyba není tak snadno vidět.

2. Nedovolte, aby se vaše testy staly dalším technologickým dluhem.

Testování je důležité, ale musíte také včas doručit kód příslušným zúčastněným stranám. Pokud kdykoli napíšete novou funkci nebo upravíte existující, rozbije to vaše staré testovací případy nebo nakonec utratíte značnou část svého přiděleného času za opravu starých testovacích případů, než abyste vytvořili požadované funkce, pak nakonec smažete všechny staré testy a riskovat selhání projektu ve výrobě.

Dodržování těchto pokynů by vám mělo pomoci zajistit, aby vaše testy byly buď snadno opravitelné, nebo aby se při změně vaší kódové základny vůbec nerozbily.

3. Při testování uživatelského rozhraní zapisujte testy způsobem, který simuluje skutečné chování uživatelů.

Předpokládejme, že testujete zda bylo toto tlačítko vykresleno a fungovalo podle očekávání, nebo ne, pak nejprve přemýšlejte o tom, jak by uživatel toto tlačítko našel a pracoval s ním. Doufám, že uvidí text „Odeslat“ a poté jej stisknou, a to je přesně to, co bychom simulovali. V našem testovacím případě nejprve vyhledáme text „Odeslat“ a poté na něm simulujeme událost „onPress“ a poté tvrdíme, co se mělo dělat.

V některých případech to nemusí být snadno jednoznačně identifikujete komponentu, na kterou chcete cílit, a v takovém případě můžete použít testID prop, ale nezapomeňte, že pokud použijete testID protože uživatelé necílí na komponenty na základě jejich testID.

Proč je to důležité? Proč se musíme při testování uživatelského rozhraní snažit co nejvíce simulovat chování uživatelů? Důvodem je, že na konci to bude člověk, který bude komunikovat s vaším uživatelským rozhraním, a nikoli počítač, a pokud uvidí, že se ve vašem tlačítku vykreslí „Hello“, a nikoli „Submit“, váš testovací případ by měl selhat, protože to je něco, co může konečného uživatele odhodit.

4. Čisté funkce se snáze testují než nečisté funkce

Čisté funkce jsou funkce, které vždy poskytnou stejný výstup pro odpovídající vstup, tj. Pokud čistá funkce vyčerpá 2 pro 1 by to tak vždy bylo, zatímco nečisté funkce by mohly při prvním volání vypustit 2 a poté vypustit 5 při druhém volání.

Toto je užitečné mít na paměti při psaní kódu. Nečisté funkce se mohou snáze otestovat, pokud je modul, který do těchto funkcí zavádí „nečistotu“, simulovatelný.

5.Používejte zařízení jako vstup a tvrzení ve svých testech.

Předpokládejme, že máte objekt typu zaměstnanec a že na něm pracují různé funkce, například funkce pro velká písmena name, funkce pro kontrolu, zda je zaměstnanec dospělý, či nikoli, atd.

Předpokládejme, že tento objekt budete brát jako vstup ve všech testovacích případech.

Toto jsou vaše fiktivní data nebo vaše „zařízení“. Ve vašem prvním testovacím případě, který testuje, zda funkce, která kapitalizuje název, pracuje podle očekávání nebo ne, tvrdíte, že jeho výstup je roven { ...employee, name: employee.name.toUpperCase() } a ve druhém testovacím případě tvrdíte ať už je funkce výstupem employee.age >= 18 nebo ne, atd.

Možná by vás zajímalo, jakou výhodu získáváme takovým používáním zařízení? Odpověď je, že si v budoucnu budete snazší rychle opravit testy psaním testů tímto způsobem.

Např. Co když chceme do objektu zaměstnance přidat další vlastnost maritalStatus, protože nyní jsou všichni naši zaměstnanci povinni zveřejnit svůj rodinný stav. Pokud v našem prvním testovacím případě jsme namísto { ...employee, name: employee.name.toUpperCase() } tvrdili, že výstup bude roven { name: "KARTIK", age: 25, sex: "Male", children: 0 }, náš testovací případ se rozbije. Rovněž se zlomí, pokud změníme hodnotu name na jinou. Jinými slovy, náš testovací případ by nebyl vůbec flexibilní, a proto bude mít větší šanci na zlomení kvůli nesouvisejícím změnám v základně kódu.

6. Psaní testů jednotek pro komponenty a obslužné funkce

Toto jsou části vašeho kódu, které budou použity více moduly. Proto je třeba je otestovat na všechny možné vstupy / případy hran, protože nevíte, jak budou ostatní moduly tyto funkce / komponenty používat. Proto by neměly mít neočekávané chování.

7. Testy integrace zápisu pro obrazovky

Je těžké psát testy jednotek pro obrazovky, protože obvykle závisí na velkém počtu komponent a dalších knihovnách třetích stran, jako je reduxový obchod. Chcete-li tedy psát jednotkové testy pro obrazovky, budete nejprve muset zesměšňovat všechny tyto závislosti, což je hodně práce. Proto je v tomto případě lepší psát integrační testy.

7. Napište testy E2E pro testování nativního kódu

Nativní kód se nespustí v prostředí žertu. Chcete-li to otestovat, budete muset použít knihovnu jako Detox.

8. Vždy proveďte testování snímků pro obrazovky a komponenty

Pokud provedete změnu stylu v komponentě, kterou používá několik dalších obrazovek / komponent, pak testy snímků u těchto testů selžou, dokud neaktualizujete snímky. Pomůže vám pochopit, které další moduly byly ovlivněny změnou, kterou jste provedli. Pokud pracujete v týmu, pomůže to recenzentovi během kontroly PR pochopit, jaké moduly byly ovlivněny konkrétní změnou provedenou v komponentě, protože změny ve snímcích těchto modulů se projeví ve vašem PR.

Závěr

Doufám, že vám tento článek připadal užitečný, a pokud jste zmateni tím, co jste právě četli, nebojte se. Druhá část této série bude výukovým programem o nastavení testovacího prostředí v React Native s ukázkami kódu testovacích obrazovek, komponent a funkcí podle pokynů, které jsme nastavili v této první části.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *