Webpack Karma Istanbul Remapping for TypeScript

Question

I\'m developing a client-side app and I\'m having trouble with creating the right Karma configs. Right now, I have my setup as follows:

Webpack: Using ts-loader, compile

Answer 1

Install karma-typescript:

npm install karma-typescript --save-dev

Put this in your karma.conf.js:

frameworks: ["jasmine", "karma-typescript"],

files: [
    { pattern: "src/**/*.ts" }
],

preprocessors: {
    "**/*.ts": ["karma-typescript"]
},

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

browsers: ["Chrome"]

This will run your Typescript unit tests on the fly and generate Istanbul html coverage that look like this:

This eliminates the need for using Karma and webpack together, Karma is used for running the tests and creating coverage, webpack is used for bundling.