angulartypescriptkarma-jasminekarma-runnerkarma-coverage

Typescript code has coverage enabled when debugging unit tests


I have a hybrid Angular App (mix between 1.7.5 and 8.2.10) which uses a mix between TypeScript and JavaScript.

To run the unit tests, I have two separate npm scripts, one for the ngX tests and one for the ng1 tests.

My issue is that when I run my ng1 tests for debugging, the typescript code always has the code coverage enabled, meaning it is minified and has extra lines of code to count which lines/branch/statements/functions I am hitting. This obviously makes debugging a major annoyance. This is my npm script to run the tests

 "test:ng1": "karma start ./src/karma.ng1.conf.js",

And below is an example of a config I ran with all coverage plugins removed in an attempt to prevent the coverage code being applied to my typescript:

module.exports = function(config) {

  var reporters = ['mocha', 'kjhtml'];
  // Only implement coverage if the coverage argument was set
  if(config.coverage){
    reporters.push('coverage-istanbul');
    console.log('Coverage enabled');
  }
  else{
    console.log('Coverage not enabled');
  }

  config.set({
    // base path, that will be used to resolve files and exclude
    basePath: '../',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['jasmine', 'karma-typescript'],

    preprocessors: {
      'src/app/**/*.ts': ['karma-typescript'],
      'src/test/spec/**/*.ts': ['karma-typescript'],
      // 'src/app/modules/ng1/**/*.js': ['karma-coverage-istanbul-instrumenter'],
      // 'src/app/modules/ng1/**/*.ts': ['karma-typescript', 'karma-coverage-istanbul-instrumenter'],
      '**/*.html': ['ng-html2js']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },

    // list of files / patterns to load in the browser
    files: [
           .... all the files
    ],

    // list of files / patterns to exclude
    exclude: [
      'src/app/modules/ngX/**/*.spec.ts'
    ],

    // web server port defaults to 9876
    browsers: [
      'ChromeHeadless'
    ],
    browserNoActivityTimeout: 60000,

    // Code coverage report
    reporters: reporters,

    mochaReporter: {
      ignoreSkipped: true
    },

    // coverageIstanbulReporter: {
    //   reports: ['text-summary', 'html'],
    //   fixWebpackSourcePaths: true,
    //   dir: 'target/coverage/ng1',
    //   subdir: '.'
    // },

    // Which plugins to enable
    plugins: [
      'karma-chrome-launcher',
      'karma-jasmine',
      // 'karma-coverage-istanbul-reporter',
      'karma-jasmine-html-reporter',
      // 'karma-coverage-istanbul-instrumenter',
      'karma-mocha-reporter',
      'karma-ng-html2js-preprocessor',
      'karma-typescript'
    ],
    tsconfig: 'tsconfig.spec.json',
    colors: true,

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

With this config, the typescript code still has coverage code embedded in it when debugging. How can I disable this?


Solution

  • For anyone who comes across this, the problem was that karma-typescript automatically enables code-coverage so I just had to add a setting to disable it and enable source maps

    In my karma config

    karmaTypescriptConfig = {
      bundleOptions:{
        sourceMap: true
      },
      coverageOptions:{
        instrumentation : false
      }
    };