Are you tired of the complexities of using Jasmine and Karma for testing in Angular 14? Say goodbye to the old and embrace the new by integrating Jest into your Angular projects.
Jest provides a more straightforward and efficient testing experience. In this guide, we'll walk through the steps to seamlessly integrate Jest into your Angular 14 application.
Step 1: Uninstall Jasmine & Karma
Let's start by removing the old testing dependencies. Run the following command to uninstall Jasmine and Karma:
npm uninstall -D @types/jasmine jasmine jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter ts-node
Step 2: Install Jest
npm i -D @types/jest jest jest-preset-angular @angular-builders/jest
Now, install Jest along with necessary dependencies:
npm i -D @types/jest jest jest-preset-angular @angular-builders/jest
Step 3: Create setupJest.ts
In the root of your project, create a file named setupJest.ts and add the following content:
// setupJest.ts
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import 'jest-preset-angular';
import 'zone.js';
import 'zone.js/testing';
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
{
teardown: { destroyAfterEach: true },
}
);
Object.defineProperty(window, 'CSS', { value: null });
Object.defineProperty(window, 'getComputedStyle', {
value: () => {
return {
display: 'none',
appearance: ['-webkit-appearance']
};
}
});
Object.defineProperty(document, 'doctype', {
value: '<!DOCTYPE html>'
});
Object.defineProperty(document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true
};
}
});
This file initializes Jest with Angular-specific configurations.
Step 4: Create jest.config.js
Create a jest.config.js file in the root and add the following content:
// jest.config.js
module.exports = {
preset: 'jest-preset-angular',
roots: ['<rootDir>/src'],
testMatch: ['**/+(*.)+(spec).+(ts)'],
collectCoverage: true,
coverageReporters: ['html', 'lcov', 'json', 'text'],
coverageDirectory: '<rootDir>/coverage',
moduleFileExtensions: ['ts', 'html', 'js', 'json'],
};
This configuration file sets up Jest for your Angular project.
Step 5: Update angular.json
Replace the "test" part of your angular.json file with the following content:
// angular.json
"test": {
"builder": "@angular-builders/jest:run",
"options": {
"main": ["setupJest.ts"],
"tsConfig": "src/tsconfig.spec.json",
"no-cache": true
}
}
This change ensures that Jest is used for running tests.
Step 6: Update tsconfig.json
Add "esModuleInterop": true to the compilerOptions in your tsconfig.json file.
Step 7: Update tsconfig.spec.json
Open tsconfig.spec.json and replace "jasmine" with "jest" in the types field.
Step 8: You're Done!
Congratulations! Jest is now seamlessly integrated with the latest Angular version. Your testing experience is set to be more enjoyable and efficient. Happy coding! 🚀
Top comments (0)