就我而言，使用 Ionic 5、Angular 10 和 NX monorepo，我必须执行以下操作才能启用 Ionic 应用的 Jest 测试。
注意：如果您已经有标准的 Jest 设置，请跳过前 4 个步骤。
注意 2：步骤的顺序并不重要。
1.删除所有 Karma 和 Jasmine 文件和依赖项
- 删除
karma.conf.js和src/test.ts。
- 从
package.json 中删除与karma 和jasmine 相关的所有内容（例如@types/jasmine、karma 等）
2。添加 Jest 依赖项
如果您还没有devDependencies，请将jest、jest-preset-angular、@types/jest 和ts-jest 添加到您的devDependencies：
# if you use yarn:
yarn add --dev jest jest-preset-angular @types/jest ts-jest
# or if you use npm:
npm install --save-dev jest jest-preset-angular @types/jest ts-jest
3.更新 angular.json
更新您的angular.json 文件。将 Karma 的 architect -> test 配置替换为 Jest 的配置：
"test": {
"builder": "@nrwl/jest:jest",
"options": {
"jestConfig": "apps/my-app/jest.config.js",
"polyfills": "apps/my-app/src/polyfills.ts"
}
}
注意：我使用 @nrwl/jest:jest 构建器。如果您不使用 NX monorepo，只需将 @angular-builders/jest:run 指定为构建器，然后从配置选项中删除“apps/my-app/”。
4.创建 test-setup.ts
创建具有单行内容的src/test-setup.ts 文件：
import 'jest-preset-angular';
5.添加 Babel 依赖
将babel-jest、@babel/preset-env 和@babel/plugin-syntax-dynamic-import 添加到您的devDependencies：
# if you use yarn:
yarn add --dev babel-jest @babel/preset-env @babel/plugin-syntax-dynamic-import
# or if you use npm:
npm install --save-dev babel-jest @babel/preset-env @babel/plugin-syntax-dynamic-import
6.更新 tsconfig.spec.json
将 "allowJs": true 和 types 添加到 TypeScript 配置中的 compilerOptions。添加files 编译之前创建的test-setup.ts 文件。
我的最终版tsconfig.spec.json：
{
"extends": "./tsconfig.json",
"compilerOptions": {
"allowJs": true,
"outDir": "../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]
},
"files": ["src/test-setup.ts"],
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}
7.创建或更新 jest.config.js
如果您还没有，请在您的应用根目录（您有 package.json）中创建 jest.config.js。
注意：我将 transformIgnorePatterns 和 global.ts-jest.babelConfig 设置添加到 Angular 的 Jest 配置的默认版本中。
文件的最终版本如下所示：
const esModules = ['@ionic'].join('|');
module.exports = {
preset: '../../jest.preset.js',
coverageDirectory: '../../coverage/apps/mobile-ui',
snapshotSerializers: [
'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
'jest-preset-angular/build/AngularSnapshotSerializer.js',
'jest-preset-angular/build/HTMLCommentSerializer.js',
],
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'], // leave `<rootDir>` string as is
globals: {
'ts-jest': {
babelConfig: {
presets: [
[
'@babel/preset-env',
{ targets: { node: true }, modules: 'commonjs' }
]
],
plugins: ['@babel/plugin-syntax-dynamic-import']
},
tsConfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
astTransformers: {
before: [
'jest-preset-angular/build/InlineFilesTransformer',
'jest-preset-angular/build/StripStylesTransformer',
]
},
},
},
// To transform Ionic modules to UMD, because Jest can't import them otherwise
// (see here: https://medium.com/@gregor.woiwode/how-to-setup-jest-in-an-ionic-4-project-ff1e5b72dd79)
transformIgnorePatterns: [
`/node_modules/(?!${esModules})`
],
displayName: 'my-app',
};
感谢这篇文章，它帮助我确定了这些步骤：How to setup Jest in an Ionic 4 project | Gregor Woiwode | Apr 25, 2019 | Medium