🧪 Angular Unit Testing – Von Basics zu Best Practices

(Wie du deine Angular-Komponenten wirklich sicher testest)

Unit Tests gehören zu den am meisten unterschätzten Waffen für wartbare Frontends.
Mit Angular kannst du Tests so schreiben, dass sie dich und dein Team wirklich beschützen.

1️⃣ Warum testen?

• 🧠 Reduziert Bugs vor dem Release
• 🛡️ Refactoring ohne Angst
• 🏆 Höhere Codequalität & Teamvertrauen
• 📦 Dokumentation durch Verhalten

2️⃣ Test Setup mit Jest

npm install --save-dev jest jest-preset-angular @types/jest

setup-jest.ts anlegen:

import 'jest-preset-angular/setup-jest';

3️⃣ Eine Komponente testen

describe('ButtonComponent', () => {
  it('should render the correct label', () => {
    const component = new ButtonComponent();
    component.label = 'Click me';
    expect(component.label).toBe('Click me');
  });
});

4️⃣ Angular TestBed

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [ButtonComponent],
  }).compileComponents();
});

So kannst du sogar Standalone Components problemlos testen.

5️⃣ Best Practices

• Keep it simple – Teste nur, was du kontrollierst
• Arrange – Act – Assert (AAA)
• Keine Implementation testen, sondern Verhalten
• Nutze DOM-Queries statt Internal State

6️⃣ Bonus: Signals testen

it('should increment the signal', () => {
  const counter = signal(0);
  counter.set(counter() + 1);
  expect(counter()).toBe(1);
});

Fazit

Gute Tests = schnelles Arbeiten mit weniger Fehlern.
Sie machen dich mutiger, sauberer, besser.

👉 Nächster Beitrag:
🔁 Angular Lifecycle Hooks – Die unterschätzten Power-Tools