Lekce 30 - Testování v Reactu - Cypress

V předchozí lekci, Testování v Reactu - Snapshot testy a testování události, jsme si napsali snapshot test pro modální okno a otestovali jsme událost onChange() pomocí funkce fireEvent().

V následujícím tutoriálu pokročilého Reactu se zaměříme na Cypress, moderní a výkonný nástroj pro testování webových aplikací. Vytvoříme si v něm také testy pro aplikaci s pandou, konkrétně test komponenty a také komplexnější End-to-End test.

Cypress

Testovací nástroj Cypress je navržen tak, aby byl snadný pro začátečníky, ale poskytuje dostatek možností i pro pokročilé uživatele. Umožňuje psát testy v čitelné a srozumitelné formě.

Podporuje dva druhy testů – End-to-End testy a testy komponent (Component Testing).

Testy komponent (Component Testing)

Testy komponent jsou zaměřeny na izolované testování jednotlivých částí webové aplikace. Jde o podobný přístup, jaký se používá při testování s React Testing Library a frameworkem Vitest. Testujeme pouze vybranou komponentu, kterou si specificky vykreslíme mimo kontext celé aplikace.

End-to-End testy

End-to-End testy v Cypressu slouží k ověření správného fungování celé webové aplikace nebo jejích hlavních částí od začátku až do konce. Tyto testy simulují skutečné chování uživatelů, interagují s webovou stránkou nebo aplikací a ověřují, zda všechny části pracují správně spolu jako celek.

Tvorba testů v Cypressu

Teď si tvorbu testů v Cypressu vyzkoušíme na aplikaci s pandou. Aplikaci si stáhneme z archivu lekce Testování v Reactu - Snapshot testy a testování událostí. Soubor rozbalíme, otevřeme v editoru kódu a v terminálu spustíme postupně příkazy:

...konec náhledu článku...
Pokračuj dál