Testing Components with TestBed

TestBed creates a testing module where you can render components in isolation and assert their DOM output.

Basic Component Test

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserCardComponent } from './user-card.component';

describe('UserCardComponent', () => {
  let component: UserCardComponent;
  let fixture: ComponentFixture<UserCardComponent>;

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

    fixture = TestBed.createComponent(UserCardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // Trigger initial change detection
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should display user name', () => {
    component.user = { name: 'Alice', email: 'alice@example.com' };
    fixture.detectChanges(); // Re-render after input change

    const element: HTMLElement = fixture.nativeElement;
    expect(element.textContent).toContain('Alice');
  });
});

TestBed Configuration

await TestBed.configureTestingModule({
  imports: [UserCardComponent],        // Standalone components
  // declarations: [UserCardComponent], // NgModule-based components
  providers: [
    { provide: UserService, useValue: mockUserService },
  ],
}).compileComponents();

detectChanges

// Initial render
fixture.detectChanges();

// After changing component state
component.name = 'New Name';
fixture.detectChanges();

// OnPush components may need explicit detection
fixture.detectChanges();

fixture.nativeElement provides access to the rendered DOM for assertions.

Querying Elements

it('should display user email', () => {
  component.user = { name: 'Alice', email: 'alice@example.com' };
  fixture.detectChanges();

  const element: HTMLElement = fixture.nativeElement;
  const emailElement = element.querySelector('.email');
  expect(emailElement?.textContent).toContain('alice@example.com');
});

Querying with DebugElement

import { By } from '@angular/platform-browser';

it('should have a submit button', () => {
  const button = fixture.debugElement.query(By.css('button[type="submit"]'));
  expect(button).toBeTruthy();
});

Simulating User Events

it('should call onSelect when button is clicked', () => {
  spyOn(component.selected, 'emit');

  const button = fixture.nativeElement.querySelector('button');
  button.click();
  fixture.detectChanges();

  expect(component.selected.emit).toHaveBeenCalled();
});

Testing with Inputs

it('should display the title input', () => {
  component.title = 'Hello World';
  fixture.detectChanges();

  const element: HTMLElement = fixture.nativeElement;
  expect(element.querySelector('h2')?.textContent).toBe('Hello World');
});

Complete Component Test Example

describe('CounterComponent', () => {
  let fixture: ComponentFixture<CounterComponent>;

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

    fixture = TestBed.createComponent(CounterComponent);
    fixture.detectChanges();
  });

  it('should start at zero', () => {
    expect(fixture.nativeElement.textContent).toContain('0');
  });

  it('should increment on button click', () => {
    const button = fixture.nativeElement.querySelector('button');
    button.click();
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toContain('1');
  });
});