How to install Jest in Angular 13
Today we will see how to install Jest in an Angular project

Full stack engineer but passionnated by front-end Angular Expert / NX / JavaScript / Node / Redux State management / Rxjs
Search for a command to run...
Today we will see how to install Jest in an Angular project

Full stack engineer but passionnated by front-end Angular Expert / NX / JavaScript / Node / Redux State management / Rxjs
No comments yet. Be the first to comment.
A structured approach to Angular applications with Ngrx Signal Store

The useEffect hook is fundamental to React functional components, but its behaviour changes dramatically based on how you handle the dependencies array. Let's explore the three main patterns and when to use each one. useEffect without dependencies ar...

Git worktree is a Git feature that allows you to check out multiple branches at once in different directories, without cloning the repository again. This powerful capability transforms how developers handle parallel development workflows. The Problem...

When working with Git in collaborative environments, you'll inevitably encounter situations where you need to overwrite remote history. Two commands come into play: git push --force and git push --force-with-lease. Understanding the difference betwee...

Ever needed to create a union type from an array of objects in TypeScript? There's an elegant solution using the [number] index signature notation that can save you from maintaining duplicate type definitions. The Problem Let's say you have an array ...
![TypeScript's [number] Index Signature: Extract Union Types from Arrays](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1752960594694%2Fe2be9492-869f-4169-bb1a-950ee81a3887.png&w=3840&q=75)
When you generate a new Angular project, it comes with some tools for unit testing, Karma and Jasmine
Sometimes you need to replace theses tools with another framework like Jest
Jest is a testing framework developed by Facebook, it is very popular for unit testing in React. It comes with a lot of tools :
Mocking tools
Assertions tools
Code coverage
JSDOM library to allow Jest to run outside a browser, it is very useful to run test on CI
Watch mode to re-run only affected tests ...
We like to use Jest instead of Karma and Jasime because it can run without a browser, and it can run easily on CI. Also Jest is way faster than Karma, it's well documented, you can run only affected tests...
Jest can come with @types/jest package which contains type declaration, useful for type checking for example
jest-preset-angular is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects.
To install jest-preset-angular and dependencies all at once you can use
with npm npm install -D jest jest-preset-angular @types/jest or with yarn yarn add -D jest jest-preset-angular @types/jest
In your project root create a file setup-jest.ts
import 'jest-preset-angular/setup-jest';
and a file jest.config.js
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
globalSetup: 'jest-preset-angular/global-setup',
};
Edit your tsconfig.spec.json like this { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", "module": "CommonJs", "types": ["jest"] }, "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] } Edit your package.json ... "watch": "jest --watch", "test": "jest" ...
You can now run test with npm run test
You can now remova Karma and Jasmine from your project
Delete src/test.js
Delete in angular.json
"test": {
...
}
Run in terminal this command to clean up all dependencies
npm uninstall @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
or
yarn remove @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
Sources :