test(signals): migrate signals testing suite from Jest to Vitest (#4631)

modules/signals/migrations/18_0_0-rc_3-protected-state/index.spec.ts

@@ -7,7 +7,10 @@ import { createWorkspace } from '@ngrx/schematics-core/testing';
 import { tags } from '@angular-devkit/core';
 
 describe('migrate protectedState', () => {
-  const collectionPath = path.join(__dirname, '../migration.json');
+  const collectionPath = path.join(
+    process.cwd(),
+    'dist/modules/signals/migrations/migration.json'
+  );
   const schematicRunner = new SchematicTestRunner('schematics', collectionPath);
 
   let appTree: UnitTestTree;

modules/signals/migrations/18_0_0-rc_3-writablestatesource/index.spec.ts

@@ -8,7 +8,10 @@ import * as path from 'path';
 import { LogEntry } from '@angular-devkit/core/src/logger';
 
 describe('18_0_0-rc_3-writablestatesource', () => {
-  const collectionPath = path.join(__dirname, '../migration.json');
+  const collectionPath = path.join(
+    process.cwd(),
+    'dist/modules/signals/migrations/migration.json'
+  );
   const schematicRunner = new SchematicTestRunner('schematics', collectionPath);
 
   let appTree: UnitTestTree;

modules/signals/migrations/19_0_0-rc_0-props/index.spec.ts

@@ -7,7 +7,10 @@ import { createWorkspace } from '@ngrx/schematics-core/testing';
 import { tags } from '@angular-devkit/core';
 
 describe('migrate to props', () => {
-  const collectionPath = path.join(__dirname, '../migration.json');
+  const collectionPath = path.join(
+    process.cwd(),
+    'dist/modules/signals/migrations/migration.json'
+  );
   const schematicRunner = new SchematicTestRunner('schematics', collectionPath);
 
   let appTree: UnitTestTree;

modules/signals/project.json

@@ -4,6 +4,8 @@
   "projectType": "library",
   "sourceRoot": "modules/signals/src",
   "prefix": "ngrx",
+  "tags": [],
+  "generators": {},
   "targets": {
     "build-package": {
       "executor": "@angular-devkit/build-angular:ng-packagr",
@@ -45,15 +47,9 @@
       "outputs": ["{options.outputFile}"]
     },
     "test": {
-      "executor": "@nx/jest:jest",
-      "options": {
-        "jestConfig": "modules/signals/jest.config.ts",
-        "runInBand": true,
-        "passWithNoTests": false
-      },
+      "executor": "@analogjs/vitest-angular:test",
+      "dependsOn": ["build"],
       "outputs": ["{workspaceRoot}/coverage/modules/signals"]
     }
-  },
-  "generators": {},
-  "tags": []
+  }
 }

modules/signals/schematics/ng-add/index.spec.ts

@@ -9,7 +9,7 @@ import { createWorkspace } from '@ngrx/schematics-core/testing';
 describe('Signals ng-add Schematic', () => {
   const schematicRunner = new SchematicTestRunner(
     '@ngrx/signals',
-    path.join(__dirname, '../collection.json')
+    path.join(process.cwd(), 'dist/modules/signals/schematics/collection.json')
   );
   const defaultOptions: SchemaOptions = {
     skipPackageJson: false,

modules/signals/spec/signal-state.spec.ts

@@ -1,9 +1,11 @@
-import * as angular from '@angular/core';
+import { computed } from '@angular/core';
 import { effect, isSignal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { patchState, signalState } from '../src';
 import { STATE_SOURCE } from '../src/state-source';
 
+vi.mock('@angular/core', { spy: true });
+
 describe('signalState', () => {
   const initialState = {
     user: {
@@ -15,6 +17,10 @@ describe('signalState', () => {
     ngrx: 'signals',
   };
 
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
   it('has writable state source', () => {
     const state = signalState({});
     const stateSource = state[STATE_SOURCE];
@@ -46,19 +52,17 @@ describe('signalState', () => {
   });
 
   it('caches previously created signals', () => {
-    jest.spyOn(angular, 'computed');
-
     const state = signalState(initialState);
     const user1 = state.user;
     const user2 = state.user;
 
-    expect(angular.computed).toHaveBeenCalledTimes(1);
+    expect(computed).toHaveBeenCalledTimes(1);
 
     const _ = state.user.firstName;
     const __ = user1.firstName;
     const ___ = user2.firstName;
 
-    expect(angular.computed).toHaveBeenCalledTimes(2);
+    expect(computed).toHaveBeenCalledTimes(2);
   });
 
   it('does not modify props that are not state slices', () => {

modules/signals/spec/signal-store.spec.ts

@@ -435,9 +435,9 @@ describe('signalStore', () => {
         }))
       );
       const warnings: string[][] = [];
-      jest
-        .spyOn(console, 'warn')
-        .mockImplementation((...args: string[]) => warnings.push(args));
+      vi.spyOn(console, 'warn').mockImplementation((...args: string[]) =>
+        warnings.push(args)
+      );
 
       new Store();
 

modules/signals/spec/with-computed.spec.ts

@@ -34,7 +34,7 @@ describe('withComputed', () => {
       })),
     ].reduce((acc, feature) => feature(acc), getInitialInnerStore());
     const s2 = signal(10).asReadonly();
-    jest.spyOn(console, 'warn').mockImplementation();
+    vi.spyOn(console, 'warn').mockImplementation();
 
     withComputed(() => ({
       p: signal(0).asReadonly(),

modules/signals/spec/with-methods.spec.ts

@@ -34,7 +34,7 @@ describe('withMethods', () => {
       })),
     ].reduce((acc, feature) => feature(acc), getInitialInnerStore());
     const m2 = () => 10;
-    jest.spyOn(console, 'warn').mockImplementation();
+    vi.spyOn(console, 'warn').mockImplementation();
 
     withMethods(() => ({
       p() {},

modules/signals/spec/with-props.spec.ts

@@ -31,7 +31,7 @@ describe('withProps', () => {
         m2() {},
       })),
     ].reduce((acc, feature) => feature(acc), getInitialInnerStore());
-    jest.spyOn(console, 'warn').mockImplementation();
+    vi.spyOn(console, 'warn').mockImplementation();
 
     withProps(() => ({
       s1: { foo: 'bar' },

modules/signals/spec/with-state.spec.ts

@@ -69,7 +69,7 @@ describe('withState', () => {
         m2() {},
       })),
     ].reduce((acc, feature) => feature(acc), getInitialInnerStore());
-    jest.spyOn(console, 'warn').mockImplementation();
+    vi.spyOn(console, 'warn').mockImplementation();
 
     withState(() => ({
       p2: 100,

modules/signals/test-setup.ts

@@ -1,5 +1,15 @@
-import 'zone.js/plugins/zone-legacy';
-import 'jest-preset-angular/setup-jest';
 import { TextEncoder, TextDecoder } from 'util';
+import '@analogjs/vitest-angular/setup-zone';
+
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+import { getTestBed } from '@angular/core/testing';
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
 
 Object.assign(global, { TextDecoder, TextEncoder });

modules/signals/tsconfig.spec.json

@@ -2,10 +2,10 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"],
+    "module": "es2022",
+    "types": ["node", "vitest", "vitest/globals"],
     "target": "es2016"
   },
   "files": ["test-setup.ts"],
-  "include": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
 }

modules/signals/vite.config.mts

@@ -0,0 +1,29 @@
+/// <reference types="vitest" />
+
+import angular from '@analogjs/vite-plugin-angular';
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  return {
+    root: __dirname,
+    plugins: [
+      angular(),
+      nxViteTsPaths(),
+    ],
+    test: {
+      globals: true,
+      pool: 'forks',
+      environment: 'jsdom',
+      setupFiles: ['test-setup.ts'],
+      include: ['**/*.spec.ts'],
+      reporters: ['default']
+    },
+    define: {
+      'import.meta.vitest': mode !== 'production',
+    },
+  };
+});

package.json

@@ -88,6 +88,9 @@
     "zone.js": "0.15.0"
   },
   "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^1.9.0",
+    "@analogjs/vitest-angular": "^1.9.0",
+    "@angular/build": "19.0.0",
     "@angular-devkit/build-angular": "19.0.0",
     "@angular-devkit/core": "19.0.0",
     "@angular-devkit/schematics": "19.0.0",
@@ -105,6 +108,7 @@
     "@nx/eslint-plugin": "20.1.2",
     "@nx/jest": "20.1.2",
     "@nx/node": "20.1.2",
+    "@nx/vite": "20.1.2",
     "@nx/workspace": "20.1.2",
     "@octokit/rest": "^15.17.0",
     "@schematics/angular": "19.0.0",
@@ -151,6 +155,7 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-jasmine2": "29.7.0",
     "jest-preset-angular": "14.1.0",
+    "jsdom": "^22.0.0",
     "karma": "6.4.0",
     "karma-chrome-launcher": "3.1.0",
     "karma-cli": "~1.0.1",
@@ -186,7 +191,8 @@
     "tsutils": "2.27.2",
     "typescript": "5.6.2",
     "typescript-eslint": "8.15.0",
-    "uglify-js": "^3.1.9"
+    "uglify-js": "^3.1.9",
+    "vitest": "^2.0.0"
   },
   "collective": {
     "type": "opencollective",