Reflect.getOwnMetadata is not a function with karma-typescript

Question

I am trying to unit test (with Karma + Jasmine + karma-typescript) my TypeScript project. The project structure is as follows:

root
|- src/*.ts              //all TypeScript source files
|- tests/unit/*.spec.ts  //all spec (test) files
|- karma.conf.js
|- tsconfig.json

My karma.conf.js looks like following:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', "karma-typescript"],
    karmaTypescriptConfig: {
      tsconfig: "./tsconfig.json"
    },
    files: [
      'src/*.ts',
      'tests/**/*Spec.ts'
    ],
    exclude: [],    
    preprocessors: {
      "**/*.ts": ["karma-typescript"]
    },
    reporters: ["progress", "karma-typescript"],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

My spec file looks like below:

import 'aurelia-polyfills'; //<- importing this, as the project have dependency on Aurelia
// import "babel-polyfill";
import "reflect-metadata";
import "jasmine";
import { Utility } from './../../src/Utility';

describe("this is a try to set up karma-jasmine-webpack test (TS)", () => {
    it("utility_test", () => {        
        const result = Utility.doSomething();
        const expected = Expected_Result;
        expect(result).toEqual(expected);
    });
});

But when I run karma start, I get

Chrome 55.0.2883 (Windows 10 0.0.0) ERROR
  Uncaught TypeError: Reflect.getOwnMetadata is not a function
  at C:/Users/spal/AppData/Local/Temp/karma-typescript-bundle-16376WqjdFvsYtjdI.js:2325

I assume, that it is because of pollyfill(s) is/are not being loaded in the browser. However, I have imported aurelia-pollyfills in my spec file.

Please suggest how this can be corrected.

---

Update: Anyone looking at this for answer, might also face issues with source map (Error: Could not find source map for:'') from karma-remap-istanbul trying to generate coverage report.

One way to avoid this problem is to simply remove the problematic reporter plugin. For example, change reporters: ['mocha', 'coverage', 'karma-remap-istanbul'] to reporters: ['mocha', 'coverage'].

Other solution would be to generate the source maps. In case you can't specify the same in your tsconfig.json, you can specify that in karma.conf.js if you are using karma-typescript:

karmaTypescriptConfig: {
  tsconfig: "./tsconfig.json",
  compilerOptions: {
    sourceMap: true
  }
}

Lastly, I ended up with reporters: ["mocha", "karma-typescript"], as it shows which test passed, and which failed, as well as generate a coverage report.

Answer 1

You are probably missing the reflect-metadata import:

$ npm install --save-dev reflect-metadata

Then add the following to your files:

files: [
    { pattern: "node_modules/reflect-metadata/Reflect.js", include: true },
    { pattern: "src/*.ts", include: true },
    { pattern: "tests/**/*Spec.ts", include: true }
]