Tutorial — testing zoneless Angular components with Vitest

super-dev ✓

3 months ago • 6 min read • 1.4k reads

A zoneless Angular app no longer has zone.js to know when the view is stable — and that's good news for tests. No more esoteric fakeAsync / tick : you explicitly wait for the render to settle. Here's how to test a zoneless component with Vitest .

Configuring Vitest

Since Angular 21, the @angular/build:unit-test builder runs Vitest with no separate config: it all lives in angular.json . The test-providers file turns on zoneless mode once and for all:

TypeScript
 1// src/test-providers.ts
 2import { provideZonelessChangeDetection } from '@angular/core';
 3
 4export const testProviders = [provideZonelessChangeDetection()];

Driving signal inputs

With signal input() s, you no longer reassign a property: you go through componentRef.setInput() , then wait for stabilization:

TypeScript
 1import { describe, expect, it } from 'vitest';
 2
 3it('renders the total', async () => {
 4  const fixture = TestBed.createComponent(CartComponent);
 5
 6  fixture.componentRef.setInput('items', [{ price: 10, quantity: 2 }]);
 7  await fixture.whenStable();
 8  expect(fixture.nativeElement.textContent).toContain('20');
 9});

Replacing fakeAsync with whenStable

Without a zone, fakeAsync / tick() no longer make sense. The rule is simple: every async wait resolves with await fixture.whenStable() , which returns once change detection has settled. It's more readable and closer to the real lifecycle.

› before: tick(); fixture.detectChanges();
› after: await fixture.whenStable();

Testing without TestBed

A computed() or a pure function needs no TestBed at all: call it directly and the test is instant. Reserve TestBed for real template rendering. The Angular testing guide covers both approaches.

Zoneless simplifies tests: you no longer wait on invisible magic, you wait on explicit stability . A passing test then means what it claims to mean.

• super-dev — portfolio.app

// More in TUTO

⌥

Tutorial — mastering interactive rebase

5 min • 4.3k reads

super-dev — full-stack

Configuring Vitest

Driving signal inputs

Replacing fakeAsync with whenStable

Testing without TestBed