Wie testest du React-Komponenten, und was testest du bewusst nicht?

Teste Verhalten über dieselbe Oberfläche, die ein User hat: Komponente rendern, per Rolle und barrierefreiem Namen abfragen, interagieren und darauf prüfen, was erscheint. Deck die Logik ab, die wirklich kaputtgehen kann, etwa bedingtes Rendern, Fehler- und Leerzustände und Custom Hooks. Teste keine Implementierungsdetails wie internen State, Prop Drilling oder dass eine Child-Komponente aufgerufen wurde, solche Tests brechen bei jedem Refactoring und fangen nichts.

Meine Regel ist, dass ein Test nur dann rot werden soll, wenn sich das für den User sichtbare Verhalten ändert. Ich rendere die Komponente also mit Testing Library, frage per Rolle und barrierefreiem Namen ab, klicke und tippe wie ein Mensch und prüfe, was auf dem Bildschirm steht. Das hat einen netten Nebeneffekt: Wenn ich etwas nicht per Rolle abfragen kann, hat das Markup meist ein Barrierefreiheitsproblem. Beim Netzwerk fange ich auf HTTP-Ebene ab, statt meine eigene Datenschicht zu mocken, denn mein eigenes Modul zu mocken heißt, meinen Mock zu testen. Der meiste Wert kommt aus der mittleren Ebene, ein ganzes Feature mit echten Children und einem gefakten Server, statt ein Test pro Komponente. Was ich nicht teste: internen State, dass ein Helper aufgerufen wurde, Snapshot-Dateien ganzer Bäume oder Styling. Das alles bricht bei harmlosen Refactorings und läuft grün, während wirklich etwas kaputt ist. Dazu deckt eine kleine Zahl End-to-End-Tests die Flows ab, die sich das Geschäft nicht leisten kann zu verlieren, etwa Signup und Checkout, und das war es.