Code Coverage for Typescript using karma-jasmine and istanbul

Question

I am trying to get the Code Coverage for my typescript Code in karma framework using Istanbul in karma.conf typescript files are included and by karma typescript-preprocessor we able to do unit testing and code coverage of the typescript code but Code coverage report come for trans piled JavaScript code

How can I get the coverage report for typescript code?

Here is my karma.conf file.

module.exports = function(config) {
  config.set({

    // base path, that will be used to resolve files and exclude
    basePath: '',


    // frameworks to use
    frameworks: ['jasmine'],

    preprocessors: {
        'src/**/*.ts': ['typescript', 'coverage'],
        'test/**/*.ts': ['typescript']
    },
    typescriptPreprocessor: {
        options: {
            sourceMap: false, // (optional) Generates corresponding .map file.
            target: 'ES5', // (optional) Specify ECMAScript target version: 'ES3' (default), or 'ES5'
            module: 'amd', // (optional) Specify module code generation: 'commonjs' or 'amd'
            noImplicitAny: true, // (optional) Warn on expressions and declarations with an implied 'any' type.
            noResolve: false, // (optional) Skip resolution and preprocessing.
            removeComments: true, // (optional) Do not emit comments to output.
            concatenateOutput: false // (optional) Concatenate and emit output to single file. By default true if module option is omited, otherwise false.
        },
        // extra typing definitions to pass to the compiler (globs allowed)
        // transforming the filenames
        transformPath: function (path) {
            return path.replace(/\.ts$/, '.js');
        }

        //options: {
        //    sourceMap: true,
        //}
    },

    // list of files / patterns to load in the browser
    files: [

      'src/**/*.ts',
      'test/**/*.ts'
    ],


    // list of files to exclude
    exclude: [
      
    ],
    // test results reporter to use
    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
    reporters: ['progress','coverage'],


    // 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, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera (has to be installed with `npm install karma-opera-launcher`)
    // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
    // - PhantomJS
    // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
    browsers: ['PhantomJS'],


    // If browser does not capture in given timeout [ms], kill it
    captureTimeout: 60000,


    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,
    plugins: [
  'karma-jasmine',
  'karma-chrome-launcher',
  'karma-phantomjs-launcher',
  'karma-typescript-preprocessor',
  'karma-coverage'
  //require('../../../node_modules/karma-typescript-preprocessor/index.js')
    ]

  });
};

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:

To run the above example you need to install a few packages:

npm install @types/jasmine jasmine-core karma karma-chrome-launcher karma-cli karma-jasmine karma-typescript typescript

This is the complete configuration for unit testing vanilla Typescript code, no tsconfig.json needed in this case. For more complex setups with Angular, React etc you can find examples in the examples folder and in the integration tests.

Answer 2

We are using instanbul-remap for our project and it works quite nicely. To create our coverage reports, we run the following shell script:

#!/bin/bash

PROJECT_PATH="$(dirname $0)/../"

cd $PROJECT_PATH
echo Creating coverage reports for `pwd`

if [ ! -d "target/dist" ]; then
  echo
  echo "target/dist directory not found. Must compile source with \`npm install\` before running tests."
  echo
  exit 1;
fi

COVERAGE_DIR=target/coverage-raw
REMAP_DIR=target/coverage-ts

mkdir -p $COVERAGE_DIR
mkdir -p $REMAP_DIR

# run coverage on unit tests only
echo Creating coverage reports for unit tests
node_modules/.bin/istanbul cover --dir $COVERAGE_DIR nodeunit `find target/dist/test/ -name *.test.js` > /dev/null

# re-map the coverage report so that typescript sources are shown
echo Remapping coverage reports for typescript
node_modules/.bin/remap-istanbul -i $COVERAGE_DIR/coverage.json -o $REMAP_DIR -t html

echo Coverage report located at $REMAP_DIR/index.html

Our project uses nodeunit as a test harness as it is a node application. However, I would expect that a similar approach would work for karma.

Answer 3

There is karma-remap-istanbul which integrates nicely remap-istanbul with karma. Documentation is pretty self explanatory but one thing - to have summary on the console the config is text: undefined (otherwise text output goes to the file).

So it is possible to have coverage summary directly from karma however when ts sources are not available in the same directory as karma.config.js karma-remap-istanbul still needs some more development regarding configuration to be able to generate full html reports.