Písanie testov môže byť únavné a opakujúce sa. Môžete mať pocit, že strácate drahocenný čas, ktorý by ste radšej využili na prácu s funkciami. Ak však chcete posielať aplikácie, v ktorých ste si istí, mali by ste písať testy.
Testovanie vám umožňuje zachytiť chyby a chyby, ktoré by ste inak mohli poslať používateľom. Zlepšuje teda používateľskú skúsenosť s vašou aplikáciou a šetrí vás od ladenia produkčného kódu.
Môžete jednoducho písať testy v React pomocou Jest a React Testing Library.
Čo by ste mali testovať v React?
Rozhodovanie o tom, čo testovať, môže byť ťažké. Aj keď sú testy skvelé, nemali by ste testovať každý riadok v aplikácii React. Ak tak urobíte, budete mať krehké testy, ktoré sa prerušia pri najmenšej zmene vo vašej aplikácii.
Namiesto toho by ste mali otestovať iba implementáciu koncového používateľa. To znamená otestovať, ako bude koncový používateľ používať vašu aplikáciu, namiesto testovania vnútorného fungovania vašej aplikácie.
Okrem toho sa uistite, že ste otestovali najpoužívanejšie komponenty vo svojej aplikácii, ako je vstupná stránka alebo prihlasovací komponent. Otestujte si aj najdôležitejšie funkcie vašej aplikácie. Môžu to byť napríklad funkcie, ktoré prinášajú peniaze, ako napríklad funkcia nákupného košíka.
Pri rozhodovaní o tom, čo testovať, je potrebné mať na pamäti jednu vec, nikdy netestovať funkčnosť, ktorú React zvláda sám. Napríklad namiesto testovania platnosti rekvizít môžete použiť React PropTypes.
Testovanie komponentu tlačidla
Pamätajte, že by ste mali testovať iba implementáciu komponentu koncovým používateľom a nie jeho interné fungovanie. Pre komponent tlačidla to znamená overiť, či sa vykresľuje bez zlyhania a zobrazuje sa správne.
Vytvorte nový súbor v src priečinok s názvom Button.js a pridajte nasledujúci kód.
funkciuTlačidlo({value}) {
vrátiť (
<tlačidlo>{value}</button>
)
}
exportpredvolená Tlačidlo
Button.js prijíma rekvizitu s názvom value a používa ju ako hodnotu tlačidla.
Písanie prvého testu
A aplikáciu create-react-app je predinštalovaný s Jest a React Testing Library. Jest je ľahká testovacia knižnica so vstavanými funkciami zosmiešňovania a tvrdenia. Funguje to s mnohými JavaScriptové rámce. Knižnica React Testing Library na druhej strane poskytuje funkcie, ktoré vám pomôžu otestovať interakciu používateľov s komponentmi.
Vytvorte nový súbor s názvom Button.test.js v priečinku src. V predvolenom nastavení Jest identifikuje súbory s príponou .test.js ako testovacie súbory a automaticky ich spustí. Ďalšou možnosťou je pridať testovacie súbory do priečinka s názvom __testy__.
Pridajte nasledujúci kód do Button.test.js a vytvorte prvý test.
importovať { render } od '@testing-library/react';
importovať Tlačidlo od '../Button';
opísať ('Tlačidlový komponent', () => {
test('Vykreslí komponent tlačidla bez zlyhania', () => {
render(<tlačidlo />);
});
})
Tento test najprv definuje, o čom test je, pomocou bloku popisu, ktorý poskytuje Jest. Tento blok je užitočný na zoskupovanie súvisiacich testov. Tu zoskupujete testy pre komponent Button.
Vo vnútri bloku popisu máte prvý test v testovacom bloku. Tento blok akceptuje reťazec popisujúci, čo by mal test urobiť, a funkciu spätného volania, ktorá vykoná očakávanie.
V tomto príklade by mal test vykresliť komponent Button bez zlyhania. Render metóda z React Testing Library vykoná skutočný test. Kontroluje, či sa komponent Button vykresľuje správne. Ak áno, test prejde, inak zlyhá.
Používanie rolí na nájdenie tlačidla
Niekedy chcete skontrolovať, či bol prvok namontovaný. Metóda obrazovky má funkciu getByRole(), ktorú môžete použiť na získanie prvku z DOM.
screen.getByRole('tlačidlo')
Potom môžete použiť prvok, ktorý ste chytili, na vykonanie testov, ako je kontrola, či existuje v dokumente alebo či bol správne vykreslený.
getByRole() je jedným z mnohých dotazov, ktoré môžete použiť na výber prvkov v komponente. Pozrite si ďalšie typy dopytov v The React Testing Library’s Príručka „Ktorý dotaz mám použiť“. Tiež okrem úlohy „tlačidla“, väčšina sémantické prvky HTML mať implicitné roly, ktoré môžete použiť na vykonávanie svojich dotazov. Nájdite zoznam rolí z Dokumenty MDN.
Pridajte nasledujúce do testovacieho bloku na overenie vykreslenia komponentu.
test('Vykreslí tlačidlo bez zlyhania', () => {
render(<Hodnota tlačidla ="Prihlásiť Se" />);
očakávať (screen.getByRole('tlačidlo')).toBeInTheDocument()
});
Zhoda toBeInTheDocument() skontroluje, či prvok tlačidla v dokumente existuje.
Očakávajte, že sa tlačidlo vykreslí správne
Komponent Button prijme hodnotu podpery a zobrazí ju. Aby sa správne vykreslil, hodnota, ktorú zobrazuje, musí byť rovnaká ako tá, ktorú ste zadali.
Vytvorte nový testovací blok a pridajte nasledujúci kód.
test('Vykreslí tlačidlo správne', () => {
render(<Hodnota tlačidla ="Prihlásiť sa" />);
očakávať (screen.getByRole('tlačidlo')).toHaveTextContent("Prihlásiť sa")
})
Upozorňujeme, že keď používate knižnicu React Testing Library, nemusíte po testoch robiť čistenie. V minulých verziách by ste museli manuálne vykonať čistenie takto:
po každom (upratovanie)
Teraz testovacia knižnica odpája komponenty automaticky po každom vykreslení.
Vytváranie okamžitých testov
Zatiaľ ste testovali správanie komponentu Button. Napíšte testy snímok, aby ste otestovali, či výstup komponentu zostáva rovnaký.
Snímkové testy porovnávajú aktuálny výstup s uloženým výstupom komponentu. Ak napríklad zmeníte štýl komponentu Button, test snímky vás na to upozorní. Môžete buď aktualizovať snímku tak, aby zodpovedala zmenenému komponentu, alebo vrátiť späť zmeny štýlu.
Snímkové testy sú veľmi užitočné vždy, keď sa chcete uistiť, že sa vaše používateľské rozhranie neočakávane nezmení.
Testovanie snímok sa líši od testov jednotiek, pretože na vytvorenie snímky potrebujete už funkčný kód.
Použijete metódu renderer z balíka npm respond-test-renderer. Ak ho chcete nainštalovať, spustite nasledujúci kód.
npm Inštalácia reagovať-test-vykresľovač
V Button.test.js napíšte test snímky takto:
test('Snímka zápasov', () => {
const tree = renderer.create(<Hodnota tlačidla ="Prihlásiť sa" />).toJSON();
očakávať(strom).toMatchSnapshot();
})
Pre komponent Button neexistujú žiadne snímky, takže spustením tohto testu sa vytvorí súbor snímky vedľa testovacieho súboru:
Tlačidlo
└─── __testy__
│ │ Tlačidlo.testy.js
│ └─── __snímka__
│ │ Tlačidlo.test.js.cvaknúť
│
└─── Tlačidlo.js
Teraz, keď spustíte ďalší test, React porovná novú snímku, ktorú vygeneruje, s uloženou snímkou.
Napíšte testy pre najpoužívanejšie komponenty
Tento tutoriál vás naučil, ako písať DOM a snapshot testy v React testovaním komponentu Button. Písanie testov pre všetky komponenty, ktoré vytvoríte, môže byť únavné. Tieto testy vám však ušetria čas, ktorý by ste strávili ladením už nasadeného kódu.
Nemusíte dosiahnuť 100-percentné pokrytie testov, ale uistite sa, že píšete testy pre najpoužívanejšie a najdôležitejšie komponenty.