Vitest Highlights The New Era of Angular Testing Angular London Meetup, 21. January 2026 RainerHahnekamp 

About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com ● Rainer Hahnekamp ● ANGULARarchitects.io ● NgRx Core Team ● Developer / Trainer / Speaker @RainerHahnekamp Open Source Projects NgRx Toolkit Testronaut NgRx Sheriff 

RainerHahnekamp Agenda ● Full Browser Mode ● Handling Asynchronous Tasks ● All-In with Analog ● Migrating from Jasmine/Jest 

RainerHahnekamp Full-Browser Mode 

RainerHahnekamp Browser Mode Delegates DOM Interaction Common API 

RainerHahnekamp Browser Mode in a Nutshell ● Advantages of Testing Library ○ Automatically deals with whenStable() and detectChanges() ○ User Actions check elements ○ Simple DOM queries via A11y selectors ● Power of E2E (Playwright) ○ Better asynchronous support because of real waiting ○ Advanced User Actions Checks (Auto-Wait) ○ Powerful locator pattern for Querying 

RainerHahnekamp Overview - Full Browser Mode ● Proxies DOM Query and Actions to Playwright ● Uses Locator pattern ○ import { page } from 'vitest/browser'; ● Upgraded Version of userEvents ○ import { userEvent } from 'vitest/browser'; ● Enhanced Matchers ○ await expect.element(page.getByText("Address not found")).toBeVisible(); 

RainerHahnekamp Handling Asynchronous Tasks 

RainerHahnekamp 👑 expect.poll() 👑 

RainerHahnekamp Angular-based Approaches ● waitForAsync: automatic done callback ● fakeAsync: transforms async to sync task ○ flushMicrotasks: run all microtasks ○ tick: move forward in time ○ flush: run all asynchronous tasks (skips periodic timers) Doesn't work with zoneless 

RainerHahnekamp Fake Timers ● Setup & Teardown ○ vitest.useFakeTimers(); ○ vitest.useRealTimers(); ● vitest.runAllTimersAsync() ○ Runs all asynchronous triggered now and in the future ○ Dangerous for intervals, etc. ● vitest.runOnlyPendingTimersAsync(); ○ Runs timers known at the time of execution ○ Safer than runAllTimers() ● vitest.advanceTimersByTimeAsync([time]); ○ Like tick() Use async() to cover Promises 

RainerHahnekamp All-In with Analog.js 

Build Execution Vite-Powered Build with Vitest Use Case Framework-specific Vite Plugins 

Build Execution Angular Build with Vitest Use Case 

Build Execution Vite-Powered Build with Vitest Use Case Angular as Vite Plugin 

RainerHahnekamp "All-In" Features ● VSCode Support ● All Extensions ● Trace Viewer Support ● Debugging ● … 

RainerHahnekamp Migrating to Vitest 

RainerHahnekamp Why Vitest??? 

RainerHahnekamp A little bit of History Browser Browser Emulated Browser (jsdom) 

RainerHahnekamp Why Browser? ✅ Real Browser Behavior ● Rendering ● User Events ● Timings (Signals) ● New Technologies (Shadow DOM, Hydration) ✅ Switch to "UI is the API" ✅ Performant Headless Browsers ✅ Visualization (DX) 

No content

RainerHahnekamp Migrating to Vitest ● Jest ○ 100% Compatible ● Jasmine ○ Different Mocking API ○ Different Timing API ● Experimental Migrator available ● No fakeAsync() or waitForAsync() ○ Go zoneless ○ Rewrite Tests with fakeTimers, expect.poll, etc. ○ Rely on whenStable and PendingTasks 

RainerHahnekamp Have we reached perfection? 

RainerHahnekamp testronaut.dev Stay tuned… 

RainerHahnekamp https://www.angulararchitects.io/en/training/ professional-angular-testing-playwright-edition/ Related Workshops