Podstawy

Nie chcemy w tym rozdziale tworzyć całego kursu dotyczącego testowania komponentów, ale myślę, że warto zrobić szybkie powtórzenie najważniejszych tematów związanych z testowaniem w kontekście Design Systemu.

Typy testów

  • Testy jednostkowe (unit tests): Testują pojedyncze funkcje lub komponenty w izolacji, sprawdzając, czy działają zgodnie z oczekiwaniami. Są szybkie i pozwalają na dokładne sprawdzenie logiki biznesowej.

  • Testy integracyjne (integration tests): Testują interakcje między różnymi komponentami i modułami. Upewniają się, że komponenty współpracują ze sobą poprawnie.

  • Testy end-to-end (E2E): Symulują rzeczywiste scenariusze użytkownika, sprawdzając pełne ścieżki zachowań użytkownika. Są bardziej kompleksowe, ale też wolniejsze i bardziej złożone w utrzymaniu. W przypadku Design Systemu i biblioteki komponentów, raczej dość rzadko będziemy z nich korzystać.

Narzędzia do testowania

  • Jest: Jest to framework do testów jednostkowych w ekosystemie React. Integruje się fajnie z React Testing Library i pozwala na dość łatwe pisanie testów.

  • Vitest: Stosunkowo nowa, szybsza (oparta na Vite) i zdobywająca coraz większą popularność alternatywa dla Jest.

  • Testing Library: Biblioteka do testowania komponentów React, Vue, Angular, Svelte i Preact, która kładzie nacisk na testowanie zachowania użytkownika, a nie szczegółów implementacyjnych. Umożliwia testowanie interakcji z komponentami w sposób zbliżony do rzeczywistego użycia.

  • Playwright: Bardzo popularne narzędzie do testów E2E, ale również potrafi znaleźć zastosowanie przy testach jednostkowych i integracyjnych.

  • Cypress: Kolejne narzędzie do testów E2E, które oferuje przyjazny interfejs i potężne możliwości automatyzacji testów. Idealne do testowania pełnych ścieżek użytkownika w aplikacji.

  • Mock Service Worker: Biblioteka do mockowania zapytań sieciowych, działająca zarówno w przeglądarce jak i w Node.js.

Best practices 💪

1. Pisanie testów zgodnych z zachowaniem użytkownika

  • Skup się na tym, jak użytkownicy wchodzą w interakcję z komponentami. Używaj narzędzi takich jak Testing Library, które promują testowanie z perspektywy użytkownika.
  • Unikaj testowania wewnętrznej implementacji komponentów, chyba że jest to absolutnie konieczne.

2. Utrzymywanie testów prostymi i czytelnymi

  • Pisanie prostych i zrozumiałych testów ułatwia ich utrzymanie i zmniejsza ryzyko błędów. Preferuj clean code nad smart code.
  • Używaj opisowych nazw testów, które jasno wskazują, co jest testowane.

3. Izolacja komponentów

  • Testuj komponenty w izolacji, aby upewnić się, że działają poprawnie niezależnie od innych części aplikacji.
  • Używaj mocków do symulowania zależności zewnętrznych.

4. Testowanie różnych stanów komponentów

  • Sprawdź, jak komponenty zachowują się w różnych stanach (np. załadowany, ładowanie, błąd).
  • Testuj różne kombinacje właściwości (props), aby upewnić się, że komponenty reagują poprawnie na zmiany.

5. Testowanie dostępności (a11y)

  • Upewnij się, że komponenty są dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami.
  • Używaj narzędzi do testowania dostępności, takich jak axe-core lub @axe-core/react, aby automatycznie wykrywać problemy związane z dostępnością.

6. Regularne przeglądy i aktualizacje testów

  • Regularnie przeglądaj testy, aby upewnić się, że są aktualne i odpowiadają bieżącym wymaganiom projektu.
  • Usuwaj lub aktualizuj testy, które stały się nieaktualne lub niepotrzebne.

7. Integracja testów z CI/CD

  • Zintegruj testy z systemem ciągłej integracji (CI), aby były automatycznie uruchamiane przy każdym wdrożeniu / Pull Requeście.

8. Używanie snapshotów z rozwagą

  • Snapshot testing (o tym więcej w następnej lekcji) jest przydatny do szybkiego wykrywania zmian w strukturze komponentów, ale nie powinien zastępować testów funkcjonalnych.
  • Regularnie przeglądaj i aktualizuj snapshoty, aby były zgodne z oczekiwaniami.

9. Testowanie stylów i responsywności

  • Upewnij się, że komponenty są poprawnie stylizowane i responsywne na różnych urządzeniach i rozdzielczościach ekranu.
  • Używaj narzędzi do testowania responsywności, takich jak Storybook (o tym również więcej w kolejnych lekcjach tego rozdziału) z pluginami do testowania stylów i układów.

10. Dokumentacja testów

  • Dokumentuj cele i zakres testów, aby inni członkowie zespołu mogli łatwo zrozumieć, co i dlaczego jest testowane.
  • Używaj komentarzy, aby wyjaśnić złożone lub nietypowe testy.

11. Pisz testy zaraz po developmencie

  • Nie oszukuj się, że dopiszesz je później 😉

Masz pytania lub uwagi?

discord icon Przejdź na Discord
Masz pytanie? Napisz do nas 👇
kontakt@frontstack.pl
Copyright © 2023 Frontstack