Psaní testů může být únavné a opakující se. Můžete mít pocit, že ztrácíte drahocenný čas, který byste raději využili k práci na funkcích. Pokud však chcete dodávat aplikace, ve kterých jste si jisti, měli byste psát testy.

Testování vám umožňuje zachytit chyby a chyby, které byste jinak mohli poslat uživatelům. Zlepšuje tedy uživatelské prostředí vaší aplikace a ušetří vám nutnost ladit produkční kód.

V Reactu můžete snadno psát testy pomocí Jestu a React Testing Library.

Co byste měli testovat v Reactu?

Rozhodování o tom, co testovat, může být obtížné. I když jsou testy skvělé, neměli byste testovat každý řádek v aplikaci React. Pokud tak učiníte, budete mít křehké testy, které se pokazí při sebemenší změně ve vaší aplikaci.

Místo toho byste měli otestovat pouze implementaci koncového uživatele. To znamená otestovat, jak bude koncový uživatel používat vaši aplikaci, namísto testování vnitřního fungování vaší aplikace.

Kromě toho se ujistěte, že otestujete nejpoužívanější komponenty ve vaší aplikaci, jako je vstupní stránka nebo komponenta pro přihlášení. Otestujte také nejdůležitější funkce vaší aplikace. Mohou to být například funkce, které přinášejí peníze, jako je funkce nákupního košíku.

Při rozhodování o tom, co testovat, je třeba mít na paměti jednu věc: nikdy netestovat funkčnost, kterou React zvládá sám. Například místo testování platnosti rekvizit můžete použít React PropTypes.

Testování komponentu tlačítka

Pamatujte, že byste měli testovat pouze implementaci komponenty koncovým uživatelem, nikoli její vnitřní fungování. Pro komponentu tlačítka to znamená ověřit, že se vykresluje bez selhání a zobrazuje se správně.

Vytvořte nový soubor v src složka s názvem Button.js a přidejte následující kód.

funkceKnoflík({hodnota}) {
vrátit se (
<knoflík>{hodnota}</button>
 )
}
vývoznívýchozí Knoflík

Button.js přijímá prop s názvem value a používá ji jako hodnotu tlačítka.

Psaní svého prvního testu

A aplikace create-react-app je dodáván s předinstalovaným Jest a React Testing Library. Jest je odlehčená testovací knihovna s vestavěnými funkcemi zesměšňování a tvrzení. Funguje to s mnoha JavaScriptové rámce. Knihovna React Testing na druhé straně poskytuje funkce, které vám pomohou otestovat, jak uživatelé interagují s komponentami.

Vytvořte nový soubor s názvem Button.test.js ve složce src. Ve výchozím nastavení Jest identifikuje soubory s příponou .test.js jako testovací soubory a automaticky je spouští. Další možností je přidat testovací soubory do složky s názvem __testy__.

Přidejte následující kód do Button.test.js a vytvořte první test.

import { poskytnout } z '@testing-library/react';
import Knoflík z '../Knoflík';
popsat('Komponenta tlačítka', () => { 
 test('Vykreslí komponentu tlačítka bez selhání', () => {
 poskytnout(<Knoflík />);
 }); 
})

Tento test nejprve definuje, o čem test je, pomocí bloku popisu poskytnutého Jest. Tento blok je užitečný pro seskupování souvisejících testů. Zde seskupujete testy pro komponentu Button.

Uvnitř bloku description máte první test v bloku testu. Tento blok přijímá řetězec popisující, co by měl test udělat, a funkci zpětného volání, která provede očekávání.

V tomto příkladu by měl test vykreslit komponentu Button bez selhání. Metoda vykreslení z knihovny React Testing Library provede skutečný test. Kontroluje, zda se komponenta Button vykresluje správně. Pokud ano, test projde, jinak selže.

Použití rolí k nalezení tlačítka

Někdy chcete zkontrolovat, zda byl prvek namontován. Metoda screen má funkci getByRole(), kterou můžete použít k zachycení prvku z DOM.

screen.getByRole('knoflík')

Poté můžete použít prvek, který jste vzali, k provádění testů, jako je kontrola, zda v dokumentu existuje nebo byl správně vykreslen.

getByRole() je jedním z mnoha dotazů, které můžete použít k výběru prvků v komponentě. Podívejte se na další typy dotazů v The React Testing Library’s Průvodce „Jaký dotaz mám použít“. Také kromě role „tlačítko“, většina sémantické prvky HTML mít implicitní role, které můžete použít k provádění svých dotazů. Najděte seznam rolí z MDN dokumenty.

Přidejte následující do testovacího bloku, abyste ověřili vykreslení komponenty.

test('Vykreslí tlačítko bez pádu', () => {
 poskytnout(<Hodnota tlačítka="Přihlásit se" />);
 očekávat (screen.getByRole('knoflík')).toBeInTheDocument()
});

Shoda toBeInTheDocument() zkontroluje, zda prvek tlačítka v dokumentu existuje.

Očekávejte, že se tlačítko správně vykreslí

Komponenta Button přijímá hodnotu prop a zobrazuje ji. Aby se správně vykreslil, musí být zobrazená hodnota stejná jako ta, kterou jste předali.

Vytvořte nový testovací blok a přidejte následující kód.

test('Vykreslí tlačítko správně', () => {
 poskytnout(<Hodnota tlačítka="Přihlásit se" />);
 očekávat (screen.getByRole('knoflík')).toHaveTextContent("Přihlásit se")
})

Pamatujte, že při používání knihovny React Testing Library nemusíte po testech provádět čištění. V minulých verzích byste museli čištění provést ručně takto:

po každém (úklid)

Nyní testovací knihovna automaticky odpojí komponenty po každém vykreslení.

Vytváření Snapshot Tests

Zatím jste testovali chování komponenty Button. Napište testy snímků, abyste otestovali, zda výstup komponenty zůstává stejný.

Snapshot testy porovnávají aktuální výstup s uloženým výstupem komponenty. Pokud například změníte styl komponenty Button, test snímku vás upozorní. Můžete buď aktualizovat snímek, aby odpovídal změněné součásti, nebo vrátit změny stylu.

Snapshot testy jsou velmi užitečné, kdykoli chcete zajistit, aby se vaše uživatelské rozhraní neočekávaně nezměnilo.

Testování snímků se liší od testů jednotek, protože k vytvoření snímku potřebujete již fungující kód.

Použijete metodu rendereru z balíčku respond-test-renderer npm. Chcete-li jej nainstalovat, spusťte následující kód.

npm Nainstalujte reagovat-test-vykreslovač

V Button.test.js zapište test snímku následovně:

test('Snímek zápasů', () => {
 const tree = renderer.create(<Hodnota tlačítka="Přihlásit se" />).toJSON();
očekávat(strom).toMatchSnapshot();
})

Pro komponentu Button neexistují žádné snímky, takže spuštěním tohoto testu se vedle testovacího souboru vytvoří soubor snímku:

Knoflík
└─── __testy__
│ │ Knoflík.testy.js
│ └─── __snímek__
│ │ Knoflík.test.js.cvaknout
│ 
└─── Knoflík.js

Nyní, když spustíte další test, React porovná nový snímek, který vygeneruje, s uloženým.

Napište testy pro nejpoužívanější komponenty

Tento tutoriál vás naučil, jak psát testy DOM a snímky v Reactu testováním komponenty Button. Psaní testů pro všechny komponenty, které vytvoříte, může být únavné. Tyto testy vám však ušetří čas, který byste strávili laděním již nasazeného kódu.

Nemusíte dosáhnout 100% pokrytí testem, ale ujistěte se, že píšete testy pro nejpoužívanější a nejdůležitější komponenty.