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.
Top comments (0)