Testing Angular

Angular Testing Patterns

Testing fundamentals for Angular 21+ applications with Vitest (Karma is deprecated).

Testing Stack (Angular 21+)

Quick Setup

# New project (Vitest is default)
ng new my-app

# Migrate existing project from Karma
ng generate @angular/core:migrate-to-vitest

Signal Component Testing

import { TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

describe('CounterComponent', () => {
  it('should update signal and computed values', async () => {
    const fixture = TestBed.createComponent(CounterComponent);
    const component = fixture.componentInstance;

    // Initial state
    expect(component.count()).toBe(0);
    expect(component.doubled()).toBe(0);

    // Update signal
    component.count.set(5);

    // CRITICAL: Flush effects for signal updates
    TestBed.flushEffects();

    expect(component.count()).toBe(5);
    expect(component.doubled()).toBe(10);
  });
});

Key Testing APIs

Test File Naming

component.spec.ts     # Unit tests
component.test.ts     # Alternative (Vitest style)
component.e2e.ts      # E2E tests (Playwright)

When to Use Each Test Type

See reference.md for detailed patterns and examples.md for complete test suites.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.