Methoden zur Qualitätssicherung

• In diesem Teil geht es allgemein darum, die Qualität der Software hoch zu halten und unsere Konfidenz, Änderungen daran vorzunehmen
• dabei stehen uns verschiedene Instrumente zur Verfügung, z.B.:
  • isolierte UI-Entwicklung und niedrigschwellige Inspektion
  • festes Fundament statischer Code-Analyse
  • automatische Tests in verschiedenen Ausprägungen

UI-Entwicklung mit Storybook

• Erlaubt es, React-Komponenten isoliert zu entwickeln und in allen möglichen Zuständen zu inspizieren

npx sb init # installs storybook
npm run storybook # opens on http://localhost:6006

statische Code-Analyse und -Optimierung

• Typisierung: Prop Types
• Formattierung: Prettier
• Linting: ESLint, stylelint

Entwicklungsabläufe

• Git Hooks mit husky (z.B. pre-commit)
  • Linting (eslint --fix + prettier rules plugin)
  • Formatting (prettier --write) (.prettierrc)
  • Testing (jest --findRelatedTests – kann produktivitätshemmend wirken, wenn langsam)
• Deploy Previews für einfache manuelle Inspekion von PRs

Test-Arten

• Unit Tests: testen einzelner Komponenten → meist eher happy paths (Test auf mögliche Korrektheit statt mögliche Fehler, teilweise sinnfreie Tests, um code coverage limit zu treffen)
• Integration Tests: Zusammenspiel verschiedener Komponenten zu einem aus Nutzerperspektive mehr oder weniger abgeschlossenen Feature (rendern von Komponenten-Bäumen in vereinfachter Test-Umgebung, um gegen erwartete Ausgabe zu prüfen)
• End-to-end-tests: Emulation echter BenutzerInnen und möglichst realer Umgebung. Also Ausführen einer kompletten App in einer realistischen Browser-Umgebung

Test-Verteilung

• Empfehlung
  • festes Fundament an statischer Testinfrastruktur (Nutzung von Lintern, IDE- und CI-Integration)
  • wenig Unit Tests
  • hauptsächlich Integration Tests: sweet spot / goldilocks zone zwischen Aufwand und Test-Abdeckung / Risikominimierung
  • (wenige) End-to-end-Tests (für kritischen Pfade)

Unit Tests mit Jest

• Tests immer co-locaten (Foo.js, Foo.test.js) und nicht in eigenem Verzeichniss (__tests__)
• Jest: Test-Runner in Node der Browser emuliert (JSDOM)
  • watcher
  • spies
  • coverage reports
  • snapshot testing (eher vermeiden)

React Testing Library

• Menge von Helpern, mit denen React-Komponenten getestet werden können, ohne deren Implementierungsdetails zu kennen

npm install @testing-library/react @testing-library/jest-dom

Mocking

• Browser APIs: Werden teilweise in JSDOM nicht unterstützt, z.B. LocalStorage
• Data Fetching: mws / Mock Service Worker um APIs Express-ähnlich nachzubauen

End-to-end-Tests

• Playwright
• Cypress
• Puppeteer