Karma + Jasmine Testing setup breaks the ionic packaging

Question

I have an ionic app and I introduced testing using karma + jasmine. Also I use a typescript pre-processor for my tests.

I have the following dependencies, where all but the first two had to be added for testing:

"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
  }
}

This is my karma.conf.js file:

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
  })
}

The problem

Now the testing works fine using the command:

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

But when I now run ionic serve I get really cryptic error messages like so:

• Subsequent variable declarations must have the same type. Variable '[Symbol.unscopables]' must be of type '{ copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: ...', but here has type 'any'.

• Typescript Error All declarations of 'name' must have identical modifiers.

• Typescript Error Duplicate identifier 'PropertyKey'.

My take is that the devDependencies mess up the "load path" for the rest of the app. So I wonder how I get my app to work again.

Answer 1

The problem is that you are using es2015 definitions with core-js definitions.

Core-JS provides polyfills and thus is conflicting with TypeScript ES6+ standard definitions.

Remove @types/core-js and add karmaTypescriptConfig: { compilerOptions: { lib: ['dom', 'es2015'] } } to your karma.conf.js to make Karma-Typescript use es2015 definitions.