Cannot find module from setup-jest.js

Issue

I have an Angular library that I’m working to update from Angular 11 to 13. Jest ran fine in 11 and 12, but now I’m having a lot of trouble with v13. I’ve followed the steps outlined here

The error I’m getting is as follows:

Cannot find module '@angular/core/testing' from 'node_modules/jest-preset-angular/setup-jest.js'

Require stack:
      node_modules/jest-preset-angular/setup-jest.js
      jest.setup.ts

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (node_modules/jest-preset-angular/setup-jest.js:2:24)

It seems odd that it’s looking for angular core files within the setup-jest file.

jest.config.js

module.exports = {
    preset: 'jest-preset-angular',
    moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
    snapshotSerializers: [
    ],
    roots: ['src'],
    moduleNameMapper: {
        '^lodash-es$': '<rootDir>/node_modules/lodash/index.js'
    },
    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
    testMatch: ['<rootDir>/src/**/*.spec.ts'],
    transform: {
        '^.+\\.ts?$': 'ts-jest',
        '^.+\\.mjs?$': 'ts-jest',
    },
    transformIgnorePatterns: ['node_modules/(?!(jest-test))', 'node_modules/(?!.*\\.mjs$)', 'node_modules/(?!\\@angular)'],
    coveragePathIgnorePatterns: ['<rootDir>/node_modules/'],
    coverageReporters: ['json', 'text', 'html', 'cobertura'],
    reporters: ['default', ['jest-junit', { outputDirectory: 'TestResults', outputName: 'jest-junit.xml' }]],
};

jest.setup.ts

import 'zone.js';
import 'zone.js/testing';
import 'jest-preset-angular/setup-jest';

package.json

{
  "name": "my-lib-name",
  "version": "12.0.2",
  "description": "",
  "main": "src/main.ts",
  "scripts": {
    "build": "npm run clean && npm run build:types && npm run build:umd && npm run build:esm2015 && npm run build:app",
    "build:app": "tsc --project tsconfig.app.json",
    "build:types": "tsc --project tsconfig.app.json --emitDeclarationOnly",
    "build:umd": "tsc --project tsconfig.umd.json",
    "build:esm2015": "tsc --project tsconfig.esm2015.json",
    "clean": "rimraf dist",
    "test": "jest --watch-all --detect-open-handles --reporters=default",
    "lint": "eslint -c .eslintrc.js --ext .ts ./src",
    "ci:test": "jest --ci --no-cache --maxWorkers=4 --detect-open-handles --coverage",
    "postbuild": "node scripts/postbuild.js"
  },
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "@types/lodash-es": "^4.17.4",
    "date-fns": "^2.13.0",
    "lodash-es": "^4.17.21",
    "rxjs": "^6.5.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.3.9",
    "@angular/animations": "^13.3.11",
    "@angular/cdk": "^12.2.13",
    "@angular/cli": "^13.3.9",
    "@angular/common": "^13.3.11",
    "@angular/compiler": "^13.3.11",
    "@angular/compiler-cli": "^13.3.11",
    "@angular/core": "^13.3.11",
    "@angular/forms": "^13.3.11",
    "@angular/material": "^12.2.13",
    "@angular/platform-browser": "^13.3.11",
    "@angular/platform-browser-dynamic": "^13.3.11",
    "@types/chance": "^1.1.3",
    "@types/estree": "^1.0.0",
    "@types/jest": "^26.0.22",
    "@types/lodash": "^4.14.168",
    "@types/lodash-es": "^4.17.4",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "chance": "^1.1.8",
    "date-fns": "^2.13.0",
    "eslint": "^7.19.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsdoc": "^31.6.0",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "jest": "^26.6.3",
    "jest-junit": "^12.0.0",
    "jest-marbles": "^2.5.1",
    "jest-preset-angular": "^12.2.0",
    "lodash-es": "^4.17.21",
    "rxjs": "6.5.5",
    "ts-jest": "^26.5.4",
    "ts-loader": "^8.0.17",
    "ts-node": "^9.1.1",
    "tslib": "^2.4.0",
    "typescript": "^4.6.4",
    "zone.js": "~0.11.4"
  },
  "dependencies": {
    "ng-packagr": "^12.2.7"
  }
}

Solution

It seems that you are on an old version of Jest (version 26). Jest Preset Angular version 12 requires Jest version 28.

According to Jest Preset Angular’s documentation, you are missing this setting in jest.config.js:

module.exports = {
  globalSetup: 'jest-preset-angular/global-setup',
}

Make sure to review Jest Preset Angular’s migration guide for Angular 13.

Answered By – Lars Gyrup Brink Nielsen

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.