Karma + Jasmine 测试设置打破了离子包装答案

【问题标题】：Karma + Jasmine Testing setup breaks the ionic packagingKarma + Jasmine 测试设置打破了离子包装
【发布时间】：2017-06-13 10:01:34
【问题描述】：

我有一个离子应用程序，我介绍了使用 karma + jasmine 进行的测试。我还使用打字稿预处理器进行测试。

我有以下依赖项，除了前两个之外的所有依赖项都必须添加以进行测试：

"devDependencies": {
    "@ionic/app-scripts": "1.0.0",
    "typescript": "2.0.9"

    "@types/core-js": "^0.9.35",
    "@types/jasmine": "^2.5.41",
    "angular-cli": "^1.0.0-beta.26",
    "jasmine-core": "^2.5.2",
    "karma": "^1.4.0",
    "karma-jasmine": "^1.1.0",
    "karma-safari-launcher": "^1.0.0",
    "karma-typescript": "^2.1.6",
    "reflect-metadata": "^0.1.9",
  },

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

这是我的karma.conf.js 文件：

module.exports = function(config) {
  config.set({

    basePath: '',
    frameworks: ["jasmine", "karma-typescript"],
    files: [
      {pattern: "src/**/*.spec.ts"},
      {pattern: "test/**/*.spec.ts"},
      {pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: true}
    ],

    preprocessors: {
      "**/*.ts": ["karma-typescript"], // *.tsx for React Jsx
    },

    reporters: ["progress", "karma-typescript"],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: false,

    browsers: ['Safari'],

    singleRun: true,

    concurrency: Infinity
  })
}

问题

现在使用以下命令可以正常测试：

./node_modules/karma/bin/karma start karma.conf.js

但是当我现在运行 ionic serve 时，我会收到非常神秘的错误消息，如下所示：

随后的变量声明必须具有相同的类型。变量 '[Symbol.unscopables]' 必须是类型 '{ copyWithin: boolean;条目：布尔值；填充：布尔值；查找：布尔值； findIndex：布尔值；键：...'，但这里有类型 'any'。
打字稿错误 'name' 的所有声明必须具有相同的修饰符。
打字稿错误重复标识符“PropertyKey”。

我的看法是 devDependencies 搞乱了应用程序其余部分的“加载路径”。所以我想知道如何让我的应用再次运行。

【问题讨论】：

这可能是由于两个 .d.ts 文件相互冲突，你能发布你的 tsconfig.json 吗？我认为@types/core-js 是负责任的。你确定你需要它吗？因为好像和TypeScript的lib.es6.d.ts有冲突。
@fathyb：感谢您的意见，我确实更新了问题。
谢谢，问题是您使用的是带有 core-js 定义的 es2015 定义。 Core-JS 提供了 polyfill，因此与 TypeScript 标准定义相冲突。尝试将 es2015 替换为 es5，如果遇到更多错误，请尝试再次放置 es2015 并删除 @types/core-js。
从 package.json 中移除 core-js 并没有解决问题。错误仍然相同。然后我用 es6 替换了 es2015 ，用 es6 替换了 target=es5 （出现了 3 次，所以我不知道我是否做对了），但这也没有解决问题。
es5 根本不是一个选项：Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015'

标签： angular typescript ionic-framework jasmine karma-runner

【解决方案1】：

问题是您将es2015 定义与core-js 定义一起使用。

Core-JS 提供了 polyfill，因此与 TypeScript ES6+ 标准定义冲突。

删除 @types/core-js 并将 karmaTypescriptConfig: { compilerOptions: { lib: ['dom', 'es2015'] } } 添加到您的 karma.conf.js 以使 Karma-Typescript 使用 es2015 定义。

【讨论】：