angular-testing

Angular Testing

Test framework selection

Layer	Framework
Component, service, pipe, directive unit	Karma + Jasmine (Angular CLI default historically) OR Jest (jest-preset-angular, modern preferred)
Component (alt RTL-style)	@testing-library/angular
End-to-end	Playwright or Cypress (ng add @cypress/schematic)

Match what's installed. Modern Angular projects (17+) often switch to Jest for speed; legacy projects stick with Karma.

Karma + Jasmine setup (default)

ng new ships with Karma + Jasmine pre-configured. Tests in *.spec.ts. Run via ng test (watch mode) or ng test --watch=false --browsers=ChromeHeadless (CI).

karma.conf.js and tsconfig.spec.json already in project. Don't modify unless customizing.

Jest setup (modern)

pnpm add -D jest jest-preset-angular @types/jest

jest.config.ts:

import type { Config } from 'jest';

const config: Config = {
  preset: 'jest-preset-angular',
  setupFilesAfterEach: ['<rootDir>/setup-jest.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
};

export default config;

setup-jest.ts:

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

Update tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "types": ["jest", "node"]
  }
}

In package.json:

"scripts": {
  "test": "jest"
}

Remove Karma config / packages from devDependencies (cleanup), or keep both temporarily during migration.

TestBed basics

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

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [UserCardComponent],         // standalone — import the component itself
    }).compileComponents();

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

  it('renders user name', () => {
    component.user = { id: '1', name: 'Alice', email: '[email protected]' };
    fixture.detectChanges();
    expect(fixture.nativeElement.textContent).toContain('Alice');
  });
});