Changed from karma to jest for unit tests

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript'
+]}

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "serve": "ionic serve",
     "build": "ng build",
-    "test": "ng test --watch false --browsers ChromeHeadless",
+    "test": "jest",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
@@ -15,8 +15,15 @@
     "roots": [
       "src"
     ],
+    "transform": {
+      "^.+\\.ts?$": "ts-jest",
+      "^.+\\.(js|jsx)$": "babel-jest"
+    },
     "transformIgnorePatterns": [
       "node_modules/(?!@ngrx|@ionic-native|@ionic)"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/setupJest.ts"
     ]
   },
   "private": true,
@@ -61,20 +68,20 @@
     "@angular/compiler": "^7.2.16",
     "@angular/compiler-cli": "^7.2.16",
     "@angular/language-service": "^7.2.16",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-typescript": "^7.18.6",
     "@ionic/angular-toolkit": "^1.5.1",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "^2.0.8",
+    "@types/jest": "^24.9.1",
     "@types/node": "^10.17.13",
     "codelyzer": "~4.5.0",
     "cordova": "^9.0.0",
     "ionic": "^5.4.16",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^4.4.1",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "^2.1.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "jest": "^24.9.0",
+    "jest-preset-angular": "^7.1.1",
     "protractor": "^5.4.4",
     "sass": "^1.54.0",
     "ts-node": "^8.6.2",

setupJest.ts

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

src/app/app.component.spec.ts

@@ -1,42 +1,39 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 
 import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 import { AppComponent } from './app.component';
-import { stringify } from '@angular/core/src/render3/util';
+
+import "jest";
+
+jest.mock('@ionic/angular');
+jest.mock('@ionic-native/splash-screen/ngx');
+jest.mock('@ionic-native/status-bar/ngx');
 
 describe('AppComponent', () => {
 
   let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
 
-  let fixture;
   let app: AppComponent;
 
-  beforeEach(async(() => {
-    statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
-    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
-    platformReadySpy = Promise.resolve();
-    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
-
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [AppComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       providers: [
-        { provide: StatusBar, useValue: statusBarSpy },
-        { provide: SplashScreen, useValue: splashScreenSpy },
-        { provide: Platform, useValue: platformSpy },
+        StatusBar,
+        SplashScreen,
+        Platform,
       ],
     }).compileComponents();
+  });
 
-    fixture = TestBed.createComponent(AppComponent);
+  beforeEach(() => {
+    const fixture = TestBed.createComponent(AppComponent);
     app = fixture.debugElement.componentInstance;
-  }));
-
-  it('should create the app', () => {
-    expect(app).toBeTruthy();
   });
 
   it('should initialize the app', async () => {

src/app/usage-selector/usage-selector.component.spec.ts

@@ -4,20 +4,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { UsageSelectorComponent } from './usage-selector.component';
 import { CriteriaUsageState } from '../criteria-usage-state.enum';
 
+import { TranslatePipe } from '@ngx-translate/core';
+
+import "jest";
+
+jest.mock('@ngx-translate/core');
+
 describe('UsageSelectorComponent', () => {
   let component: UsageSelectorComponent;
-  let fixture: ComponentFixture<UsageSelectorComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ UsageSelectorComponent ],
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UsageSelectorComponent, TranslatePipe ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })
     .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(UsageSelectorComponent);
+    const fixture = TestBed.createComponent(UsageSelectorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

tsconfig.json

@@ -16,6 +16,9 @@
     "lib": [
       "es2018",
       "dom"
+    ],
+    "types": [
+      "jest"
     ]
   }
 }