angulartypescriptjestjsangular-builder

How to use jest.mock after @types/jest is removed (^jest@24)


I recently updated the @angular-builders/jest from 7 to 8. In the migration guide it states that I should remove @types/jest because it's now comes with Jest v24. (I also updated my tsconfig)

So far so good.

But now my tests fail with

error TS2304: Cannot find name 'jest'.

jest.mock('src/app/omitted');

error TS2304: Cannot find name 'jest'.

jest.clearAllMocks();

And VS Code will have nothing to do with jest global variable. Which sort of make sense as I removed typeRoots from my tsconfig as I should according to the migration guide.

In tsconfig.json (root directory, used by IDE):

Remove typeRoots array

Again, since Jest typings are packaged inside jest package and are not located under node_modules/@types you don't want the type roots to be limited to a specific folder.

But what gives? The migration guide says I should remove @types/jest but how do I make it play nice with jest.mock and jest.clearAllMocks again?

I tried:

import { mock } from 'jest'; // mock isn't found
import * as jest from 'jest'; // jest.mock isn't found

Please advice.

Here are my configs (same as the simple-app example)

relevant dev packages

{
    "@angular-builders/jest": "^8.0.3",
    "jest": "^24.8.0",
    "jest-preset-angular": "^7.1.1",
    "ts-jest": "^24.0.2",
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "lib": ["es2018", "dom"],
    "strict": true                // note strict mode
  }
}

tsconfig.spec.json

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

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-project": {
      //...
      "architect": {
        //...
        "test": {
          "builder": "@angular-builders/jest:run",
          "options": {}
        }
      }
    }
  }
}

Solution

  • @types/jest is apparently still needed. The migration guide have been adjusted to reflect this.

    The configs look like this now:

    package.json

    "@angular-builders/jest": "^8.0.3",
    "@types/jest": "^24.0.15",
    "jest": "^24.8.0",
    "jest-preset-angular": "^7.1.1",
    "ts-jest": "^24.0.2",
    

    tsconfig.json

    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "lib": ["es2018", "dom"],
        "types": ["jest"],
        "strict": true                     // note strict mode, this isn't default
      }
    }
    

    tsconfig.spec.json

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