Testowanie i debugowanie aplikacji React

Przestań zgadywać, czy Twój kod działa. Używaj testów, aby budować pewność siebie.

Większość programistów pomija testowanie, ponieważ uważają konfigurację za zbyt trudną. Traktują testowanie jako przykry obowiązek, a nie siatkę bezpieczeństwa.

Nie piszesz testów dla komputera. Piszesz je dla samego siebie w przyszłości. Gdy zmieniasz funkcję o 2 nad ranem, testy natychmiast powiedzą Ci, czy coś zepsułeś.

Myśl o testowaniu jak o piramidzie:

• Testy jednostkowe: Testują jedną funkcję lub komponent. Są szybkie i stanowią ich najwięcej. • Testy integracyjne: Testują, jak poszczególne części współpracują ze sobą. Dają one dużą pewność. • Testy E2E: Testują pełną aplikację w przeglądarce. Używaj ich tylko dla krytycznych ścieżek, takich jak logowanie czy proces zakupowy.

Złota zasada React Testing Library: Testuj to, co widzi użytkownik.

Nie testuj zmiennych stanu. Nie testuj klas CSS. Nie testuj wewnętrznej logiki. Testuj przyciski, tekst i pola wejściowe. Jeśli użytkownik tego nie widzi, nie testuj tego.

Stosuj wzorzec Arrange, Act, Assert:

  • Arrange: Wyrenderuj swój komponent.
  • Act: Kliknij przycisk lub wpisz coś w polu.
  • Assert: Sprawdź, czy na ekranie pojawił się poprawny tekst.

W przypadku kodu asynchronicznego, takiego jak wywołania API, użyj waitFor. Pozwala to testowi poczekać na załadowanie danych przed sprawdzeniem wyniku.

Jeśli Twoja aplikacja ulegnie awarii na produkcji, użyj Error Boundaries. Zapobiegają one sytuacji, w której jeden uszkodzony komponent zamienia całą stronę w biały ekran. Zapewniają użytkownikom bezpieczną alternatywę (graceful fallback).

Szybka lista kontrolna debugowania:

  • Sprawdź konsolę przeglądarki pod kątem błędów.
  • Sprawdź zakładkę Network, aby zobaczyć odpowiedzi API.
  • Użyj React DevTools, aby sprawdzić propsy i stan.
  • Sprawdź, czy nie mutujesz stanu bezpośrednio.
  • Zweryfikuj tablice zależności w useEffect.

Skup się na testowaniu tego, co istotne. Nie potrzebujesz 100% pokrycia (coverage). Musisz pokryć funkcjonalności, których awaria byłaby dotkliwa.

Źródło: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334