Angular & Jest & VS Code

Would you like to setup Jest in your Angular project and VS code?

Great, you have come to the right place !

Prerequisites

• Angular ≥ 6.x
• Node ≥ 8.x
• VS code ≥ 1.28.x

Context:

I have an Angular repository containing two applications and a library.

Ng-jest-vscode-demo
 │
 ├──/src                           * main application
 │   
 ├──/projects                      * root of projects
 |   ├──/client-app                * application folder
 │   └──/shared-lib                * library folder
 │
 ├──tslint.json                    * lint config
 ├──tsconfig.json                  * typescript config
 ├──angular.json                   * angular cli config 
 └──package.json                   * npm packages

Goal: Setup jest in my client-app while keeping main app and shared library on karma/jasmine.

Steps:

1. Install @angular-builders/jest and jest

npm install -D @angular-builders/jest jest

2. Remove test.ts and karma.conf.js files from client-app project

rm projects/client-app/karma.conf.js
rm projects/client-app/src/test.ts

3. Update your projects/client-app/tsconfig.spec.json to use commonjs and jest

"compilerOptions": {
 ...
 "module": "commonjs",
 "types": ["jest"]
}

4. Avoid conflict in IDE by updating tsconfig.json to use jasmine types

"compilerOptions": {
	...
	"types": ["jasmine"]
}

4. In angular.json, change @angular-devkit/build-angular:karma to @angular-builders/jest:run and clear all existing options

"projects": {
    ...
    "app-two": {
         ...
         "architect": {
                ...
                "test": {
                          "builder": "@angular-builders/jest:run"
                          "options": {
                                ... //remove existing options
                          }

5. Create a new file in projects/client-app/jest.config.js

module.exports = {
  roots: ["<rootDir>/projects/client-app/src"],
  setupFiles: ["<rootDir>/projects/client-app/jest.helpers.js"],
  modulePaths: ["<rootDir>/dist"],
  moduleNameMapper: {
    "@client-app/(.*)": "<rootDir>/projects/client-app/src/$1"
  },
  testMatch: ["**/client-app/**/*.spec.ts"]
};

6. Add another new file to projects/client-app/jest.helpers.js for mocks

touch projects\client-app\jest.helpers.js

PS: Check everything is working by using ng test client-app

5. Install Jest extension to vscode via the market place

6. Update vscode settings.json to make use of angular cli

"jest.pathToJest": "ng test client-app"

Restart Jest using vs code commands

Jest: Stop Runner
Jest: Start Runner

To check if everything is ok:

• Update a test to make it fail and await Jest’s warning

7. You should see Debug code lens above the failing test. To make it work, add a custom launch task to vs code launch.json

{
 "type": "node",
 "request": "launch",
 "name": "vscode-jest-tests",
 "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
 "args": ["test", "client-app"],
 "console": "integratedTerminal",
 "internalConsoleOptions": "neverOpen"
 }

8. If breakpoints are not working, add the following option to angular.json

"test": {
   "builder": "@angular-builders/jest:run",
   "options": {
     "runInBand": true
   }
 }

9. You will have something like this

10. Add coverage reports
Coming soon !

PS: This article is based on the excellent work of Evgeny Barabanov