无法从测试文件中找到@ionic/angular模块（ionic 4）

Question

我正在尝试使用jest测试Ionic应用程序。我的jest配置如下:

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';代码。

Jest报出以下错误：

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 / 构建正常工作，Jest只是给我一个无法从Y导入X的错误。

如何让Jest从@ionic文件中进行导入？

- Explosion Pills

Answer 1

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

- Jag

---

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。一个适当的解释将极大地提高其长期价值，因为它可以展示为什么这是一个好的问题解决方案，并使其对未来读者有其他类似问题的人更有用。请[编辑]您的答案以添加一些解释，包括您所做的假设。 - CertainPerformance

Answer 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';

- Explosion Pills