Karma to Vitest in Angular: The Config That Actually Runs

The whole test target is one line#

After Karma you expect a config file. There is not one. The entire Vitest test target in angular.json is the builder line: { "builder": "@angular/build:unit-test" }. No vitest.config.ts, no karma.conf.js, no test.ts bootstrap to maintain.

ng new on Angular v21 generates exactly that, plus a tsconfig.spec.json whose only notable line is "types": ["vitest/globals"]. That is what lets describe, it, and expect work without an import. The runner defaults to a jsdom environment. That is the whole setup.

Some docs show an advanced target carrying a providersFile. That is optional, not the default. Start with the one line and add knobs only when a test needs them.

// tsconfig.spec.json sets "types": ["vitest/globals"], so describe, it, and
// expect need no import. The unit-test builder runs this in jsdom by default.
describe('AppComponent', () => {
  it('creates', () => {
    const fixture = TestBed.createComponent(AppComponent);
    expect(fixture.componentInstance).toBeTruthy();
  });
});

Where polyfills, styles, and assets come from#

The reason the test target can be one line is that it does not redefine your app. It reuses your project's build target (the development configuration) to compile the app under test. So the polyfills, styles, and assets you set under build are already in effect. You do not repeat them under test.

That detail has a consequence worth knowing before you write a single test. Because the build polyfills include zone.js, zone.js is loaded in your tests too. But the Vitest runner never wraps each test in Angular's test zone, so fakeAsync, tick, and waitForAsync throw the ProxyZone error. The config is fine. The timing helpers need a rewrite, which is a separate job.

The install: add Vitest, drop Karma#

Moving an existing Karma project is mostly dependency surgery. Add Vitest and jsdom, remove the Karma and Jasmine packages, and point the test target at the unit-test builder. Angular 22 ships a migrate-karma-to-vitest schematic that automates the switch; the steps below are what it does under the hood, and what to review when it is done.

The first run is ng test. In CI add --no-watch, since watch mode defaults on in a terminal and off otherwise. Run the simple specs first and confirm they pass before you touch anything that bends time.

npm install --save-dev vitest jsdom @vitest/coverage-v8
npm rm karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter karma-coverage jasmine-core @types/jasmine
ng test --no-watch

The options worth adding#

Keep the target minimal and add only what a test actually needs. These are the ones that come up most, all set under architect.test.options so you do not retype them on every run.

The config is the easy part#

If the target is one line, why does the migration take an afternoon? Because the config was never the work. The work is the specs that break when the test zone is gone: the fakeAsync and waitForAsync tests that need a rewrite to Vitest fake timers. And before you start, it is worth deciding whether the migration is worth it at all for a given suite.

The config gets you a green runner in one line. The rest of this work is about keeping it green.