Code coverage for Typescript using karma jasmine and istanbul

Question

I'm trying to get Code Coverage for my karma-based typescript code using Istanbul in the karma.conf typescript files and the karma typescript -preprocessor we can do unit testing and code coverage of typescript code, but the code coverage report will come for resettable JavaScript code

How to get 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 test tests on the fly and generate Istanbul html coverage that looks like this:

To run the above example, you need to install several 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 Typescript vanilla code, not the tsconfig.json required in this case. For more complex settings with Angular, React, etc. You can find examples in the examples folder and in integration tests .

Answer 2

We use instanbul-remap for our project and it works very well. 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 a similar approach to work for karma.

Answer 3

There is karma-remap-istanbul that blends remap-istanbul with karma perfectly. The documentation is pretty straightforward, but one thing is to have a summary on the console in the text: undefined configuration (otherwise the text is output to a file).

Thus, you can get a summary of coverage directly from karma, however, when ts sources are not available in the same directory as karma.config.js karma-remap-istanbul , another configuration work is still required to be able to generate full html reports.