Jest And Angular, Install

#angular #jest #config #install

A powerful combination, you should install and try it

Hey you know we all desire to work with the best libraries. For months, I only use Jest in my Angular projects. It’s faster, less unexpected behaviors and it offers the snapshot feature which is really a must-have.

Try it yourself, you will see that you will leave Karma/Jasmine for it.

Angular 12.2 / Jest 27.2.0

Step 1: Just install the essential

npm install jest jest-preset-angular --save-dev

Step 2: Create a small setup file

cd src
touch setupJest.ts

Step 3: Add only this as config

// setupJest.ts

import 'jest-preset-angular/setup-jest';

Step 4: Add entry to the package.json

// package.json
{
  ...
  "jest": {     
    "preset": "jest-preset-angular", 
    "setupTestFrameworkScriptFile": "<rootDir>/setupJest.ts"
  }
  ...
}

Step 5: Replace the test(s) script(s)

// package.json
"test": "jest",
"test:watch": "jest --watch",
"test:ci": "jest --runInBand"

Step 6: Uninstall Karma/Jasmine

npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter

Step 7: Test it

npm run test

> XXX@0.0.0 test <my-project-path>
> jest

PASS src/app/app.component.spec.ts
  AppComponent
    √ setup (2 ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.069 s
Ran all test suites.

That’s all, I hope this tutorial will help someone.

Thanks for reading. Feel free to comment.