Cannot find module '@angular/core/testing' | jest-preset-angular | Angular 14

Question

While trying to run jest test after upgrading I am running into an issue where spec.ts (tests) are unable to find the @angular/core/testing module.

Image of the error

I've been searching on the internet for hours without a solution and cant seem to find anything obvious myself either.

jest.config.js

const esModules = ['@angular', '@ngrx', 'd3'];
module.exports = {
    displayName: 'ondemand-backoffice',
    preset: 'jest-preset-angular',
    reporters: [
        'default',
        [
            'jest-sonar',
            {
                outputDirectory: 'apps/ondemand-backoffice/test-coverage/ondemand-backoffice',
                outputName: 'sonar-report.xml',
            },
        ],
    ],

    //Coverage Configuration
    collectCoverage: true,
    coverageDirectory: 'test-coverage/ondemand-backoffice',
    collectCoverageFrom: ['<rootDir>/src/**/*.ts', '<rootDir>/src/**/*.spec.ts'],
    testResultsProcessor: 'jest-sonar-reporter',

    testTimeout: 180000,

    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
    globals: {
        'ts-jest': {
            useESM: true,
            tsconfig: '<rootDir>/tsconfig.spec.json',
            stringifyContentPathRegex: '\\.(html|svg)$',
        },
    },
    moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
    moduleNameMapper: {
        '../../libs/(.*)$': '<rootDir>/../../libs/$1',
        'src/(.*)': '<rootDir>/src/$1',
    },
    transform: {
        '^.+\\.(ts|js|html)$': 'jest-preset-angular',
    },
    transformIgnorePatterns: [`<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join('|')})`],
    snapshotSerializers: [
        'jest-preset-angular/build/serializers/no-ng-attributes',
        'jest-preset-angular/build/serializers/ng-snapshot',
        'jest-preset-angular/build/serializers/html-comment',
    ],
    extensionsToTreatAsEsm: ['.ts'],
};

test-setup.js

Object.defineProperty(window, 'CSS', { value: null });

Object.defineProperty(window, 'getComputedStyle', {
    value: () => {
        return {
            display: 'none',
            appearance: ['-webkit-appearance'],
        };
    },
});

Object.defineProperty(document, 'doctype', {
    value: '<!DOCTYPE html>',
});

Object.defineProperty(document.body.style, 'transform', {
    value: () => {
        return {
            enumerable: true,
            configurable: true,
        };
    },
});

Object.defineProperty(window, 'getComputedStyle', {
    value: () => ({
        getPropertyValue: () => {
            return '';
        },
    }),
});

HTMLCanvasElement.prototype.getContext = function (): any {
    // FIXME: Functions should not be empty.
};
if (typeof window.URL.createObjectURL === 'undefined') {
    window.URL.createObjectURL = (): any => {
        // Do nothing
        // Mock this function for mapbox-gl to work
    };
}

jest.mock('mapbox-gl', () => ({
    Map: jest.fn(() => ({
        addControl: jest.fn(),
        on: jest.fn(),
        remove: jest.fn(),
        getBounds: jest.fn(),
    })),
    Marker: jest.fn(() => ({
        setLngLat: jest.fn(),
        addTo: jest.fn(),
    })),
}));

tsconfig.json (not sure if needed)

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "types": ["node", "jest"],
        "esModuleInterop": true
    }
}

Package versions

    "@angular-builders/jest": "^13.0.2",
    "@nrwl/jest": "12.10.0",
    "@angular/animations": "^14.3.0",
    "@angular/cdk": "^13.2.0",
    "@angular/common": "^14.3.0",
    "@angular/compiler": "^14.3.0",
    "@angular/core": "^14.3.0",
    "@angular/flex-layout": "^13.0.0-beta.37",
    "@angular/forms": "^14.3.0",
    "@angular/material": "^13.1.3",
    "@angular/platform-browser": "^14.3.0",
    "@angular/platform-browser-dynamic": "^14.3.0",
    "@angular/router": "^14.3.0",

I've tried multiple solutions provided by other people online without any results.

Cannot find module '@angular/core/testing' | jest-preset-angular | Angular 14

0 Answers0