chore: migrate from Jest to Analog/Vitest

Author: ghiscoding

.github/workflows/main.yml

@@ -62,18 +62,18 @@ jobs:
       - name: Run Project Build
         run: yarn build
 
-      - name: Run Jest unit tests
+      - name: Run Vitest unit tests
         if: ${{ !contains(github.event.head_commit.message, format('chore{0} release', ':')) }}
-        run: yarn jest:ci
+        run: yarn test:coverage
 
-      - name: Upload Jest coverage to Codecov
+      - name: Upload Vitest coverage to Codecov
         if: ${{ !contains(github.event.head_commit.message, format('chore{0} release', ':')) }}
         uses: codecov/codecov-action@v4
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          directory: test/jest-coverage
+          directory: coverage
           verbose: true
 
       - name: Website Prod Build (served for Cypress)

.prettierignore

@@ -1,3 +1,4 @@
 *.md
 
+**/coverage/*.*
 **/test/jest-coverage/*.*

.vscode/extensions.json

@@ -1,9 +1,3 @@
 {
-  "recommendations": [
-    "andys8.jest-snippets",
-    "angular.ng-template",
-    "editorconfig.editorconfig",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
-  ]
+  "recommendations": ["angular.ng-template", "editorconfig.editorconfig", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
 }

.vscode/launch.json

@@ -17,22 +17,15 @@
       "webRoot": "${workspaceFolder}"
     },
     {
+      "name": "Vitest - Debug Current Test File",
       "type": "node",
       "request": "launch",
-      "name": "Jest Current Spec File",
-      "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "args": [
-        "--runInBand",
-        "${fileBasename}",
-        "--config",
-        "${workspaceFolder}/test/jest.config.ts"
-      ],
-      "console": "internalConsole",
-      "internalConsoleOptions": "neverOpen",
-      "disableOptimisticBPs": true,
-      "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-      }
+      "autoAttachChildProcesses": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+      "args": ["run", "${relativeFile}", "--no-watch", "--config", "./vite.config.mts"],
+      "smartStep": true,
+      "console": "integratedTerminal"
     }
   ]
 }

.vscode/tasks.json

@@ -32,15 +32,15 @@
       "problemMatcher": []
     },
     {
-      "label": "Run Jest Tests with Coverage",
+      "label": "Run Vitest with Coverage",
       "type": "shell",
-      "command": "yarn jest:coverage",
+      "command": "yarn test:coverage",
       "problemMatcher": []
     },
     {
-      "label": "Run Jest Watch",
+      "label": "Run Vitest Watch",
       "type": "shell",
-      "command": "yarn jest:watch",
+      "command": "yarn test:watch",
       "problemMatcher": []
     },
     {
@@ -50,4 +50,4 @@
       "problemMatcher": []
     }
   ]
-}
+}

README.md

@@ -7,7 +7,7 @@
 
 [![Actions Status](https://github.com/ghiscoding/Angular-Slickgrid/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/Angular-Slickgrid/actions)
 [![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg?logo=cypress)](https://www.cypress.io/)
-[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
+[![Vitest](https://img.shields.io/badge/tested%20with-vitest-fcc72b.svg?logo=vitest)](https://vitest.dev/)
 [![codecov](https://codecov.io/gh/ghiscoding/Angular-Slickgrid/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/Angular-Slickgrid)
 
 
@@ -139,7 +139,7 @@ Angular-Slickgrid uses `ngx-translate` library to support Locales, it is also re
 |  8-9            |        12.x         |
 |  7              |        11.x         |
 
-### Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
+### Tested with [Vitest](https://vitest.dev/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
 Slickgrid-Universal has **100%** Unit Test Coverage and all Angular-Slickgrid Examples are tested with [Cypress](https://www.cypress.io/) as E2E tests.
 
 ## Troubleshooting Section

angular.json

@@ -14,14 +14,9 @@
             "outputPath": "website",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "allowedCommonJsDependencies": [
-              "@fnando/sparkline",
-              "stream"
-            ],
+            "allowedCommonJsDependencies": ["@fnando/sparkline", "stream"],
             "assets": [
               "src/assets",
               "src/favicon.ico",
@@ -46,13 +41,8 @@
                 "output": "/assets/i18n"
               }
             ],
-            "styles": [
-              "node_modules/@ng-select/ng-select/themes/default.theme.css",
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
-            ],
+            "styles": ["node_modules/@ng-select/ng-select/themes/default.theme.css", "src/styles.scss"],
+            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
@@ -114,11 +104,11 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
+        },
+        "test": {
+          "builder": "@analogjs/vitest-angular:test"
         }
       }
     }
@@ -134,9 +124,7 @@
   },
   "cli": {
     "packageManager": "yarn",
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ],
+    "schematicCollections": ["@angular-eslint/schematics"],
     "analytics": false
   }
-}
+}

eslint.config.mjs

@@ -6,10 +6,7 @@ import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   {
-    ignores: [
-      '.angular/*',
-      'test/jest-coverage/',
-    ],
+    ignores: ['.angular/*', 'coverage/', 'test/jest-coverage/'],
   },
   {
     extends: [
@@ -21,7 +18,7 @@ export default tseslint.config(
     ],
     plugins: {
       cypress,
-      n
+      n,
     },
     // Everything in this config object targets our TypeScript files (Components, Directives, Pipes etc)
     files: ['**/*.ts'],
@@ -35,7 +32,10 @@ export default tseslint.config(
       '@typescript-eslint/ban-ts-comment': 'off',
       '@typescript-eslint/no-empty-function': 'off',
       '@typescript-eslint/no-unused-expressions': 'off',
-      '@typescript-eslint/no-unused-vars': ['error', { 'argsIgnorePattern': '^_', 'destructuredArrayIgnorePattern': '^_', caughtErrors: 'none' }],
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_', caughtErrors: 'none' },
+      ],
       '@typescript-eslint/no-explicit-any': 'off',
       'no-case-declarations': 'off',
     },
@@ -54,5 +54,5 @@ export default tseslint.config(
       '@angular-eslint/template/click-events-have-key-events': 'off',
       '@angular-eslint/template/interactive-supports-focus': 'off',
     },
-  },
-);
+  }
+);

global.d.ts

@@ -26,17 +26,16 @@
     "cypress:ci": "cypress run --config-file test/cypress.config.ts",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "jest:ci": "jest --runInBand --coverage=true --ci --config ./test/jest.config.ts",
-    "jest:clear": "jest --clearCache",
-    "jest:watch": "jest --config test/jest.config.ts --watch",
-    "jest:coverage": "jest --config test/jest.config.ts --runInBand --coverage",
     "build:demo": "ng build --configuration=production --base-href=\"\"",
     "pack-lib": "npm pack ./dist",
     "preview:release": "release-it --only-version --dry-run",
     "prettier:check": "prettier --check **/*.{html,js,ts}",
     "prettier:write": "prettier --write **/*.{html,js,ts}",
     "release": "release-it --only-version",
-    "serve:demo": "servor ./website index.html 4300"
+    "serve:demo": "servor ./website index.html 4300",
+    "test": "ng test",
+    "test:watch": "ng test --watch",
+    "test:coverage": "vitest --no-watch --coverage"
   },
   "repository": {
     "type": "git",
@@ -68,13 +67,17 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.3.0",
+    "@analogjs/platform": "^1.14.0",
+    "@analogjs/vite-plugin-angular": "^1.14.0",
+    "@analogjs/vitest-angular": "^1.14.0",
     "@angular-devkit/build-angular": "^18.2.14",
     "@angular-eslint/builder": "^18.4.3",
     "@angular-eslint/eslint-plugin": "^18.4.3",
     "@angular-eslint/eslint-plugin-template": "^18.4.3",
     "@angular-eslint/schematics": "^18.4.3",
     "@angular-eslint/template-parser": "^18.4.3",
     "@angular/animations": "^18.2.13",
+    "@angular/build": "18",
     "@angular/cli": "^18.2.14",
     "@angular/common": "^18.2.13",
     "@angular/compiler": "^18.2.13",
@@ -90,6 +93,9 @@
     "@formkit/tempo": "^0.1.2",
     "@ng-select/ng-select": "^13.9.1",
     "@ngx-translate/http-loader": "^8.0.0",
+    "@nx/angular": "^20.5.0",
+    "@nx/devkit": "^20.5.0",
+    "@nx/vite": "^20.5.0",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.0",
     "@slickgrid-universal/composite-editor-component": "~5.13.0",
@@ -99,9 +105,9 @@
     "@slickgrid-universal/odata": "~5.13.0",
     "@slickgrid-universal/text-export": "~5.13.0",
     "@types/fnando__sparkline": "^0.3.7",
-    "@types/jest": "^29.5.14",
     "@types/node": "^22.13.8",
     "@types/sortablejs": "^1.15.8",
+    "@vitest/coverage-v8": "^3.0.8",
     "angular-eslint": "^18.4.3",
     "bootstrap": "^5.3.3",
     "custom-event-polyfill": "^1.0.7",
@@ -111,9 +117,7 @@
     "eslint": "^9.21.0",
     "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-n": "^17.15.1",
-    "jest": "^29.7.0",
-    "jest-extended": "^4.0.2",
-    "jest-preset-angular": "^14.5.3",
+    "jsdom": "^22.0.0",
     "native-copyfiles": "^0.3.2",
     "ng-packagr": "^18.2.1",
     "ngx-bootstrap": "^18.1.3",
@@ -130,6 +134,9 @@
     "tslib": "^2.8.1",
     "typescript": "~5.5.4",
     "typescript-eslint": "^8.25.0",
+    "vite": "^6.2.1",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^3.0.8",
     "zone.js": "~0.15.0"
   },
   "engines": {

package.json

@@ -1,5 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { AppComponent } from './app.component';