A tesztek írása fárasztó és ismétlődő lehet. Előfordulhat, hogy úgy érezheti, hogy értékes időt pazarol, amelyet szívesebben használna a funkciók fejlesztésére. Ha azonban olyan alkalmazásokat szeretne küldeni, amelyekben magabiztos, akkor teszteket kell írnia.
A tesztelés lehetővé teszi olyan hibák és hibák felderítését, amelyeket egyébként esetleg eljuttatna a felhasználókhoz. Ezért javítja az alkalmazás felhasználói élményét, és megóvja Önt az éles kód hibakeresésétől.
Könnyedén írhat teszteket a React alkalmazásban a Jest és a React Testing Library segítségével.
Mit kell tesztelni a React-ban?
Nehéz lehet eldönteni, hogy mit teszteljünk. Bár a tesztek nagyszerűek, nem érdemes a React alkalmazás minden sorát tesztelni. Ha így tesz, törékeny tesztek várnak rád, amelyek megszakadnak az alkalmazásban bekövetkezett legkisebb változástól.
Ehelyett csak a végfelhasználói megvalósítást érdemes tesztelni. Ez azt jelenti, hogy tesztelni kell, hogy a végfelhasználó hogyan fogja használni az alkalmazást, ahelyett, hogy az alkalmazás belső működését tesztelné.
Ezenkívül ellenőrizze az alkalmazás leggyakrabban használt összetevőit, például a céloldalt vagy a bejelentkezési összetevőt. Ezenkívül tesztelje alkalmazásának legfontosabb funkcióit. Ezek lehetnek például pénzt hozó funkciók, például a bevásárlókosár funkció.
Amikor eldönti, hogy mit teszteljen, egy dolgot ne felejtsen el, hogy soha ne tesztelje azokat a funkciókat, amelyeket a React saját maga kezel. Például a kellékek érvényességének tesztelése helyett használhatja a React PropTypes-t.
Gombkomponens tesztelése
Ne feledje, hogy csak az összetevő végfelhasználói megvalósítását kell tesztelnie, a belső működését nem. Egy gombkomponens esetében ez azt jelenti, hogy ellenőrizni kell, hogy összeomlás nélkül jelennek meg, és megfelelően jelennek meg.
Hozzon létre egy új fájlt a src nevű mappa Button.js és adja hozzá a következő kódot.
funkcióGomb({érték}) {
Visszatérés (
<gomb>{érték}</button>
)
}
exportalapértelmezett Gomb
A Button.js elfogad egy érték nevű propot, és ezt használja gombértékként.
Az első teszt megírása
A Create-React-app alkalmazás Előre telepítve érkezik a Jest és a React Testing Library. A Jest egy könnyű tesztelési könyvtár beépített gúnyos és állítási funkciókkal. Sokakkal működik JavaScript keretrendszerek. A React Testing Library viszont olyan funkciókat kínál, amelyek segítségével tesztelheti, hogy a felhasználók hogyan kommunikálnak az összetevőkkel.
Hozzon létre egy új fájlt Button.test.js az src mappában. Alapértelmezés szerint a Jest azonosítja a következővel ellátott fájlokat .test.js tesztfájlként, és automatikusan futtatja azokat. Egy másik lehetőség, hogy a tesztfájlokat hozzáadja a __ nevű mappáhoztesztek__.
Az első teszt létrehozásához adja hozzá a következő kódot a Button.test.js fájlhoz.
import { Vakol } tól től '@testing-library/react';
import Gomb tól től '../Gomb';
leír('Gomb komponens', () => {
teszt('Összeomlás nélkül rendereli a gombkomponenst', () => {
Vakol(<gomb />);
});
})
Ez a teszt először meghatározza, hogy miről szól a teszt a Jest által biztosított leírási blokk segítségével. Ez a blokk hasznos a kapcsolódó tesztek csoportosításához. Itt csoportosítja a Gomb komponens tesztjeit.
A leírás blokkon belül van az első teszt a tesztblokkban. Ez a blokk elfogad egy karakterláncot, amely leírja, hogy mit kell tennie a tesztnek, és egy visszahívási függvényt, amely végrehajtja a várakozást.
Ebben a példában a tesztnek a Button összetevőt összeomlás nélkül kell renderelnie. A React Testing Library renderelési módszere végzi el a tényleges tesztet. Ellenőrzi, hogy a Button komponens megfelelően jelenik-e meg. Ha igen, a teszt sikeres, ellenkező esetben sikertelen.
Szerepkörök használata a gomb megkereséséhez
Néha ellenőrizni szeretné, hogy az elem fel van-e szerelve. A képernyő metódusnak van egy getByRole() függvénye, amellyel megragadhat egy elemet a DOM-ból.
screen.getByRole('gomb')
Ezután a megragadott elemet felhasználhatja tesztek végrehajtására, például annak ellenőrzésére, hogy létezik-e a dokumentumban, vagy megfelelően van-e előállítva.
A getByRole() egy a sok lekérdezés közül, amelyek segítségével kiválaszthatja az összetevők elemeit. Tekintse meg az egyéb típusú lekérdezéseket a The React Testing Library „Melyik lekérdezést használjam” útmutató. A „gomb” szerepen kívül is a legtöbb szemantikus HTML elemek implicit szerepekkel rendelkezik, amelyeket a lekérdezések végrehajtásához használhat. Keresse meg a szerepek listáját innen MDN dokumentumok.
Adja hozzá a következőket a tesztblokkhoz az összetevők megjelenítésének ellenőrzéséhez.
teszt('A gomb összeomlás nélkül jeleníti meg', () => {
Vakol(<Gomb értéke="Regisztrálj" />);
elvár (screen.getByRole('gomb')).ToBeInTheDocument()
});
A toBeInTheDocument() illesztő ellenőrzi, hogy a gombelem létezik-e a dokumentumban.
Várja meg, hogy a gomb megfelelően jelenjen meg
A Button komponens elfogad egy prop értéket és megjeleníti azt. A helyes megjelenítéshez a megjelenített értéknek meg kell egyeznie az Ön által megadott értékkel.
Hozzon létre egy új tesztblokkot, és adja hozzá a következő kódot.
teszt('Megfelelően jeleníti meg a gombot', () => {
Vakol(<Gomb értéke="Belépés" />);
elvár (screen.getByRole('gomb')).toHaveTextContent("Belépés")
})
Vegye figyelembe, hogy a React Testing Library használatakor nem kell tisztítást végeznie a tesztek után. A korábbi verziókban a tisztítást manuálisan kellett elvégeznie a következőképpen:
AfterEach (takarítás)
Mostantól a tesztkönyvtár minden renderelés után automatikusan leválasztja az összetevőket.
Pillanatfelvétel tesztek készítése
Eddig tesztelte a Button összetevő viselkedését. Írjon pillanatfelvételteszteket annak ellenőrzésére, hogy az összetevő kimenete változatlan marad-e.
A pillanatfelvételtesztek összehasonlítják az aktuális kimenetet az összetevő tárolt kimenetével. Például, ha megváltoztatja egy Button összetevő stílusát, a pillanatkép teszt értesíti Önt. Frissítheti a pillanatképet, hogy megfeleljen a megváltozott összetevőnek, vagy visszavonhatja a stílusmódosításokat.
A pillanatfelvétel-tesztek nagyon hasznosak, ha meg akarja győződni arról, hogy a felhasználói felület nem változik váratlanul.
A pillanatkép tesztelése eltér az egységtesztektől, mivel a pillanatkép létrehozásához már működő kóddal kell rendelkeznie.
A react-test-renderer npm csomagból származó renderer metódust fogja használni. Tehát a telepítéshez futtassa a következő kódot.
npm telepítés reagál-teszt-renderelő
A Button.test.js fájlba írja be a pillanatkép tesztet a következőképpen:
teszt('Megfelel a pillanatfelvételnek', () => {
const tree = renderer.create(<Gomb értéke="Belépés" />).toJSON();
elvárják(fa).toMatchSnapshot();
})
Nincsenek pillanatképek a Button komponenshez, ezért a teszt futtatása egy pillanatkép fájlt hoz létre a tesztfájl mellett:
Gomb
└─── __tesztek__
│ │ Gomb.tesztek.js
│ └─── __pillanatfelvétel__
│ │ Gomb.teszt.js.pattan
│
└─── Gomb.js
Most, amikor futtatja a következő tesztet, a React összehasonlítja az általa létrehozott új pillanatképet a tárolttal.
Írjon teszteket a leggyakrabban használt alkatrészekhez
Ez az oktatóanyag megtanította Önnek, hogyan írhat DOM- és pillanatfelvétel-teszteket a React alkalmazásban egy Button összetevő tesztelésével. A tesztek írása az összes létrehozott összetevőhöz fárasztó lehet. Ezek a tesztek azonban időt takarítanak meg, amelyet a már telepített kód hibakeresésével töltött volna.
Nem kell 100 százalékos tesztlefedettséget elérnie, de gondoskodnia kell arról, hogy teszteket írjon a leggyakrabban használt és legfontosabb összetevőihez.
