The new Angular Logo

With the recent updates in Angular 17, developers have an exciting opportunity to experiment with Jest, a feature that initially made its debut in Angular 16. This blog aims to guide you through the process of utilizing Jest within your Angular projects, emphasizing its experimental nature and the straightforward setup involved. As Angular continues to evolve, incorporating tools like Jest demonstrates its adaptability to the changing needs of web development. Although this integration is still experimental, it presents a promising avenue for developers looking to enhance their testing strategies with Jest’s efficient and user-friendly approach. In the following sections, we’ll delve into the practical steps and considerations for integrating Jest into your Angular 17 projects, helping you to take full advantage of this emerging capability.

Please keep in mind that Jest support in Angular 16 and 17 is still experimental — as you will see in the output when running the tests.

Enabling support for Jest

We can enable support for Jest in Angular in three simple steps.

Step 1: Install Jest (and dependencies)

First, we need to install jest and jest-environment-jsdom to our Development Dependencies.

Run:

npm i -D jest jest-environment-jsdom

Step 1: Updating the Angular configuration

First, we need to update the Angular configuration. Add a new section in the projects -> <your project> -> architecture part of the `angular.json`` file.

{
  "projects": {
    "my-project": {
      // other configs...

      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:jest",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": ["zone.js", "zone.js/testing"]
          }
        }
      }

      // other configs...
    }
  }
}

Step 2: Update your tsconfig.spec.json

Your project probably already has a tsconfig.spec.json which was initialized for Jasmine and should look something like this:

/* Original tsconfig.spec.json */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jasmine"]
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

We need to now change the types to jest and remove the src/test.ts file from the files field, resulting in this file:

/* New tsconfig.spec.json */
{
"extends":  "./tsconfig.json",
"compilerOptions":  {
"outDir":  "./out-tsc/spec",
"types":  ["jest"]  /* Change Jasmine to Jest */
},
"files":  ["src/polyfills.ts"],  /* Remove the "src/test.ts" file */
"include":  ["src/**/*.spec.ts",  "src/**/*.d.ts"]
}

If you had a src/test.ts file, it is not necessary anymore.

Creating tests

When creating a new component using the Angular CLI, the tests should already be bootstrapped for the component in the respective spec.ts file.

Example

Running the command ng generate component MyComponent should result in the creation of the folder my-component and the respective files, including my-component.component.spec.ts . This my-component.component.spec.ts file contains the tests and will be automatically recognized later when running the tests.

Run the tests

If you bootstrapped your Angular project using the Angular CLI, you should already be set up to run your tests.

To run the tests, use npm run test or ng test . This command will find all files following the pattern *.spec.ts and run the tests.