refactor(component): migrate unit tests to Vitest (#5089)

Author: JulienMichelFr

modules/component/eslint.config.mjs

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

modules/component/jest.config.ts

@@ -9,7 +9,10 @@ import { waitForAsync } from '@angular/core/testing';
 
 describe('Component Migration 15_0_0-beta', () => {
   let appTree: UnitTestTree;
-  const collectionPath = path.join(__dirname, '../migration.json');
+  const collectionPath = path.join(
+    process.cwd(),
+    'dist/modules/component/migrations/migration.json'
+  );
   const pkgName = 'component';
 
   beforeEach(() => {

modules/component/migrations/15_0_0-beta/index.spec.ts

@@ -8,7 +8,10 @@ import { createPackageJson } from '@ngrx/schematics-core/testing/create-package'
 
 describe('Component Migration 16_0_0', () => {
   let appTree: UnitTestTree;
-  const collectionPath = path.join(__dirname, '../migration.json');
+  const collectionPath = path.join(
+    process.cwd(),
+    'dist/modules/component/migrations/migration.json'
+  );
   const pkgName = 'component';
 
   beforeEach(() => {

modules/component/migrations/16_0_0/index.spec.ts

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

modules/component/project.json

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

modules/component/schematics-core/jest.config.js

@@ -46,16 +46,17 @@ describe('fromPotentialObservable', () => {
 
   testNonObservableInput([1, 2, 3], 'array');
 
-  it('should create observable from promise', (done) => {
-    const promise = Promise.resolve(100);
-    const obs$ = fromPotentialObservable(promise);
-
-    // promises cannot be tested with test scheduler
-    obs$.subscribe((value) => {
-      expect(value).toBe(100);
-      done();
-    });
-  });
+  it('should create observable from promise', () =>
+    new Promise<void>((done) => {
+      const promise = Promise.resolve(100);
+      const obs$ = fromPotentialObservable(promise);
+
+      // promises cannot be tested with test scheduler
+      obs$.subscribe((value) => {
+        expect(value).toBe(100);
+        done();
+      });
+    }));
 
   it('should return passed observable', () => {
     const obs1$ = of('ngrx');

modules/component/schematics-core/jest.config.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { combineRenderEventHandlers } from '../../../src/core/render-event/handlers';
 import {
   CompleteRenderEvent,
@@ -11,7 +12,7 @@ describe('combineRenderEventHandlers', () => {
   function testRenderEvent<T>(event: RenderEvent<T>): void {
     describe(`when ${event.type} is emitted`, () => {
       it(`should call ${event.type} handler`, () => {
-        const mockHandler = jest.fn();
+        const mockHandler = vi.fn();
         const handleRenderEvent = combineRenderEventHandlers({
           [event.type]: mockHandler,
         });