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:
- 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