TL;DR
- 升级以下 Jest 依赖项至少*, and
- 更新 Jest 和 Typescript 配置
*您的项目可能需要额外升级——我的项目则需要。我发现与 (1) Angular 13 升级 + Jest 和 (2) Jest ESModule 支持相关的搜索结果最有帮助。
"@angular-builders/jest": "^13.0.2",
"jest": "^27.4.7",
"jest-preset-angular": "^11.0.1",
"ts-jest": "^27.1.2",
Angular 13 和 Jest:发生了什么变化?
Angular 13 中对 Jest 最具破坏性的重大变化是ESModule 工件(.mjs
)。 Jest 运行在支持 CommonJS 模块的 Node 中。它对 ESModules 具有实验性支持,并且需要额外的配置才能启用它。
升级中jest-preset-angular
解决了第一个错误(反射子路径)并发现了第二个错误:
$HOME/$PROJECT/node_modules/@angular/core/fesm2015/testing.mjs:7
import { getDebugNode, RendererFactory2, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, NgZone, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ModuleWithComponentFactories, InjectionToken, Injector, InjectFlags, ɵresetCompiledComponents, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
^^^^^^
SyntaxError: Cannot use import statement outside a module
接下来我升级了@angular-builders/jest
, jest
, and ts-jest
。可能还需要更改 Jest 和 Typescript 配置。在你的tsconfig.json
or tsconfig.spec.json
,检查它是否“有module
[in compilerOptions
] 具有 ESM 值,例如ES2015 或 ES2020 等...”,如中所述ts-lint 迁移文档 https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/.
以下是我对项目的 Jest 配置所做的更改,但每个项目都略有不同。
// jest.config.js
const esModules = ['@angular', '@ngrx', 'd3', [...]];
module.exports = {
// [...]
extensionsToTreatAsEsm: ['.ts'], // ts-jest
globals: {
'ts-jest': {
useESM: true, // ts-jest
},
},
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'], // jest-preset-angular
moduleNameMapper: {
'^(\\.{1,2}/.*)\\.js$': '$1', // ts-jest
},
preset: 'jest-preset-angular',
transform: {
'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
},
transformIgnorePatterns: [
`<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join('|')})`, // jest-preset-angular
],
}
如果您仍然遇到问题,我在下面提供了每个迁移文档的链接。我仍在解决其他软件包的问题,但希望这能让您走上一条好的道路!
迁移和 ESM 支持文档
- 角度最新升级:https://angular.io/guide/update-to-latest-version https://angular.io/guide/update-to-latest-version
-
@angular-builders/jest
: https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD
-
jest-preset-angular
: https://thymikee.github.io/jest-preset-angular/docs/next/guides/angular-13+/ https://thymikee.github.io/jest-preset-angular/docs/next/guides/angular-13+/
-
ts-jest
ESM 支持:https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/ https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/
- 玩笑 ESM 支持:https://jestjs.io/docs/ecmascript-modules https://jestjs.io/docs/ecmascript-modules
- 如果你仍然得到
Cannot use import
错误,对已关闭的 GitHub 问题的有用评论:https://github.com/thymikee/jest-preset-angular/issues/1149#issuecomment-963506942 https://github.com/thymikee/jest-preset-angular/issues/1149#issuecomment-963506942