chore: replace karma with jest

angular.json

@@ -75,22 +75,6 @@
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": [],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": ["src/styles.scss"],
-            "scripts": []
-          }
         }
       }
     }

jest.config.ts

@@ -0,0 +1,22 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+import type { Config } from 'jest';
+
+const config: Config = {
+  moduleDirectories: ['node_modules', '<rootDir>'],
+  transformIgnorePatterns: ['node_modules/(?!@angular|rxjs|@ngrx)'],
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  coverageProvider: 'v8',
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '^src/(.*)$': '<rootDir>/src/$1',
+  },
+};
+
+export default config;

package.json

@@ -6,7 +6,9 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test",
+    "test": "jest --verbose",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch",
     "format": "prettier --write .",
     "ci:format": "prettier --check .",
     "lint": "eslint .",
@@ -30,11 +32,15 @@
     "@ngrx/router-store": "^18.0.1",
     "@ngrx/store": "^18.0.2",
     "@ngrx/store-devtools": "^18.0.1",
+    "@types/jest": "^29.5.12",
     "eslint-plugin-unused-imports": "^4.1.3",
     "express": "^4.18.2",
+    "jest": "^29.7.0",
+    "jest-preset-angular": "^14.2.2",
     "modern-normalize": "^3.0.0",
     "primeng": "^17.18.8",
     "rxjs": "^7.8.1",
+    "ts-node": "^10.9.2",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
@@ -51,7 +57,6 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/express": "^4.17.17",
     "@types/inquirer": "^9.0.7",
-    "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",
@@ -65,12 +70,7 @@
     "eslint-plugin-import": "^2.29.1",
     "husky": "^9.1.4",
     "inquirer": "^8.2.6",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
     "lint-staged": "^15.2.9",
     "normalize-scss": "^8.0.0",
     "prettier": "^3.3.3",

setup-jest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

src/app/app.component.spec.ts

@@ -14,11 +14,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, pet-shop!');
-  });
 });

tsconfig.spec.json

@@ -2,7 +2,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": ["jasmine"]
+    "types": ["jest"],
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true
   },
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }