For a long time, Angular projects defaulted to Karma as the test runner and Jasmine as the testing framework. While this setup has served the community well, Karma has been deprecated since 2023, and the JavaScript testing ecosystem has evolved significantly. Modern tools offer faster execution, better developer experience, and closer alignment with current JavaScript module standards.

Angular v21 addresses this by introducing Vitest as the new standard testing framework for newly created projects. This is a significant shift that brings several compelling benefits to Angular developers.

Why Vitest? Why Move From Karma/Jasmine?

The decision to adopt Vitest is driven by several factors:

  1. Speed: Vitest is built on top of Vite, a next-generation frontend tooling that focuses on speed. It boasts extremely fast startup times and hot module reloading (HMR) for tests, leading to quicker feedback cycles during development.
  2. Native ES Modules Support: Vitest has native support for ES Modules (ESM), which is the standard for modern JavaScript. Karma and Jasmine often required complex configurations to handle ESM correctly.
  3. Modern Developer Experience:
    • Unified Tooling: Vite is often used for development servers and bundling, so using Vitest creates a more unified and consistent tooling experience.
    • TypeScript Out-of-the-Box: Excellent, fast TypeScript support without extra configuration.
    • Interactive Watch Mode: Vitest’s watch mode is highly interactive and efficient, running only affected tests.
    • Clearer Stack Traces: Fewer abstractions mean cleaner error messages.
  4. Simplicity & Configuration: Vitest often requires less boilerplate configuration compared to Karma, which needed a dedicated configuration file (karma.conf.js).
  5. Community Alignment: Vitest is rapidly gaining traction in the wider JavaScript ecosystem, particularly in frameworks like Vue and Svelte. This move aligns Angular with these modern trends.
  6. Browser Environment Testing (Optional): While primarily a Node.js-based test runner, Vitest also offers a “Browser Mode” to run tests in a real browser environment, if needed, providing flexibility.

What Does This Mean for New Angular v21 Projects?

When you create a new Angular v21 project with ng new, the Angular CLI will now configure it to use Vitest by default.

Key changes you’ll observe:

  • No karma.conf.js or src/test.ts (the test setup file for Karma/Jasmine).
  • Your angular.json will use the @angular/build:unit-test builder, which now defaults to Vitest.
  • Test files will have .spec.ts or .test.ts extensions (or whatever glob is configured, typically **/*.spec.ts).
  • The API for writing tests will feel very familiar, as Vitest supports the Jest/Jasmine syntax (describe, it, expect).

How to Run Tests with Vitest

Running tests remains the same command you’re used to:

ng test

This command will now launch Vitest in watch mode. You’ll see output in your terminal similar to:

✓ src/app/app.component.spec.ts (1 test)
    ✓ AppComponent
        ✓ should create the app (1ms)

Test Files  1 passed (1)
     Tests  1 passed (1)
  Start at  12:34:56
  Duration  1.23s (transform 450ms, setup 120ms, collect 300ms, tests 1ms)

Basic Vitest Configuration in angular.json

The minimal angular.json setup for Vitest is now very concise:

// angular.json (snippet)
"test": {
  "builder": "@angular/build:unit-test"
}

You can customize Vitest further through options in angular.json or via CLI flags when running ng test:

  • coverage (and related options): Configure code coverage reports.
  • browsers: Define which browsers to use for testing (if using browser mode).
  • reporters: Specify output reporters.
  • setupFiles: Define files to run before tests.
  • ui: Enable Vitest’s UI mode for a web-based test runner interface.
  • watch: Control watch mode (true by default when ng test).
  • filter: Run only tests matching a specific pattern.
  • runnerConfig: Use a custom Vitest configuration file for advanced scenarios.

Compatibility and Migration for Existing Projects

If you’re upgrading an existing Angular project, it will likely retain its Karma/Jasmine setup. The ng update command typically doesn’t automatically switch the testing framework due to the potential for breaking changes and the need for manual review.

If you wish to migrate an existing project to Vitest:

  1. Manual Configuration: You’ll likely need to:
    • Install Vitest and related dependencies.
    • Adjust angular.json to use the @angular/build:unit-test builder.
    • Create a setup-jest.ts (or similar) file for Angular testing module setup.
    • Migrate any custom Karma/Jasmine configurations or test helpers.
  2. CLI Migration Utilities (Future): The Angular team might introduce specific ng generate schematics or ng update rules in future versions to help with a smoother migration from Karma/Jasmine to Vitest. Keep an eye on official announcements.

Mini-Challenge: Explore Vitest UI Mode (Conceptual)

While we won’t implement a full test in this chapter, imagine your project is set up with Vitest.

  1. How would you modify your angular.json or use an ng test command to launch the Vitest UI?
  2. What benefits do you think a UI-based test runner offers over a purely terminal-based one?

Hint for 1: Look for the ui option in Vitest’s documentation or the angular.json test configuration schema.

// angular.json snippet for UI mode
"test": {
  "builder": "@angular/build:unit-test",
  "options": {
    "ui": true // This would typically enable Vitest's UI
  }
}
// Then run: ng test

Summary/Key Takeaways

  • Angular v21 makes Vitest the new default testing framework for new projects, replacing Karma/Jasmine.
  • Vitest offers faster test runs, native ESM support, and a modern developer experience built on Vite.
  • You run tests with the familiar ng test command.
  • Configuration is simplified, often managed within angular.json under the @angular/build:unit-test builder.
  • Existing projects updating to v21 will likely retain their old testing setup; manual migration to Vitest is possible but requires effort.

In the next chapter, we’ll get practical by writing some actual unit tests for an Angular component using Vitest syntax, experiencing its speed and clarity firsthand.