Unit Testing

Unit Testing

In this section, we will cover step by step unit testing for Angular CLI applications. Unit testing is the process of testing the smallest testable units or components of an application in isolation. In Angular 21, Vitest is the default test runner for new projects, replacing Karma and Jasmine.

Why Unit Testing ?

Unit Testing is very important for any applications, because:-

• It analyze the code behavior.
• It improve the design of implementations.
• It allows refactoring and new features implementation without breaking anything.
• It make developers more confident about their code.
• Its a good documentation of our work.

Setup and configuration for unit testing.

In Angular 21, Vitest is the default test runner for new projects. For existing projects, Jasmine and Karma are still supported. Various libraries and tools are available for testing such as Vitest, Jasmine, Karma, Mocha, and Jest.

Vitest:- The default test runner in Angular 21. It offers fast test execution, Jest-compatible syntax, and modern async/await support.

Jasmine:- An open source, behavior-driven development framework for writing Angular tests. Still supported in Angular 21 for existing projects.

Karma:- A test runner that executes JavaScript code in multiple real browsers. Replaced by Vitest as the default in Angular 21, but still supported for legacy projects.

When we create an Angular CLI application, the CLI sets up everything needed to test with the default test framework. When we create a component, directive, pipe, or service through the CLI, a spec.ts file is created automatically. Once the application is created, navigate to the root directory and run the below command to run the test suite.

											ng test
											

The ng test command builds the application and launches the test runner. In Angular 21, this uses Vitest by default. The console output looks similar to below:

 DEV  v1.x.x  /my-angular-app

 âœ" src/app/app.component.spec.ts (3 tests) 12ms
 âœ" src/app/counter.service.spec.ts (2 tests) 5ms

 Test Files  2 passed (2)
      Tests  5 passed (5)
   Start at  10:23:45
   Duration  1.23s

Also, ng test opens a browser window to display the success and failed test cases in the test reporter.

Enable code coverage

An Angular CLI can run unit tests and create code coverage reports and this reports shows us the parts of our code base that may not be properly tested by our unit tests. To generate a code coverage report, just type below code in terminal.

											ng test --no-watch --code-coverage
											

Once the tests are complete, the above command creates a new "/coverage" folder in the root of application. Now, just open the index.html file to see the code coverage report with source code.

To create code coverage reports every time we test, just set the following option in the CLI configuration file, i.e. angular.json:-

											"test": {
												"options": {
													"codeCoverage": true
												}
											}
											

Writing Tests with Vitest (Angular 21)

Vitest uses Jest-compatible syntax. Here is a complete example testing a service and a standalone component:

import { describe, it, expect, beforeEach } from 'vitest';
import { CounterService } from './counter.service';

describe('CounterService', () => {
  let service: CounterService;

  beforeEach(() => {
    service = new CounterService();
  });

  it('should start at 0', () => {
    expect(service.count()).toBe(0);
  });

  it('should increment', () => {
    service.increment();
    expect(service.count()).toBe(1);
  });

  it('should reset', () => {
    service.increment();
    service.reset();
    expect(service.count()).toBe(0);
  });
});

import { describe, it, expect } from 'vitest';
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  it('should create the component', async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent]
    }).compileComponents();

    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it('should render title', async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent]
    }).compileComponents();

    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const el = fixture.nativeElement as HTMLElement;
    expect(el.querySelector('h1')?.textContent).toContain('Angular');
  });
});

Vitest - Default Test Runner in Angular 21

Angular 21 replaces Karma and Jasmine with Vitest as the default test runner for new projects. Vitest offers significantly faster test execution, modern APIs, and Jest-compatible syntax.

• Much faster test execution than Karma.
• Jest-like expect syntax - most specs work unchanged.
• Flexible fake timers and async/await support.
• Browser mode for realistic UI tests.

To create a new project with Vitest (default in Angular 21):

										ng new my-project
										

To migrate existing Jasmine tests to Vitest, use the migration schematic:

										ng g @schematics/angular:refactor-jasmine-vitest