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, compiles TypeScript, assets etc.

Karma: Using the webpack plugin, loads the Webpack config (which uses ts-loader), then runs all unit tests with Jasmine + PhantomJS

The unit tests all run fine, but I haven't figured out a way to handle the webpack istanbul remapping. Karma-webpacks seems to not be generating source maps to allow the remapping to happen. Any pointers would be appreciated!

Karma Config:

var webpackConfig = require("./webpack.config.js");
delete webpackConfig.entry;

module.exports = function (config) {
    config.set({
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',

        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['jasmine'],

        // list of files / patterns to load in the browser
        files: [
            // Non-automatically bundled libraries
            'app/client/js/lib/easeljs.min.js',
            'app/client/js/lib/tweenjs.min.js',
            // Entry File
            'app/client/js/index.ts',
            'app/client/html/**/*.html',

            // Test files and dependencies
            'node_modules/angular-mocks/angular-mocks.js',
            'test/client/**/*.spec.js'
        ],

        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            '**/*.html': ['ng-html2js'],
            'app/client/js/index.ts': ['webpack', 'sourcemap', 'coverage']
        },

        ngHtml2JsPreprocessor: {
            cacheIdFromPath: function (filepath) {
                // Remaps the path for Karma webpack
                return '/_karma_webpack_//' + filepath.replace(/^.*[\\\/]/, '');
            },
            moduleName: 'templates'
        },

        webpack: webpackConfig,

        webpackMiddleware: {
            noInfo: true
        },

        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress', 'coverage'],

        coverageReporter: {
            dir: 'build/client/test/coverage/',
            reporters: [
                {
                    type: 'json',
                    subdir: '.'
                }
            ]
        },

        // web server port
        port: 9876,

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,

        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['PhantomJS'],

        // Concurrency level
        // how many browser should be started simultaneously
        concurrency: Infinity
    })
};

score 2 · Answer 1 · answered May 26 '16 at 20:14

2

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.

answered May 26 '16 at 20:14

Joshua Wiens

280
2
7

1

I can't get this to work. I have the same issue with remap-instanbul complaining about missing source maps. I don't see how this answer addresses @user2254679's question. – Robin Elvin Nov 28 '16 at 13:21

score 1 · Answer 2 · answered Sep 14 '16 at 03:23

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.

answered Sep 14 '16 at 03:23

Erik Barke

444
5
12

The count numbers in the margin and the number of lines/functions/branches/statements don't appear to match the ts file... – robmcm Oct 18 '16 at 13:17
@robmcm: There are 7 lines of code (excluding new lines), so 7 statements, 0 branches because there are no "if" statements, 3 functions (export class... the constructor and the function sayHello) and 5 lines marked with 1x, ie the number of times the line has been hit by a unit test, so 5 lines. 7, 0, 3, 5 seems to add up, but if you're seeing something I don't, please let me know! – Erik Barke Oct 20 '16 at 02:45
For reference, karma-typescript has a great deal of promise to fill the void that is typescript code coverage with a single lib. – Joshua Wiens Jan 21 '17 at 01:54

Webpack Karma Istanbul Remapping for TypeScript

2 Answers2

Linked