AngularTestingJest

Angular Unit Testing with Jest Library.

1. Remove all Karma and Jasmine Dependencies

npm uninstall @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter

2. Clean Up Unused Files

delete karma.conf.js and src/test.ts

3. Install Required Jest Packages

npm install -D jest jest-preset-angular @types/jest

4. Configure Jest with Angular

In the project root create a file called setup-jest.ts with the following contents :-

import "jest-preset-angular/setup-jest";

And add the following to the package.json

{
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": ["<rootDir>/setup-jest.ts"],
    "globalSetup": "jest-preset-angular/global-setup"
  }
}

Finally adjust the tsconfig.spec.json to be :-

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "module": "CommonJs",
    "types": ["jest"]
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

5. Add the Test Scripts

In package.json add the following scripts

"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",

6. Run Scripts to test if Jest is properly configured.

Run the command npm test to see if everthing is configured properly. This will run the only test in the application right now the app.component.spec.ts