🧱 Angular Component Testing – Struktur, Patterns & Tools

(Wie du Komponenten gezielt testest – klar, schnell, wartbar)

In modernen Angular-Projekten ist Komponententesting mehr als nur TestBed.createComponent().
Es geht um Klarheit, Wiederverwendbarkeit und Testarchitektur.

1️⃣ Teststruktur: Wo gehören welche Tests hin?

• Isolierte Komponententests → *.component.spec.ts
• Integrationstests mit echten Services → *.integration.spec.ts
• End-to-End (E2E) → Cypress oder Playwright

➡️ Trenne klar, was du mockst und was du integrierst.

2️⃣ Tools, die du brauchst

• @angular/core/testing
• @testing-library/angular
• jest (statt Karma)
• msw oder eigene HttpTestingController-Mocks
• ng-mocks für komplexe Module oder Standalone-Komponenten

3️⃣ Komponenten sauber testen: Beispiel

test('zeigt Titel korrekt an', async () => {
  const { getByText } = await render(MyComponent, {
    componentProperties: { title: 'Hallo Welt' },
  });
  expect(getByText('Hallo Welt')).toBeTruthy();
});

Mit @testing-library/angular testest du wie ein User – nicht intern.

4️⃣ Tipp: Mach dein Setup wiederverwendbar

Erstelle eigene render()-Funktionen für wiederholte Imports:

export function renderComponent(options) {
  return render(MyComponent, {
    imports: [SharedModule, RouterTestingModule],
    ...options,
  });
}

Fazit

Komponententests sind keine Pflichtübung.
Sie sind die Grundlage für:

✅ Vertrauen in deine UI
✅ Schutz vor Regressionen
✅ Schnelle Entwicklungszyklen

👉 Nächster Beitrag:
🧠 Angular Project Maturity – Wie reif ist dein Code wirklich?