NGRX-Playground/.agents/skills/angular-testing/references/vitest-migration.md

Vitest Setup and Migration Guide

Vitest vs Jasmine Comparison

Feature	Vitest	Jasmine/Karma
Speed	Faster (native ESM)	Slower
Watch mode	Instant feedback	Slower rebuilds
Mocking	vi.fn(), vi.mock()	jasmine.createSpy()
Assertions	expect() (Chai-style)	expect() (Jasmine)
UI	Built-in UI mode	Karma browser
Config	angular.json	karma.conf.js

Migration from Jasmine to Vitest

Spy Migration

// Jasmine
const spy = jasmine.createSpy("callback");
spy.and.returnValue("value");
expect(spy).toHaveBeenCalledWith("arg");

// Vitest
const spy = vi.fn();
spy.mockReturnValue("value");
expect(spy).toHaveBeenCalledWith("arg");

SpyOn Migration

// Jasmine
spyOn(service, "method").and.returnValue(of(data));

// Vitest
vi.spyOn(service, "method").mockReturnValue(of(data));

createSpyObj Migration

// Jasmine
const mockService = jasmine.createSpyObj("UserService", [
  "getUser",
  "updateUser",
]);
mockService.getUser.and.returnValue(of({ id: "1", name: "Test" }));

// Vitest
const mockService = {
  getUser: vi.fn(),
  updateUser: vi.fn(),
};
mockService.getUser.mockReturnValue(of({ id: "1", name: "Test" }));

Async Testing Migration

// Jasmine - using done callback
it("should load data", (done) => {
  service.loadData().subscribe((data) => {
    expect(data).toBeDefined();
    done();
  });
});

// Vitest - using async/await
it("should load data", async () => {
  const data = await firstValueFrom(service.loadData());
  expect(data).toBeDefined();
});

Clock/Timer Migration

// Jasmine
jasmine.clock().install();
jasmine.clock().tick(1000);
jasmine.clock().uninstall();

// Vitest
vi.useFakeTimers();
vi.advanceTimersByTime(1000);
vi.useRealTimers();

Vitest Configuration Details

Full angular.json Configuration

{
  "projects": {
    "your-app": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "buildTarget": "your-app:build"
          }
        }
      }
    }
  }
}

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "types": ["vitest/globals"]
  },
  "include": ["src/**/*.spec.ts"]
}

Optional vite.config.ts

For advanced configuration, create a vite.config.ts:

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    include: ["src/**/*.spec.ts"],
    coverage: {
      provider: "v8",
      reporter: ["text", "html", "lcov"],
      exclude: [
        "node_modules/",
        "src/test-setup.ts",
        "**/*.spec.ts",
        "**/*.d.ts",
      ],
    },
  },
});

Running Vitest

# Run tests
ng test

# Watch mode
ng test --watch

# Coverage
ng test --code-coverage

# Run specific file pattern
ng test --include='**/user*.spec.ts'

# CI mode (single run)
ng test --watch=false