If you are using Angular CLI, incorporating this library can greatly simplify your Jest setup.
With this library, you can eliminate the need for boilerplate code associated with Jest configuration and seamlessly run tests using Angular CLI (ng test).
This also streamlines the process of setting up Jest, saving you valuable time.

If you encounter a specific error, it may be linked to your tsconfig.spec.json. Ensure that you have updated the module field to commonjs as Jest requires this adjustment to function properly.

To delve deeper into this topic, refer to this informative article.

Disclaimer: I am the creator of this library.

A few weeks back, I experimented with the techniques outlined in this insightful blog post.

While the process was seamless, I ultimately decided to stick with Jasmine/Karma instead of switching to Jest for a couple of reasons:

• Jest doesn't support running unit tests on multiple real browsers (You can find more details in the discussion on the Jest Repository)
• With Jasmine, I have the flexibility to write end-to-end tests using tools like Protractor or Selenium-Webdriver

After switching to Ionic, I wanted to integrate Ionic 4 and Angular 6 with Jest for testing. I stumbled upon this insightful blog post by Brian Love which guided me through the process successfully. In my case, I customized my Jest configuration in an external file and made some tweaks to suit my needs, resulting in my tests now running smoothly within Angular 6.

module.exports = {
    collectCoverage: true,
    collectCoverageFrom: [
        "src/**/*.ts"
    ],
    coverageDirectory: "<rootDir>/coverage/",
    coveragePathIgnorePatterns: [
        "node_modules",
        "test-config",
        "<rootDir>/src/app/interfaces",
        "jestGlobalMocks.ts",
        ".module.ts",
        "<rootDir>/src/app/main.ts"
    ],
    preset: "jest-preset-angular",
    roots: ['src'],
    setupTestFrameworkScriptFile: "<rootDir>/src/setup-jest.ts",
    transformIgnorePatterns: [
        "node_modules/(?!(@ionic-native|@ionic|angularfire2)/)"
    ]
}

When I embarked on a new Angular project, I decided to integrate Jest for Unit tests. Adapting the configuration from an older project was quite the task as I had to make it compatible with Angular 13 and Jest 27.

Here are the steps I took to configure the setup. While not all of them may be imperative, I wanted to document everything I did for reference:

1. Update the package.json file by adding the following script under scripts:

   "test": "jest  --coverage --config ./jest.config.js"
   

2. Eradicate all karma dependencies from the package.json.

3. Add the following packages to the devDependencies section in package.json (you might find newer versions, but these were the latest at the time of my setup):

   "@babel/core": "~7.16.12",
   "@babel/preset-env": "~7.16.11",
   "@babel/preset-typescript": "~7.16.7",
   "@types/jest": "~27.4.0",
   "babel-jest": "~27.4.6",
   "jest": "~27.4.7",
   "jest-preset-angular": "~11.1.0",
   "ts-jest": "~27.1.3",
   

4. In tsconfig.spec.ts, include the following lines under compilerOptions / types:

   "jest",
   "node"
   

5. Remove the entry for src/test.ts under files in tsconfig.spec.ts.

6. Delete the file src/test.ts.

7. Create a new file named jest.config.js and populate it with the necessary configuration:

   module.exports = {
     globalSetup: 'jest-preset-angular/global-setup',
     cacheDirectory: "<rootDir>/jest/cache",
     clearMocks: true,
     collectCoverage: true,
     coverageDirectory: "<rootDir>/jest/report",
     globals: {
       "ts-jest": {
         tsconfig: "<rootDir>/tsconfig.spec.json",
       }
     },
     moduleFileExtensions: ["ts", "js", "json"],
     preset: "jest-preset-angular",
     setupFilesAfterEnv: ["<rootDir>/setup-jest.ts"],
     "transform": {
       "^.+\\.(ts|js)$": "ts-jest"
     },
     verbose: true
   }
   

8. Add a new file called babel.config.js and populate it with the necessary presets:

   module.exports = {
     presets: [
       ['@babel/preset-env',
         {
           targets: {
             node: 'current'
           }
         }
       ],
       '@babel/preset-typescript',
     ]
   };
   

9. Finally, run npm i to install any missing dependencies and set up your environment (hopefully) flawlessly.

Setting up Jest in place of Jasmine/Karma for Angular 18

1. Removing Jasmine and Karma. Run:

npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine core @types/jasmine 

2. Installing Jest Dependencies.

npm install --save-dev jest@latest @types/jest@latest ts-jest@latest jest-preset-angular@latest

Note: These dependencies are specifically for development purposes only.

3. Creating a configuration file jest.config.js

The file should be placed at the project's root directory.

Content of the file:

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  globalSetup: 'jest-preset-angular/global-setup',
};

4. Creating a test environment file setup-jest.ts

This file must also be located in the project's root directory.

Content of the file:

import 'jest-preset-angular/setup-jest';

5. Updating the package.json file

Edit the "scripts" property by adding commands to execute tests with Jest.

  "scripts": {
      ...
     //Default content generated by Angular project
      ...
    "test":"jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }

This is how it would look (Result):

6. Modifying the tsconfig.spec.json file

Ensure that the file is correctly configured to work with Jest.

Content of the file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
    ],
    "module": "CommonJS"
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

7. Testing if the configuration was successful

Run:

npm run test 

If it's a new project (with default Angular content), it should run without any errors:

To display test coverage percentage, run:

npm run test:coverage 

Result:

To run Jest in watch mode:

npm run test:watch 

Find the repository with the example project

https://github.com/joseOlivares/angular-jest

If you find this helpful,

please endorse my skills on Linkedin

 

For more information about Jest, visit https://jestjs.io/docs/testing-frameworks