How to Install Jest and Angular Testing Library

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.

1. Uninstall karma and jasmine

1. npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter karma-coverage
2. npm uninstall jasmine-core jasmine-spec-reporter @types/jasmine
3. Check that there is no other karma/jasmine library in package.json
4. Delete the karma.conf.js file
5. Delete the src/test.ts file
6. Remove references to these files in tsconfig.spec.json
   Copy Code Copied Use a different Browser

   
   {
   
   “extends”: “./tsconfig.json”,
   
   “compilerOptions”: {
   
   …,
   
   “types”: [
   
   “jasmine” ← Remove this line
   
   …
   
   ]
   },
   
   “files”: [
   
   “src/test.ts” <- Remove this line
   
   …
   
   ]
   }

2. 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.

1. npm install -D [email protected]
2. npm install -D [email protected]
3. npm install -D @types/jest
4. npm install -D [email protected]
5. npm install -D @angular-builders/[email protected]

3. Configure Jest

1. Create jest.config.js file in the project root, add this content:
   Copy Code Copied Use a different Browser

   “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.
2. (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)
   Copy Code Copied Use a different Browser

   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.
3. Add jest types in tsconfig.spec.json
   {
   “extends”: “./tsconfig.json”,
   “compilerOptions”: {
   …,
   “types”: [
   …,
   “jest” <- Add this line
   ] }
   }[/dm_code_snippet]
4. Add options in tsconfig.json
   Copy Code Copied Use a different Browser

   {
   
   …,
   
   “compilerOptions”: {
   
   …,
   
   “esModuleInterop”: true, <- Add this line
   
   “emitDecoratorMetadata”: true <- Add this line
   
   }
   
   }

5. Update tests configuration in angular.json, remove the whole object in “test” and add this:
   Copy Code Copied Use a different Browser

   “test”: {
   
   “builder”: “@angular-builders/jest:run”
   
   },

6. Update script to run tests in package.json, remove old “test” script and add this:
   Copy Code Copied Use a different Browser

   “test”: “jest –config ./jest.config.js”

4. Install Angular Testing Library

This version seems to work fine with Angular 14.

1. npm install -D @testing-library/[email protected]
2. npm install -D @testing-library/user-event
3. 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’;

5. 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! 🚀