[Angular] Set up Jest on angular project 1

3 min readApr 4, 2021

Photo by Battlecreek Coffee Roasters on Unsplash

Jest is well-known test framework, it uses jsdom, which runs tests faster than karma. Let’s implement jest in the project and make test step by step.

Jest setting

Uninstall karma and jasmine

npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core jasmine-spec-reporter

You might have types and more dependencies on jasmine and karma. It’s time to let them go.

Install Jest and jest-preset-angular for preset

npm install jest jest-preset-angular @types/jest --save-dev

jest-preset-angular is preset for angular. It makes easy to implement jest to angular.

Create tsconfig.spec.json

If you tsconfig.json is suitable for testing, you can use it, but it is better to make new environment for it.

{ 
  "compilerOptions": {
    "baseUrl": "./",
    "types": ["jest", "node", "jsdom"],
    "paths": { ... },
    ...
    // these options can be subject to change upon your project
  },
  ...}

Create jest.config.js

create jest.config.js at root directory
ref : https://jestjs.io/docs/configuration

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const config = require('./tsconfig.spec.json');// if your node version or setting does not support importing json
// use fs to read the content and JSON.parse// ts-jest util support mapper function, 
// or you can manually write it.
const paths = pathsToModuleNameMapper(config.compilerOptions.paths, { prefix: '<rootDir>/' })// basic info, and you can add more 
module.exports = {
  preset: 'jest-preset-angular',  //automatically clear mocks between tests
  clearMocks: true, 
  
  // test file name matcher
  testMatch: ["**/__tests__/**/*.[tj]s", "**/*.(test|spec).[tj]s"], 
  
  // test environment setting file 
  setupFilesAfterEnv: ['<rootDir>/jestSetup.ts'],
  
  // test coverage, if your coverage rate it high
  collectCoverage: false,
  
  moduleFileExtensions: ['ts', 'js'],
  
  // for location.href
  testURL: 'http://localhost', 
  
  testPathIgnorePatterns: [
    '<rootDir>/node_modules/',
    '<rootDir>/dist/',
    '<rootDir>/builds/',
  ],  // paths 
  moduleNameMapper: paths,  globals: {
    'ts-jest': {
      'tsconfig': '<rootDir>/tsconfig.spec.json',
      'stringifyContentPathRegex': '\\.html$',
    },
  },
};

Create jest setup file

If your test contains Date and other libraries, it is not easy to make the environment for the testing. So jest supports some implementation for environment setting. it runs before every test file is executed and we need to put jest-preset/angular/setup-jest. (you can name this file any name you want and put it on jest.config.js > setupFilesAfterEnv)

import 'jest-preset-angular/setup-jest';... // also any settings you need before testing

Cleaning files

remove src/test.ts
remove karma.conf.js
remove architect > test code from angular.json

Run

change package.json > scripts > test

test: "jest"// for cli options
// see https://jestjs.io/docs/cli

npm run test

voila! Now the environment is ready. will add more libraries later to ease the testing.

Here’s the change log from karma to jest
https://github.com/selfstudygo/angular-jest-setting/commit/ffa09bf5bfdbf5207031f0fa069524637b7cdcd9

Next time, we will check more settings and mocking and utils.

Thank you for reading 😃