Angular Zone.js Testing Utilities: When to Use Each

Updated 11 November 2026 · Standard formula, shown below

Use Angular’s waitForAsync to finish a test after its Zone.js-tracked asynchronous work settles, and use fakeAsync with tick or flushMicrotasks when you need to control when timers and promise callbacks run. Use whenStable when you want to wait on a fixture’s stability directly; choose based on whether you need automatic waiting, explicit time control, or component-level stability.

What the utilities do

Angular’s testing helpers address a common difficulty: a test may trigger asynchronous work, but its assertions can run before that work finishes. Zone.js helps Angular track asynchronous activity. Angular’s testing APIs build on that tracking so a test can either wait for activity to complete or simulate its passage in a controlled way.

waitForAsync wraps a test or setup function and completes it when tracked asynchronous work has finished.
fakeAsync runs a test in a special fake-async zone, letting the test advance timers and drain pending promise work explicitly.
tick advances the fake clock by a chosen number of milliseconds and runs eligible timer callbacks.
flushMicrotasks runs queued microtasks, such as promise callbacks, without advancing the timer clock.
fixture.whenStable() returns a promise that resolves when the fixture has no pending tracked work that would keep it unstable.

These are related, but not interchangeable. In particular, waitForAsync waits for real tracked work, while fakeAsync gives the test control over a simulated clock.

Use waitForAsync for automatic waiting

Choose waitForAsync when the test starts asynchronous work and you only need to make assertions after it completes. It is often suitable for Angular test setup involving asynchronous compilation or for tests where a promise or other tracked task resolves without needing precise timing.

For example, a test can use waitForAsync as a wrapper around its function, start the work, then make assertions in a completion callback or after awaiting a returned promise where supported by the test setup. The wrapper tells the testing environment to keep the test open until its tracked asynchronous tasks finish.

Use it when you do not need to say “advance 200 milliseconds” or inspect an intermediate timer state. It does not provide a way to speed up or manually advance real timers, and a task that never completes can leave the test waiting indefinitely.

Use fakeAsync, tick, and flushMicrotasks for timing

Use fakeAsync when the timing itself matters—for example, testing a debounce, a delayed callback, or a sequence that combines promises and timers. Within its wrapped function, the test controls asynchronous progress rather than waiting for elapsed wall-clock time.

it('runs a delayed action after 200 ms', fakeAsync(() => {
  let called = false;
  setTimeout(() => called = true, 200);

  tick(199);
  expect(called).toBeFalse();

  tick(1);
  expect(called).toBeTrue();
}));

tick(ms) advances the fake clock by the amount specified. It also processes eligible timer callbacks and, as those callbacks run, associated microtasks. Use flushMicrotasks() when you want to resolve queued promise callbacks without advancing time:

it('handles a promise callback', fakeAsync(() => {
  let value = '';
  Promise.resolve('done').then(result => value = result);

  flushMicrotasks();
  expect(value).toBe('done');
}));

Use the smallest control that expresses the behavior you are testing. A large tick can run multiple scheduled callbacks and hide whether an intermediate state is correct. Also remember that fakeAsync is not a universal replacement for asynchronous testing: it has environment and API limitations, and it cannot be nested inside another fakeAsync zone.

Use whenStable for fixture stability

Choose fixture.whenStable() when a component test needs to wait until Angular considers a fixture stable. This is useful after an action or change-detection pass that triggers tracked asynchronous work, especially when the component’s final state matters but the exact timer duration does not.

fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('Loaded');

The extra detection pass is often useful because stability waiting and rendering are distinct concerns: after asynchronous work settles, run change detection if the test needs the updated view reflected in the DOM. whenStable() is a fixture API, not a clock-control helper. If the component schedules a timer and you need to verify behavior before and after its deadline, fakeAsync and tick are usually clearer.

How to choose the right helper

Wait for work to finish, with no timing assertions: use waitForAsync, or await fixture.whenStable() when the concern is the component fixture.
Test a timeout, interval, debounce, or delayed state: use fakeAsync and advance time with tick.
Resolve promises in a controlled test without moving time: use fakeAsync and flushMicrotasks.
Test a promise-based workflow without fake-clock behavior: use ordinary async/await when the test framework and the API under test support it.

Do not combine approaches casually. A function wrapped in fakeAsync should use its fake-time controls rather than waiting for real time to pass. Likewise, waitForAsync is not a way to advance a timer: if a timer is intentionally long, automatic waiting may make the test slow or cause it to hang.

Common problems and misconceptions

Confusing promises and timers: promise callbacks are microtasks; setTimeout callbacks are timer tasks. flushMicrotasks() does not advance a timeout. Use tick to advance timer time.

Expecting stability to mean “everything imaginable is done”: stability describes work Angular and Zone.js can track in the current testing context. Work outside that tracking, or a task that continually schedules more work, may not behave as expected. Identify what actually schedules the update and whether it is tracked.

Forgetting change detection: a completed asynchronous callback does not always mean the test has refreshed the template. Call fixture.detectChanges() where needed before asserting on rendered content.

Using fakeAsync with unsupported work: some asynchronous APIs or test environments do not work with the fake-async zone. If the test fails because the operation cannot be controlled there, use an ordinary asynchronous test or a suitable test double instead of forcing it through fakeAsync.

Frequently Asked Questions

Is waitForAsync the same as fakeAsync?
No. waitForAsync waits for tracked asynchronous work to finish. fakeAsync lets a test control simulated time and explicitly process timers or microtasks.

When should I use tick instead of flushMicrotasks?
Use tick when timer-based work must run after time advances. Use flushMicrotasks to process queued promise callbacks without advancing the fake clock.

Can I use await inside fakeAsync?
Generally, do not mix native async/await with fakeAsync. Choose one model for the test: fake-clock controls, or a normal asynchronous test that awaits its work.

Does whenStable run change detection?
It waits for the fixture to become stable; it is not a substitute for explicitly running change detection when the test needs the DOM updated. Call detectChanges() as appropriate.

Why does a waitForAsync test hang?
A tracked task may still be pending, may continually schedule more work, or may never complete. Check unresolved promises, timers, and subscriptions; use fake time when the test needs to control a timer.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.