Jest Platform

For this course we'll be using Jest for writing and running our tests.

  • Jest is an open source testing platform created and maintained by Facebook.
  • Jest uses jsdom to mock the DOM (and therefore doesn't require a browser).
  • Jest runs tests in parallel.
  • The Jest CLI allows you to watch, run previously failed tests, and perform snapshot testing.

Jest is really fast!


Install Jest via:

npm install jest @types/jest -D
yarn add jest @types/jest -D

Jest Configuration

Jest is configured in the package.json file. There is also a jest-global-mocks.ts file that we can use to mock global variables and functions when executing our tests (remember, it doesn't use a browser).

Open package.json and add a new jest configuration:

  "jest": {
    "collectCoverageFrom": [
    "coverageReporters": [
    "modulePathIgnorePatterns": [
    "moduleNameMapper": {
      "^@app/(.*)": "<rootDir>/src/app/$1",
      "^@env/(.*)": "<rootDir>/src/environments/$1"
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/setup-jest.ts",
    "testMatch": [
    "testURL": "http://localhost"

Create the setup-jest.ts file:

import 'jest-preset-angular';
import './jest-global-mocks';

Create the jest-global-mocks.ts file:

global['CSS'] = null;

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(document, 'doctype', {
  value: '<!DOCTYPE html>'
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance'],
      getPropertyValue: prop => {
        return '';
Object.defineProperty(, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true

Object.defineProperty(window, 'matchMedia', {
  value: () => ({
    matches: false,
    addListener: function() {},
    removeListener: function() {}


Jest has a jasmine-like API. This means that if you're comfortable writing unit tests using Jasmine, then you'll easily be able to pick up Jest.

There are a few common exceptions:

  • Use jest.fn() to create spies instead of createSpy().
  • Use mockReturnValue() instead of and.returnValue().
  • Use jest.spyOn() instead of jasmine.createSpy().

Execute Jest

Execute the test script to run Jest:

npm test
yarn test

You can also use a watch mode via:

npm run test:watch
yarn test:watch

When in watch mode you can:

  • Press a to run all tests.
  • Press f to run only failed tests.
  • Press p to filter by a filename regex pattern.
  • Press t to filter by a test name regex pattern.
  • Press q to quit watch mode.
  • Press Enter to trigger a test run.


Site © by LiveLoveApp, LLC

We Can Help!

Need help with your Angular and NgRx project?

Hire Us