Pokud chcete vědět, jak testovat reagovat, jste na správném místě. Opravdu víte, že váš kód dělá to, co má dělat? Testovali jste to v prohlížeči? Co když nemáte, nebo nemůžete otestovat všechno, a rozbije se ve výrobě?
Testovací knihovna je skupina developerů veřejných služeb používají k zápisu jednotlivých testů na aplikačních komponentách. Některé zásadní části testu jsou:
Popis:
popisuje to, o čem je test
Použití / vykreslení:
používá komponentu v prostředí, kde lze testovat
Uštěpačný:
vytváří předstírat, že můžete zkontrolovat vaše předpoklady
V průběhu tohoto článku budu prozkoumat některé příklady z knihovny testování reagovat, aby vám pomohli začít s tímto hodnotným způsobem zlepšení robustnosti vašeho kódu výstupu, stejně jako zajištění vašeho kódu nehodí jakákoli ošklivá překvapení, jakmile jde do výroby.
Chcete více užitečných zdrojů? Zde je rundown nejlepšího
Web Design Tools.
kolem, že vám pomůže pracovat chytřejší. Nebo pokud potřebujete nový stroj, zkuste toto kolotočení
Nejlepší notebooky pro programování
. Nebo pokud budujete nové stránky, možná budete potřebovat skvělé
Webové stránky Builder.
.
01. Začněte s knihovnou testování reagovat
Budu používat vytvářet-reagovat-aplikaci pro toto demo, protože již přichází předkonfigurován s testovací knihovnou. Pokud používáte Gatsby nebo vlastní instalaci, může existovat nějaká konfigurace, kterou musíte běžet před spuštěním pomocí zkušební knihovny.
Chcete-li začít, vytvoříme novou aplikaci. Máte-li nedávnou verzi node.js již můžete spustit následující příkaz bez instalace cokoliv jiného globálně:
npx create-react-app netmag-javascript-testing
02. Rozhodněte se, co testovat
Představte si, že máme jednoduchou složku, řekněte tlačítko s nějakým státem. Jaké jsou některé z věcí, které potřebují testování ve složce takhle?
●.
Vzhled složky:
Nechceme, aby se něco nečekaně změnilo poté, co jsme napsali naši komponentu. Takže budeme psát test snímku, abyste zachytili, jak to vykresluje. Pokud se něco změní, uvidíme ji rychle bez manuálního nebo vizuálního testu. To je skvělé pro komponenty, které se skládají z mnoha menších komponent: můžete rychle vidět, když (a kde) byl ovlivněn jeho vzhled.
●.
Různé větve, které činí:
Protože bychom mohli mít dva nebo více různých výstupů, musíme testovat, že je to správně vykreslování, ne jen jeden z nich. Takže musíme simulovat událost Click a mít jiný test snímku pro způsob, jakým je spuštěn tento kódu kódu.
●.
Tyto funkce se nazývají podle očekávání:
Chceme zajistit, že kód jsme napsali, aby zavolali jinou funkci, pracuje, jakmile předpokládáme, že to bude. Ale protože tato funkce je externí závislost, nechceme to testovat zde. Naše testy by měly zapouzdřit pouze funkčnost, kterou chceme.
Pojďme napsat náš první test. Vytvořit nový soubor
Mycomponent.unit.test.js.
ve stejné složce jako součást. Přidáním testu.js na konci, bude automaticky vybrán testovací knihovna. Obsah tohoto souboru je uveden níže:
Dovoz reaguje z "reakce"
Import {Render} Z '@ testovací knihovna / reagovat'
Dovoz MyComponent z './mycomponent'
popsat ('MS; MyComponent / gt;', () = & gt; {
// testy jdou sem
})
První věc, kterou chci upozornit, je to
popsat()
Funkce, která má dvě argumenty: První je řetězec, který můžete použít k lepšímu popisu - jako řetězec textu - jaký bude váš test dělat. V našem případě jsme jednoduše řekli, že by to mělo vykreslit. To je velmi užitečné, když někdo jiný se dívá na váš kód, nebo musíte si pamatovat, co jste udělali v pozdější fázi. Psaní dobrých popisů výkazů je forma kódové dokumentace a dalším dobrým důvodem pro psaní testů.
Druhým argumentem je vaše testy. . \ T
popsat()
Funkce spustí všechny tyto testy po druhém.
04. Použijte funkci vyčištění
Pojďme zavést pomocnou funkci
předseda ()
. Musíme to použít, protože pokaždé, když děláme něco s komponentou, chceme, aby byla čerstvá kopie bez rekvizit, které jsme předtím uplyli, stále existují ve složce. Nebo bychom museli re-vykreslení komponenty:
předseda ()
To je pro nás a my to můžeme předat funkci čištění.
Import {Render, CleanUp} z "@ testovací knihovna / reagovat"
...
popsat ("složka by měla činit", () = & gt; {
Předvedení (vyčištění)
}
V tomto kroku jdeme na 'Mount' naší komponenty (nebo vykreslení).
Popište (komponenta by měla činit ", () = & gt; {
Předvedení (vyčištění)
("vykreslí se základními rekvizitami", () = & gt; {
činí (
Tento render nám poskytuje přístup ke všem vykresleným vlastnostem kompilovaného komponentu. To by mohlo být dobré pustit do
console.log ()
Takže můžete vidět jasněji, co to dělá.
Pokud ano, uvidíte, že existuje několik užitečných vlastností, které zde můžeme využít. Udělám tvrzení (provést zkušební prohlášení) a otestovat jej extrahováním kontejneru. Kontejner "obsahuje" uzliny DOM (všechny HTML) spojené s komponentou.
IT ("vykresli základní rekvizity", () = & gt; {
const {kontejner} = vykreslení (& lt; mycomponent / & gt;)
})
Nyní máme přístup k kontejneru, jak zjistím, že je to vykresleno podle mého tvrzení? Přidáním testu snímku.
Přemýšlejte o snímku jako jako fotografie. To vyžaduje snímek naší komponenty v určitém okamžiku. Pak kdykoliv provádíme změny kódu, můžeme vidět, jestli stále odpovídá původnímu snímku. Pokud ano, můžeme si být jisti, že v komponentě se nic nezměnilo. Pokud však ne, mohli bychom odhalit problém, který vznikl v jiné složce, kterou bychom nemuseli dříve spatřili:
06. Testovací vlastnosti
Propages nebo vlastnosti komponenty mohou být testovány také s snímky. Testování různých rekvizit poskytnete vaší komponeny, vám poskytne větší pokrytí a důvěru. Nikdy nevíte, kdy bude požadavek na to, že rekvizity vašich komponentů se vrátí a konečný výstup se změní.
Definujeme vlastnosti v objektu a poté použijte operátor rozšíření (tři body následované názvem objektu:
... Lightproperties)
Protože můžeme jen projít jedním argumentem, když budeme tímto způsobem vykresli. Je také užitečné vidět, jaké vlastnosti procházíte izolovaně:
Představte si, že naše komponenta má tlačítko a chcete se ujistit, že se něco stane, když je tlačítko kliknutí. Můžete si myslet, že chcete otestovat stav aplikace; Můžete například v pokušení otestovat, že stát aktualizuje. To však není předmětem těchto testů.
To nás zavádí k důležitému pojetí při používání zkušební knihovny: Nejsme zde, abychom testovali stav nebo způsob, jakým naše komponenty funguje. Jsme tu, abychom testovali, jak lidé budou používat komponentu a že splňuje jejich očekávání.
Ať už je to nebo ne aktualizován, je nepodstatný; Co chceme testovat, je to, co výsledek tohoto tlačítka stiskne.
Představme si, že testujeme výsledek funkce, která změní UI z tmavého režimu do režimu světla. Zde je komponenta:
Všimli jste si, že jsme přidali nový atribut
Data-testid.
na tlačítko? Zde je to, jak to můžeš otestovat. Nejprve importujte novou funkci, podívejte se na zkušební knihovnu:
Import {CleanUp,
Folelvent,
poskytnout
} Z "@ testování-knihovna / reagovat"
Můžeme tuto funkci použít k testování Existují změny v UI a že tyto změny jsou konzistentní:
To je skvělé: nemusíme ručně jít na stránky a rozhlédni se, pak klikněte na tlačítko a podruhé se podruhé - během kterého můžete přiznat, že budete zapomenout nebo něco mine! Nyní můžeme mít důvěru, že vzhledem k stejnému vstupu můžeme očekávat stejný výstup v naší složce.
Pokud jde o testovací ID, osobně se nelíbí
Data-testid.
najít něco vm. Koneckonců, objekt testů je napodobovat to, co uživatel dělá a otestovat, co se stane, když to dělají.
Data-testid.
Cítí se jako trochu podvádět - i když data-testidy budou pravděpodobně vhodné pro váš qa inženýr (viz box úloha inženýrů zajišťování kvality).
Místo toho bychom mohli použít
GetBeText ()
a předejte textem našeho tlačítka. Tato metoda by byla mnohem více specifická.
08. Mock a špionážní funkce
Někdy budeme muset otestovat volání do funkce, ale tato funkce je mimo rozsah testu. Například mám samostatný modul, který obsahuje funkci, která vypočítá hodnotu PI určitým počtem desetinných míst.
Nemusím testovat, co je výsledkem tohoto modulu. Musím testovat, že moje funkce dělá podle očekávání. Pro více informací o tom, proč je to, viz box jednotka a integrační testy. V tomto případě jsme mohli "vysmívat" tuto funkci:
Funkce
TopaveBeenCallectimes ()
je jedním z mnoha pomocných funkcí v testovací knihovně, která nám umožní
otestovat výstup funkcí. To nám umožňuje nejen rozsah našich testů pouze modulu, který chceme testovat, ale také znamená, že můžeme "špión" na nebo vidět, co naše funkce, když volá tuto funkci.
Zkoušky psaní se mohou zdát trochu skličující. Doufám, že tento tutoriál vám dal trochu více důvěry, aby to zkusil. Vzhledem k tomu, že jsem začal psát testy pro mé aplikace, opravdu se nemůžu vrátit: můžu odpočívat snadněji, s vědomím, že zanechám mnohem lepší dědictví pro ty, kteří budou používat svou práci v budoucnu.
Nezapomeňte, že pokud budujete komplexní místo, budete chtít dostat svůj
web hosting
Servisní místo. A pokud se tato stránka pravděpodobně obsahují spoustu aktiv, je skladovat ve spolehlivém
cloudové úložiště
je rozhodující.
Tento obsah se původně objevil
Čistý časopis
. Přečtěte si více našich
Web Design články zde
.
