Angular and Jest

The Angular CLI ships with Jasmine and Karma to run unit tests. However, out of the box, the unit tests are a bit slow for my tastes. Using Jest for our unit tests speeds things up and only runs the tests when the component has been changed.

Setup Jest

When you create a new Angular CLI project, a few things need to be configured in order to get the unit tests up and running with Jest. First, you will need to add/remove the following packages to your project:

yarn remove @types/jasmine --dev
yarn remove @types/jasminewd2 --dev
yarn add @types/jest jest jest-preset-angular --dev

Create a file called setup-jest.ts in the src directory. The only code necessary will be the import 'jest-preset-angular';, however, the code following the import helps solve a few issues due to using jsdom.

import 'jest-preset-angular'

const mock = () => {
  let storage = {}
  return {
    getItem: (key) => (key in storage ? storage[key] : null),
    setItem: (key, value) => (storage[key] = value || ''),
    removeItem: (key) => delete storage[key],
    clear: () => (storage = {}),
  }
}

Object.defineProperty(window, 'localStorage', { value: mock() })
Object.defineProperty(window, 'sessionStorage', { value: mock() })
Object.defineProperty(window, 'getComputedStyle', {
  value: () => ['-webkit-appearance'],
})
// Used to fix the ReferenceError: CSS is not defined ERROR
Object.defineProperty(window, 'CSS', { value: mock() })
// Suppresses console warning from Angular Material
console.warn = () => {
  return
}

Object.defineProperty(window, 'SVGElement', { value: Element })
/**
 * ISSUE: https://github.com/angular/material2/issues/7101
 * Workaround for JSDOM missing transform property
 */
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    }
  },
})

/**
 * Fixes Material Snackbar window binding
 */
Object.defineProperty(window, 'matchMedia', {
  value: () => {
    return window.matchMedia.bind(window)
  },
})

Update the `package.json`

Add the following to the specified JSON objects.

{
  ...
  "scripts": {
    ...
    "test": "jest --watch",
    "test:ci": "jest --runInBand --coverage"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setup-jest.ts",
    "globals": {
      "ts-jest": {
        "tsConfigFile": "src/tsconfig.spec.json"
      },
      "__TRANSFORM_HTML__": true
    },
    "transform": {
      "^.+\\.(ts|js|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js"
    },
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      ".html$",
      "setup-jest.ts",
      "/index.ts"
    ]
  },
  ...
}

Cleanup Jasmin/Karma

It is now safe to cleanup the Jasmine and Karma setup files. To do this, you should delete the src/karma.conf.js and src/test.ts files. You will also need to delete the following lines from the angular.json file:

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.spec.json",
    "karmaConfig": "src/karma.conf.js",
    "styles": ["src/styles.scss"],
    "scripts": [],
    "assets": ["src/favicon.ico", "src/assets"]
  }
}

With Angular 6, the defaults in the tsconfig.json and tsconfig.spec.json have been changed so Jest will throw an error. You can find the fix in the jest-preset-angular documentation.

Setup Jest

Update the package.json

Cleanup Jasmin/Karma

Update the `package.json`