Testování UI
Kromě unit testů, které jsi už určitě potkal, existují i testy pro UI.
Zde testujeme UI komponenty, jestli jsou stále stejně funkční, jako při předchozím testu.
Taky můžeme používat tzv. integrační testy, které testují, jestli komponenty spolupracují správně a tedy aplikace funguje správně.
Může jít třeba o automatické testy funkcionality a použitelnosti, podobně jako vy v aplikaci klikal uživatel.
Nějaké čtení najdeš tady:
Snapshot testing
Snapshot testing je technika, která umožňuje testovat, jestli komponenta vypadá stejně, jako při předchozím testu.
Zachytíme tzv.
snapshot(snímek) komponenty a porovnáme ho s předchozím snapshotem. Pokud se liší, tak test selže.
⚠️ Pozor: Snapshoty jsou užitečné, ale mají limity:
- Pokud komponentu jakkoli upravíš, musíš to i říct danému testu.
- Není vhodné pro složité interaktivní scénáře (pro ně používejte
integračníae2etesty).
import { render } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { Button } from "./Button";
describe("Button snapshot", () => {
it("odpovídá snapshotu", () => {
const { asFragment } = render(<Button label="Ahoj" />);
expect(asFragment()).toMatchSnapshot();
});
});/*
Tip: Snapshot soubory se generují automaticky (.snap) a commitují se do repozitáře.
Pro změnu použijte příkaz (např. s Vitest): vitest -u nebo s Jest: jest -u.
*/
Ukázka RTL + Vitest:
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { Button } from "./Button";
describe("Button", () => {
it("renders label", () => {
render(<Button label="Ahoj" />);
expect(screen.getByText("Ahoj")).toBeInTheDocument();
});
});