𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗮𝗻𝗱 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽𝘀

Hör auf zu raten, ob dein Code funktioniert. Nutze Tests, um Vertrauen aufzubauen.

Die meisten Entwickler lassen das Testen aus, weil sie das Setup zu schwierig finden. Sie betrachten das Testen als lästige Pflicht anstatt als Sicherheitsnetz.

Du schreibst Tests nicht für einen Computer. Du schreibst Tests für dein zukünftiges Ich. Wenn du um 2 Uhr morgens eine Funktion änderst, sagen dir die Tests sofort, ob du etwas kaputt gemacht hast.

Stell dir das Testen wie eine Pyramide vor:

• Unit-Tests: Testen eine einzelne Funktion oder Komponente. Diese sind schnell und zahlreich. • Integrationstests: Testen, wie Teile zusammenarbeiten. Diese geben dir hohe Sicherheit. • E2E-Tests: Testen die gesamte App in einem Browser. Nutze diese nur für kritische Pfade wie Login oder Checkout.

Die goldene Regel der React Testing Library: Teste das, was der Nutzer sieht.

Teste keine State-Variablen. Teste keine CSS-Klassen. Teste keine interne Logik. Teste die Buttons, den Text und die Inputs. Wenn ein Nutzer es nicht sehen kann, teste es nicht.

Folge dem Arrange-Act-Assert-Muster:

  • Arrange: Rendere deine Komponente.
  • Act: Klicke auf einen Button oder tippe in ein Feld.
  • Assert: Überprüfe, ob der richtige Text auf dem Bildschirm erscheint.

Für asynchronen Code wie API-Aufrufe verwende waitFor. Dies ermöglicht es deinem Test, auf das Laden der Daten zu warten, bevor das Ergebnis überprüft wird.

Wenn deine App in der Produktion abstürzt, verwende Error Boundaries. Sie verhindern, dass eine defekte Komponente deine gesamte Seite in einen weißen Bildschirm verwandelt. Sie bieten deinen Nutzern einen sanften Fallback.

Schnelle Debugging-Checkliste:

  • Überprüfe die Browser-Konsole auf Fehler.
  • Überprüfe den Network-Tab, um API-Antworten zu sehen.
  • Nutze React DevTools, um Props und State zu inspizieren.
  • Überprüfe, ob du den State direkt mutierst.
  • Überprüfe deine useEffect-Dependency-Arrays.

Konzentriere dich darauf, das zu testen, was wichtig ist. Du brauchst keine 100 % Testabdeckung. Du musst die Funktionen abdecken, deren Ausfall schmerzhaft wäre.

Quelle: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334