Testing is a crucial aspect of software development, and Angular projects are no exception. In this article, we’ll guide you through the process of installing and configuring these tools, enabling you to write clean, maintainable tests with ease.
-
Uninstall karma and jasmine
- npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter karma-coverage
- npm uninstall jasmine-core jasmine-spec-reporter @types/jasmine
- Check that there is no other karma/jasmine library in package.json
- Delete the karma.conf.js file
- Delete the src/test.ts file
- Remove references to these files in tsconfig.spec.json
{ “extends”: “./tsconfig.json”, “compilerOptions”: { …, “types”: [ “jasmine” ← Remove this line … ] }, “files”: [ “src/test.ts” <- Remove this line … ] }
-
Install Jest
Note: Ensure that the versions of these packages are compatible with your Angular version. The versions mentioned here are known to work well with Angular 14.
- npm install -D [email protected]
- npm install -D [email protected]
- npm install -D @types/jest
- npm install -D [email protected]
- npm install -D @angular-builders/[email protected]
-
Configure Jest
- Create jest.config.js file in the project root, add this content:
“use strict”; module.exports = { preset: “jest-preset-angular”, roots: [‘/src/’], setupFilesAfterEnv: [ ‘./setup-jest.ts’ ], globalSetup: ‘jest-preset-angular/global-setup’, moduleDirectories: [“node_modules”, “src”], modulePaths: [“”], transform: { ‘^.+\\.(ts|js|html)$’: ‘jest-preset-angular’, } };For more information about Jest configuration options, refer to the Jest documentation. - (Optional) Create setup-jest.ts in the project root, for example indicating which levels of logs we want to be printed on the console when executing the tests.If you don’t want to add this file, you will need to remove the reference in jest.config.js file (previous step)
import ‘jest-preset-angular/setup-jest.mjs’; import ‘@testing-library/jest-dom/extend-expect’; import ‘@testing-library/jest-dom’;global.console = { …console, // log: jest.fn(), debug: jest.fn(), info: jest.fn(), warn: jest.fn(), // error: jest.fn(), };If you get errors with the global object, do you need to run npm install -D @types/node and add “node” in tsconfig.spec.ts types. - Add jest types in tsconfig.spec.json
{ “extends”: “./tsconfig.json”, “compilerOptions”: { …, “types”: [ …, “jest” <- Add this line ] } } - Add options in tsconfig.json
{ …, “compilerOptions”: { …, “esModuleInterop”: true, <- Add this line “emitDecoratorMetadata”: true <- Add this line } } - Update tests configuration in angular.json, remove the whole object in “test” and add this:
“test”: { “builder”: “@angular-builders/jest:run” }, - Update script to run tests in package.json, remove old “test” script and add this:
“test”: “jest –config ./jest.config.js”
-
Install Angular Testing Library
- npm install -D @testing-library/[email protected]
- npm install -D @testing-library/user-event
- npm install -D @testing-library/jest-dom
Note: In each test file, add the following import to be able to use some matchers like toBeInTheDocument(), toHaveValue() and others that aren’t imported automatically.
import ‘@testing-library/jest-dom’;
-
Migrating tests to Jest
If you already have tests created using another framework, you can migrate them to Jest using the Jest migration guide. This guide provides step-by-step instructions for migrating tests to Jest.
With these steps, you should have Jest and Angular Testing Library successfully installed and configured in your Angular projects. Happy testing! 🚀
