Proč testovat reducery a async akce bez běžícího prohlížeče?

Akce navrhujte jako malé, konkrétní události, ne jako univerzální příkazy. Místo jedné akce UPDATE s obřím payloadem použijte itemAdded, itemRemoved a itemUpdated. Reducer pak zůstane čitelný a testovatelný. U složitějšího stavu se osvědčil vzor slice: jeden soubor obsahuje počáteční stav, akce i reducer pro jednu doménu. Nesnažte se ale vytvořit jeden slice pro celou aplikaci, jinak se vrátíte k monolitickému reduceru, kterému nikdo nerozumí.

Reduxové reducery jsou čisté funkce: dostanou stav a akci, vrátí nový stav. Žádné DOM, žádné požadavky, žádné čekání. To znamená, že je lze testovat v obyčejném Node.js bez jakéhokoli integračního prostředí. Stačí zavolat funkci a porovnat výsledek. Pokud se vám zdá, že k tomu potřebujete celou aplikaci, pravděpodobně jste do reduceru zanesli vedlejší efekt, který tam nepatří.

Zvlášť opatrně nastavte limit pro zápisové operace. Požadavky na vytvoření účtu, odeslání komentáře nebo nahrání souboru mají být výrazně omezené. Naopak statické soubory a obrázky by měly být z limitu vyjmuté, ideálně přes reverzní proxy. Do middlewaru přidejte skip pro zdravotní kontrolu a interní volání. Bez toho vám monitoring nebo load balancer může vyčerpat kvótu a aplikace přestane odpovídat.

Druhá častá chyba je sdílený stav mezi testy. Reducer si nesmí pamatovat nic mimo svůj vstup. Pokud si pamatuje, testy se navzájem ovlivňují a výsledky jsou náhodné. Před každým testem vytvořte výchozí stav znovu, ideálně pomocí tovární funkce. U async akcí zase hlídejte, že falešný dispatch je čistý a neuchovává data mezi jednotlivými voláními.

Nejčastější problém je sdílený stav mezi testy. Fronta, databáze nebo dočasná složka se nevyčistí a druhý test vidí data z prvního. Před každým testem proto vytvářejte izolované prostředí – vlastní frontu, vlastní schéma nebo alespoň jednoznačný prefix klíčů. Nikdy nespoléhejte na to, že úloha na pozadí doběhne dřív než začne další test.

Typické chyby, které zbytečně prodlužují vývoj: zapomenutá uzavírací značka, duplicitní identifikátory, příliš specifické selektory, které se později těžko přepisují, a míchání inline stylů s externím souborem. Dále pak chybějící alt texty u obrázků, nevhodná hierarchie nadpisů (například přeskočení úrovně) nebo zapomenutý atribut lang. V CSS bývá častým problémem špatné pochopení box modelu – šířka prvku se počítá včetně okrajů a vnitřního odsazení, pokud nepoužijete vlastnost box-sizing s hodnotou border-box. Tu nastavte globálně pro všechny prvky, ušetříte si překvapení.

U async akcí jde nejčastěji o thunk. Ten je funkce, která přijímá dispatch a getState a vrací promise. Test spočívá v tom, že thunk zavoláte s falešnými funkcemi, počkáte na promise a zkontrolujete, jaké akce se dispatchovaly a v jakém pořadí. Pozor na to, že thunk může dispatchovat jiné thunky. V takovém případě je potřeba je buď rozbalit, nebo testovat jen tu vnější část a vnitřní řešit zvlášť.

Mezi časté chyby patří ukládání příliš velkých souborů, jako jsou videa nebo obrázky ve vysokém rozlišení, přímo do repozitáře. Ten se tím nafoukne a práce s ním se zpomalí. Další častou chybou je práce pouze v jedné větvi a dlouhé období bez commitu. Když pak chceš vrátit změnu, musíš rozplétat desítky nesouvisejících úprav. Commitovat bys měl po menších logických celcích, ideálně několikrát denně. Také se vyhýbej nahrávání citlivých údajů, jako jsou přístupové klíče nebo konfigurace databáze. Ty patří do ignorovaných souborů nebo do proměnných prostředí.

Nejčastější chyba je, že do testu zahrnete skutečný HTTP klient. Ten se snaží volat síť, testy jsou pomalé a padají podle připojení. Řešení je jednoduché: síťového klienta nahraďte ručně vytvořenou funkcí, která vrací předpřipravená data nebo chybu. Stejně tak časovače: pokud async akce používá odložené volání, v testu je nahraďte synchronním spuštěním. Nikdy nespouštějte skutečné čekání, testy pak trvají zbytečně dlouho.

Testy reducerů a async akcí bez integračního prostředí jsou rychlé, spolehlivé a odhalí chyby dřív, než se dostanou do prohlížeče. Jakmile je máte zelené, můžete řešit zbytek aplikace. Pokud nějaký test potřebuje prohlížeč, je to signál, že testujete špatnou vrstvu.

Začni tím, že si nainstaluješ nástroj pro distribuované verzování, například Git, a nastavíš si jméno a e-mail, které se budou zapisovat do historie. Pak si vytvoř účet u některé služby pro hostování repozitářů, abys měl zálohu mimo svůj počítač. Pro lokální projekt spusť v terminálu příkaz pro inicializaci repozitáře ve složce projektu. Vytvoř soubor, který vypíše, co se má ignorovat — typicky složky s závislostmi, build výstupem, konfigurační soubory s hesly a systémové soubory. Tento krok nepodceňuj, protože omylem commitnuté heslo se z historie odstraňuje jen velmi těžko.