refactor(store-devtools): migrate unit tests to Vitest (#5041)

Closes #5019

Author: JulienMichelFr

modules/store-devtools/eslint.config.mjs

@@ -11,7 +11,12 @@ const compat = new FlatCompat({
 
 export default [
   {
-    ignores: ['**/dist', '**/jest.config.ts', '**/schematics-core/**/*.ts'],
+    ignores: [
+      '**/dist',
+      '**/schematics-core/**/*.ts',
+      '**/vite.config.*.timestamp*',
+      '**/vitest.config.*.timestamp*',
+    ],
   },
   ...baseConfig,
   ...compat

modules/store-devtools/jest.config.ts

@@ -9,7 +9,10 @@ import { waitForAsync } from '@angular/core/testing';
 
 describe('DevTools Migration 17_0_0-beta', () => {
   let appTree: UnitTestTree;
-  const collectionPath = path.join(__dirname, '../migration.json');
+  const collectionPath = path.join(
+    process.cwd(),
+    'dist/modules/store-devtools/migrations/migration.json'
+  );
   const pkgName = 'store-devtools';
   const migrationname = `ngrx-${pkgName}-migration-17-0-0-beta`;
 

modules/store-devtools/migrations/17_0_0-beta/index.spec.ts

@@ -13,7 +13,10 @@ import {
   versionPrefixes,
 } from '@ngrx/schematics-core/testing/update';
 
-const collectionPath = path.join(__dirname, '../migration.json');
+const collectionPath = path.join(
+  process.cwd(),
+  'dist/modules/store-devtools/migrations/migration.json'
+);
 
 describe('Store Devtools Migration 6_0_0', () => {
   let appTree;

modules/store-devtools/migrations/6_0_0/index.spec.ts

@@ -32,12 +32,24 @@
           {
             "command": "pnpm exec tsc -p modules/store-devtools/tsconfig.schematics.json"
           },
+          {
+            "command": "pnpm exec rimraf node_modules/@ngrx/store-devtools"
+          },
+          {
+            "command": "pnpm exec mkdirp node_modules/@ngrx/store-devtools"
+          },
+          {
+            "command": "ncp dist/modules/store-devtools node_modules/@ngrx/store-devtools"
+          },
           {
             "command": "cpy LICENSE dist/modules/store-devtools"
           }
         ]
       },
-      "outputs": ["{workspaceRoot}/dist/modules/store-devtools"]
+      "outputs": [
+        "{workspaceRoot}/dist/modules/store-devtools",
+        "{workspaceRoot}/node_modules/@ngrx/store-devtools"
+      ]
     },
     "lint": {
       "executor": "@nx/eslint:lint",
@@ -50,12 +62,8 @@
       "outputs": ["{options.outputFile}"]
     },
     "test": {
-      "executor": "@nx/jest:jest",
-      "options": {
-        "jestConfig": "modules/store-devtools/jest.config.ts",
-        "runInBand": true,
-        "passWithNoTests": false
-      },
+      "executor": "@analogjs/vitest-angular:test",
+      "dependsOn": ["build"],
       "outputs": ["{workspaceRoot}/coverage/modules/store-devtools"]
     }
   }

modules/store-devtools/project.json

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Store-Devtools ng-add Schematic Store Devtools ng-add Schematic for standalone application provides initial setup 1`] = `
+exports[`Store-Devtools ng-add Schematic > Store Devtools ng-add Schematic for standalone application > provides initial setup 1`] = `
 "import { ApplicationConfig, provideBrowserGlobalErrorListeners, isDevMode } from '@angular/core';
 import { provideStoreDevtools } from '@ngrx/store-devtools';
 

modules/store-devtools/schematics-core/jest.config.js

@@ -12,7 +12,10 @@ import {
 describe('Store-Devtools ng-add Schematic', () => {
   const schematicRunner = new SchematicTestRunner(
     '@ngrx/store-devtools',
-    path.join(__dirname, '../collection.json')
+    path.join(
+      process.cwd(),
+      'dist/modules/store-devtools/schematics/collection.json'
+    )
   );
   const defaultOptions: StoreDevtoolsOptions = {
     skipPackageJson: false,

modules/store-devtools/schematics-core/jest.config.ts

@@ -1,10 +1,10 @@
-import { LiftedActions, ComputedState, LiftedAction } from './../src/reducer';
-import { PerformAction, PERFORM_ACTION } from './../src/actions';
+import { ComputedState, LiftedAction, LiftedActions } from './../src/reducer';
+import { PERFORM_ACTION, PerformAction } from './../src/actions';
 import {
-  ReduxDevtoolsExtensionConnection,
-  ReduxDevtoolsExtensionConfig,
-  REDUX_DEVTOOLS_EXTENSION,
   ExtensionActionTypes,
+  REDUX_DEVTOOLS_EXTENSION,
+  ReduxDevtoolsExtensionConfig,
+  ReduxDevtoolsExtensionConnection,
 } from './../src/extension';
 import { Action } from '@ngrx/store';
 
@@ -18,7 +18,7 @@ import {
 import { unliftState } from '../src/utils';
 import { TestBed } from '@angular/core/testing';
 import { DevtoolsDispatcher } from '../src/devtools-dispatcher';
-import { inject } from '@angular/core';
+import { Mock, vi } from 'vitest';
 
 function createOptions(
   name = 'NgRx Store DevTools',
@@ -84,21 +84,19 @@ function createState(
 
 const testSetup = (options: { config: StoreDevtoolsConfig }) => {
   const reduxDevtoolsExtension = {
-    send: jasmine.createSpy('send'),
-    connect: jasmine.createSpy('connect'),
+    send: vi.fn(),
+    connect: vi.fn(),
   };
 
   const extensionConnection = {
-    init: jasmine.createSpy('init'),
-    subscribe: jasmine.createSpy('subscribe'),
-    unsubscribe: jasmine.createSpy('unsubscribe'),
-    send: jasmine.createSpy('send'),
-    error: jasmine.createSpy('error'),
+    init: vi.fn(),
+    subscribe: vi.fn(),
+    unsubscribe: vi.fn(),
+    send: vi.fn(),
+    error: vi.fn(),
   };
 
-  (reduxDevtoolsExtension.connect as jasmine.Spy).and.returnValue(
-    extensionConnection
-  );
+  reduxDevtoolsExtension.connect.mockReturnValue(extensionConnection);
 
   TestBed.configureTestingModule({
     // Provide both the service-to-test and its (spy) dependency
@@ -179,7 +177,7 @@ describe('DevtoolsExtension', () => {
     // Subscription needed or else extension connection will not be established.
     devtoolsExtension.actions$.subscribe(() => null);
     expect(reduxDevtoolsExtension.connect).toHaveBeenCalledWith(
-      jasmine.objectContaining({ serialize: customSerializer })
+      expect.objectContaining({ serialize: customSerializer })
     );
   });
 
@@ -202,7 +200,7 @@ describe('DevtoolsExtension', () => {
         return (unwrappedAction = action);
       });
 
-      const [callback] = extensionConnection.subscribe.calls.mostRecent().args;
+      const [callback] = extensionConnection.subscribe.mock.lastCall;
       callback({ type: ExtensionActionTypes.START });
       callback({ type: ExtensionActionTypes.ACTION, payload });
       expect(unwrappedAction).toEqual({
@@ -541,14 +539,12 @@ describe('DevtoolsExtension', () => {
       const NORMAL_ACTION = 'NORMAL_ACTION';
       const RANDOM_ACTION = 'RANDOM_ACTION';
 
-      const predicate = jasmine
-        .createSpy('predicate', (state: any, action: Action) => {
-          if (action.type === RANDOM_ACTION) {
-            return false;
-          }
-          return true;
-        })
-        .and.callThrough();
+      const predicate = vi.fn((state: any, action: Action) => {
+        if (action.type === RANDOM_ACTION) {
+          return false;
+        }
+        return true;
+      });
 
       let devtoolsExtension: DevtoolsExtension;
       let extensionConnection: ReduxDevtoolsExtensionConnection;
@@ -669,7 +665,7 @@ describe('DevtoolsExtension', () => {
   });
 
   describe('error handling', () => {
-    let consoleSpy: jasmine.Spy;
+    let consoleSpy: Mock;
 
     let devtoolsExtension: DevtoolsExtension;
     let extensionConnection: ReduxDevtoolsExtensionConnection;
@@ -682,11 +678,11 @@ describe('DevtoolsExtension', () => {
         }));
       // Subscription needed or else extension connection will not be established.
       devtoolsExtension.actions$.subscribe();
-      consoleSpy = spyOn(console, 'warn');
+      consoleSpy = vi.spyOn(console, 'warn');
     });
 
     it('for normal action', () => {
-      (extensionConnection.send as jasmine.Spy).and.callFake(() => {
+      (extensionConnection.send as Mock).mockImplementation(() => {
         throw new Error('uh-oh something went wrong');
       });
 
@@ -698,7 +694,7 @@ describe('DevtoolsExtension', () => {
     });
 
     it('for action that requires full state update', () => {
-      (reduxDevtoolsExtension.send as jasmine.Spy).and.callFake(() => {
+      (reduxDevtoolsExtension.send as Mock).mockImplementation(() => {
         throw new Error('uh-oh something went wrong');
       });