Angular 14，Jest 28无法导入zone.js

Question

我正在升级到Angular 14。除了jest设置之外，一切都很好。由于我在by build中包含了Angular 14库，所以我必须使用jest-ESM支持。我的配置如下：

package.json

{
"name": "my-app",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "jest --config ./src/jest.config.js"
},
"dependencies": {
"@angular/animations": "^14.2.0",
"@angular/common": "^14.2.0",
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/forms": "^14.2.0",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0",
"angular-password-strength-meter": "^5.0.0",
"keycloak-angular": "^12.1.0",
"keycloak-js": "^19.0.1",
"lodash-es": "^4.17.15",
"ng-inline-svg": "^13.0.0",
"rxjs": "~7.5.6",
"sonar-scanner": "^3.1.0",
"tslib": "^2.4.0",
"zone.js": "~0.11.8",
},
"devDependencies": {
"@angular-builders/custom-webpack": "^14.0.0",
"@angular-builders/jest": "^14.0.0",
"@angular-devkit/build-angular": "^14.2.1",
"@angular-eslint/builder": "^14.0.0",
"@angular-eslint/eslint-plugin": "^14.0.0",
"@angular-eslint/eslint-plugin-template": "^14.0.0",
"@angular-eslint/schematics": "^14.0.0",
"@angular-eslint/template-parser": "^14.0.0",
"@angular/cli": "^14.2.1",
"@angular/compiler-cli": "^14.2.0",
"@openapitools/openapi-generator-cli": "^2.5.2",
"@types/crypto-js": "^4.0.0",
"@types/google-libphonenumber": "^7.4.18",
"@types/jest": "^28.1.3",
"@types/lodash-es": "^4.17.3",
"@types/node": "^14.0.26",
"@typescript-eslint/eslint-plugin": "^4.28.4",
"@typescript-eslint/parser": "^4.28.4",
"barrelsby": "^2.2.0",
"commit-message-validator": "^1.0.0",
"conventional-changelog-cli": "^2.1.0",
"jest": "^28.1.3",
"jest-preset-angular": "^12.2.2",
"ts-jest": "28.0.8",
"ng-packagr": "^14.3.0",
"terser-webpack-plugin": "5.3.1",
"ts-node": "~8.10.2",
"typescript": "~4.6.4"
}
}

tsconfig.json

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"target": "ES2015",
"module": "ES2015",
"lib": ["ES2018", "dom"],
"strictPropertyInitialization": false,
"strictNullChecks": false,
"noStrictGenericChecks": true,
"paths": {
"my-lib": ["dist/my-lib/my-lib", "dist/my-lib"]
}
},
"exclude": ["**/node_modules/*", "**/coverage/*", "**/dist/*", "**/node/*"],
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": false,
"strictTemplates": true
}
}

tsconfig esm.spec.json

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

jest.config.js

const { pathsToModuleNameMapper } = require('ts-jest');
const { paths } = require('./tsconfig.json').compilerOptions;
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'jest-preset-angular/presets/defaults-esm',
globalSetup: 'jest-preset-angular/global-setup',
globals: {
'ts-jest': {
useESM: true,
stringifyContentPathRegex: '\.(html|svg)$',
tsconfig: '<rootDir>/tsconfig-esm.spec.json',
},
},
moduleNameMapper: {
...pathsToModuleNameMapper(paths, {prefix: '<rootDir>/'}),
tslib: 'tslib/tslib.es6.js',
},
modulePathIgnorePatterns: ['<rootDir>/dist'],
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
transformIgnorePatterns: ['node_modules/(?!.*\.mjs$)']
};

/src/jest.config.js

const baseConfig = require('../jest.config');
module.exports = {
...baseConfig,
rootDir: '../',
roots: ['<rootDir>/src'],
modulePaths: ['<rootDir>'],
coveragePathIgnorePatterns: ['/dist/', '/node_modules/', '/testing/'],
};

当我运行ng test时，我得到以下内容：

Details:
C:pathtomyprojectnode_modulesjest-preset-angularsetup-jest.mjs:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import 'zone.js/fesm2015/zone-testing-bundle.min.js';
                ^^^^^^
SyntaxError: Cannot use import statement outside a module
> 1 | import 'jest-preset-angular/setup-jest.mjs';
| ^
2 | import './jest-global-mocks';
3 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
at Object.<anonymous> (setup-jest.ts:1:1)

这很奇怪，因为错误基本上源于setup-jest.ts中的import 'jest-preset-angular/setup-jest.mjs';语句。

即使我把zone.js放在transformIgnorePatterns数组中，它仍然不起作用。它应该不会有任何问题，因为最新的zone.js支持ESM。

知道我做错了什么吗？

Answer 1

这可能是因为您没有导入初始化组件所需的模块。