Jest/Ionic 4 beta-从'@Ionic/angular'导入{Platform};获取SyntaxError:Jest测试中意外的令牌导出,而不是Ionic

看到所有的答案都很长,我决定在读完后给大家展示一下对我有用的东西 Jest unit testing no longer works with Ionic 4 .

要使它工作,你需要添加到 jest.config.ts

transformIgnorePatterns: [
  "node_modules/(?!@ionic-native|@ionic)"
],

而且在 tsconfig.spec.json

"compilerOptions": {
  "allowJs": true,
},

transformIgnorePatterns . 但这是问题的一半。我们还需要添加一些babel来处理文件,以便它们可以运行。

{ 
     "presets": [["@babel/preset-env", {
        "modules": "commonjs",
        "targets": {
          "node": "current"
        }
      }]],
      "plugins": ["transform-export-extensions", "@babel/plugin-transform-runtime"]
}

我用了下面的笑话

{
    "jest": {
        "preset": "jest-preset-angular",
        "setupTestFrameworkScriptFile": "<rootDir>/src/setup-jest.ts",
        "globals": {
        "ts-jest": {
            "tsConfigFile": "tsconfig.jest.json",
            "useBabelrc": true
        },
        "__TRANSFORM_HTML__": true
    },
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|angular2-ui-switch|ng-dynamic|@ionic|@ionic-native)"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

src/tsconfig.spec.json 也需要一些小的调整。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "allowJs": true,
    "types": [
      "jest",
      "jquery",
      "jsdom",
      "node"
    ]
  }, 
  "include": [
    "polyfills.ts",
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

transformIgnorePatterns: [
    "node_modules/(?!(@ionic-native|@ionic|angularfire2)/)"
],

transformIgnorePatterns: [
    "node_modules/(?!@ionic-native|@ionic|angularfire2)"
],

但对我来说,这带来了一个新的错误:

Cannot find module '@ionic/core/loader' from 'app-initialize.js'
  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
  at Object.<anonymous> (node_modules/@ionic/angular/dist/app-initialize.js:1:1)

这一切都很好,直到我升级到离子4测试11(从测试8)。我现在也在使用jest23.6.0,但它在jest23.5.0中也失败了。

babelrc 配置。

ionic info

Ionic:

   ionic (Ionic CLI)          : 4.1.2
   Ionic Framework            : @ionic/angular 4.0.0-beta.11
   @angular-devkit/core       : 0.8.3
   @angular-devkit/schematics : 0.8.3
   @angular/cli               : 6.2.3
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/rc101077/Library/Android/sdk)
   ios-deploy        : 2.0.0
   ios-sim           : 7.0.0
   NodeJS            : v8.11.4 (/Users/rc101077/.nvm/versions/node/v8.11.4/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

在我的例子中,使用Ionic 5、Angular 10和nxmonorepo,我必须执行以下操作才能对Ionic应用程序进行Jest测试。

注意:如果您已经有标准的Jest设置,请跳过前4步。

注2:步骤的顺序并不重要。

1删除所有业力和茉莉花文件和依赖项

• 删除 karma.conf.js 和 src/test.ts
• 删除所有与 karma 和 jasmine 从 package.json (例如。 @types/jasmine , 因果报应 等等)

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

更新您的 angular.json architect -&燃气轮机; test 因果报应的配置和玩笑的配置:

"test": {
  "builder": "@nrwl/jest:jest",
  "options": {
    "jestConfig": "apps/my-app/jest.config.js",
    "polyfills": "apps/my-app/src/polyfills.ts"
  }
}

注:我使用 @nrwl/jest:jest @angular-builders/jest:run 并从配置选项中删除“apps/my app/”。

4创建测试-setup.ts

创建 src/test-setup.ts 包含单行内容的文件:

import 'jest-preset-angular';

5添加Babel依赖项

添加 babel-jest @babel/preset-env 和 @babel/plugin-syntax-dynamic-import 给你的 依赖性 :

# 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

添加 "allowJs": true 和 types 到 compilerOptions 在TypeScript配置中。添加 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

创建 jest.config.js ),如果你还没有。

注:我补充道 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',
};

荣誉 这篇文章帮助我确定了以下步骤: How to setup Jest in an Ionic 4 project | Gregor Woiwode | Apr 25, 2019 | Medium