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

Currently Karma Remap Istanbul is the only package capable of generating TypeScript coverage inline. It can also obviously be managed by simply calling remap-istanbul on your generated coverage.json.

This package will get you TypeScript coverage output summary on the console assuming you set the output config to text: undefined

Adding it to your existing workflow is simple enough, the documentation on how exactly to do so in the packages github README.md.

Answer 2

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.