无法从测试文件中找到模块 @ionic/angular (ionic 4)答案

【问题标题】：Cannot find module @ionic/angular (ionic 4) from test-file无法从测试文件中找到模块 @ionic/angular (ionic 4)
【发布时间】：2019-03-14 14:54:30
【问题描述】：

我正在尝试使用 jest 来测试 Ionic 应用程序。我开玩笑的配置是：

preset: 'jest-preset-angular',
setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',
transformIgnorePatterns: ['node_modules/(?!@ngrx|@ionic-native|@ionic)'],
globals: {
  __TRANSFORM_HTML__: true,
},

setupJest.js 文件有 import 'jest-preset-angular';。

我有一个非常简单的测试，我使用 TestBed 创建 App 组件的实例并检查它是否真实。在这段代码中我有import { Platform } from '@ionic/angular';。

玩笑错误：

Cannot find module '@ionic/angular' from 'app.component.test.ts'

如果我只是从测试文件中删除 import { Platform } from '@ionic/angular'，Jest 会从组件文件中给我同样的错误：

Cannot find module '@ionic/angular' from 'app.component.ts'

使用ionic serve / building works，开玩笑只是给我这个错误，它不能从 Y 导入 X。

如何让 jest 从@ionic 文件中导入？

【问题讨论】：

标签： angular ionic-framework jestjs

【解决方案1】：

npm install --save rxjs-compat or do
npm update

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案2】：

我能够从链接的 GitHub 问题中的信息解决此问题。我到达了此处链接的最终配置：https://github.com/ionic-team/ionic/issues/15695#issuecomment-428412641

从那以后，我修改了这些配置以加快测试速度（使用缓存），但仍然没有遇到问题。我目前的配置：

// jest.config.js
module.exports = {
  globals: {
    // jest-preset-angular sets ts-jest tsConfigFile as "src/tsconfig.spec.json". This overwrites
    // it to use the default `tsconfig.json`. You can change this to your preferred config.
    __TRANSFORM_HTML__: true,
  },
  preset: 'jest-preset-angular',
  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',
  moduleNameMapper: {
    '^@ionic/core/loader': '<rootDir>/node_modules/@ionic/core/dist/esm/es5/ionic.define.js',
  },
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!@ionic)',
  ],
};

src/setupJest.ts 仅包括import 'jest-preset-angular'。

TypeScript 配置：

{
  "compilerOptions": {
    "allowJs": true,
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "skipLibCheck": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"]
  }
}

您可能可以对其中一些配置设置进行相当多的更改，但最重要的是allowJs。这是必需的，否则jest 将无法正确导入大量 Ionic 库。

最后，记得使用 Ionic 4 文件从 /ngx 导入。例如：

import { StatusBar } from '@ionic-native/status-bar/ngx';

【讨论】：