How to Unit Test Angular Components with Jasmine and Karma

Why Testing Angular Components Matters

A well-tested Angular application gives you confidence to refactor, upgrade dependencies, and add features without fear of breaking existing behaviour. Component tests sit at the heart of Angular's testing story — they verify that your template, logic, and data binding all work together correctly.

The Angular Testing Toolkit

Angular comes pre-configured with two testing tools:

• Jasmine — A behaviour-driven testing framework that provides describe, it, expect, and matchers
• Karma — A test runner that executes your tests in a real browser and reports results

When you run ng test, the CLI compiles your project, starts Karma, and opens a browser to run all .spec.ts files.

Anatomy of a Component Test File

Every generated component comes with a .spec.ts file. Here's the basic structure:

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({
      declarations: [UserCardComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(UserCardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

TestBed is Angular's primary testing utility — it creates a miniature Angular module for your test environment. ComponentFixture wraps the component and gives you access to its DOM, change detection, and debug info.

Testing Component Properties and Methods

it('should display the user name', () => {
  component.user = { name: 'Alice', role: 'Admin' };
  fixture.detectChanges();

  const compiled = fixture.nativeElement as HTMLElement;
  expect(compiled.querySelector('h2')?.textContent).toContain('Alice');
});

it('should toggle isExpanded on click', () => {
  expect(component.isExpanded).toBeFalse();
  component.toggle();
  expect(component.isExpanded).toBeTrue();
});

Always call fixture.detectChanges() after changing component state — this triggers Angular's change detection so the template reflects the new values.

Testing with Mocked Services

Avoid calling real services in unit tests. Instead, provide a mock or spy:

const mockUserService = {
  getUser: jasmine.createSpy('getUser').and.returnValue(of({ name: 'Bob' }))
};

await TestBed.configureTestingModule({
  declarations: [UserProfileComponent],
  providers: [
    { provide: UserService, useValue: mockUserService }
  ]
}).compileComponents();

Using jasmine.createSpy lets you assert that a service method was called, how many times, and with what arguments.

Testing @Input and @Output

// Testing @Input
it('should render the provided title', () => {
  component.title = 'Dashboard';
  fixture.detectChanges();
  expect(fixture.nativeElement.querySelector('h1').textContent).toBe('Dashboard');
});

// Testing @Output
it('should emit deleteClicked event', () => {
  spyOn(component.deleteClicked, 'emit');
  component.onDelete();
  expect(component.deleteClicked.emit).toHaveBeenCalled();
});

Common Matchers You'll Use

Matcher	What It Checks
toBeTruthy()	Value is truthy
toBeFalse()	Value is strictly false
toEqual(obj)	Deep equality
toContain(str)	String or array contains value
toHaveBeenCalled()	Spy was invoked
toHaveBeenCalledWith(...)	Spy was called with specific args
toThrow()	Function throws an error

Best Practices

• One logical assertion per test — Keeps failures easy to diagnose.
• Always mock external dependencies — Tests should be fast and deterministic.
• Use NO_ERRORS_SCHEMA sparingly — It hides template errors; prefer shallow rendering or importing child components.
• Test behaviour, not implementation — Test what the component does, not how it does it internally.
• Aim for high coverage of critical paths — 100% coverage isn't always practical, but core business logic should always be covered.