wtho / jest-angular-example

A simple Angular Jest example

AngularJest

This project was generated with Angular CLI version 7.3.6.

Setup

To create the project, the following commands were used:

ng new angular-jest
cd angular-jest
npm remove @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter protractor
npm install -D jest jest-preset-angular @types/jest
rm -r e2e
rm src/test.ts src/karma.conf.js

and the following files have to be created:

jest.config.js

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/setupJest.ts']
}

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "esModuleInterop": true,
    "types": [
      "jest",
      "node"
    ]
  },
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

src/setupJest.ts

import 'jest-preset-angular';
import './jestGlobalMocks';

src/jestGlobalMocks.ts

Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return 
      enumerable: true,
      configurable: true,
    };
  },
});

Finally modify the scriptspackage.json to create a new job:

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "lint": "ng lint",
    "test": "jest"
  }
}

Now the jest can be run using npm test.