DEV Community

Gaëtan Redin
Gaëtan Redin

Posted on • Originally published at Medium on

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
Enter fullscreen mode Exit fullscreen mode

Step 2: Create a small setup file 

cd src touch setupJest.ts
Enter fullscreen mode Exit fullscreen mode

Step 3: Add only this as config 

// setupJest.ts import 'jest-preset-angular/setup-jest';
Enter fullscreen mode Exit fullscreen mode

Step 4: Add entry to the package.json 

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

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

// package.json "test": "jest", "test:watch": "jest --watch", "test:ci": "jest --runInBand"
Enter fullscreen mode Exit fullscreen mode

Step 6: Uninstall Karma/Jasmine 

npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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

Thanks for reading. Feel free to comment.

Learn More

Angular for everyone: All about it

Top comments (0)