就我而言，使用 Ionic 5、Angular 10 和 NX monorepo，我必须执行以下操作才能启用 Ionic 应用程序的 Jest 测试。
注意：如果您已经有标准的 Jest 设置，请跳过前 4 个步骤。
注意2：步骤的顺序并不重要。
1. 删除所有 Karma 和 Jasmine 文件和依赖项
- 删除
karma.conf.js和src/test.ts。
- 删除与
karma（例如，等）相关jasmine的所有内容package.json@types/jasminekarma
2.添加Jest依赖
添加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文件。用 Jest 的配置替换architect-> testKarma 的配置：
"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
在TypeScript 配置中添加"allowJs": true和。添加到之前创建的编译文件。typescompilerOptionsfilestest-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
如果您还没有，jest.config.js请在您的应用程序根目录（您拥有的位置）中创建。package.json
注意：我在 Angular 的 Jest 配置的默认版本中添加transformIgnorePatterns和global.ts-jest.babelConfig设置。
该文件的最终版本如下所示：
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',
};
感谢这篇文章帮助我确定了这些步骤：如何在 Ionic 4 项目中设置 Jest | 格雷戈尔·沃伊沃德 | 2019 年 4 月 25 日 | 中等的