remap-istanbul unable to find sourcemaps

[gschambial]

I am trying to generate coverage report of TypeScript Files using karma-remap-istanbul plugin.

My test cases are being executed successfully by karma, but when karma-remap-istanbul is trying to generate coverage report, it is throwing following error:

Error: Could not find source map for: "E:\myapp\karma-test-shim.js"
    at E:\myapp\node_modules\remap-istanbul\lib\remap.js:257:11
    at Array.forEach (native)
    at E:\myapp\node_modules\remap-istanbul\lib\remap.js:214:22
    at Array.forEach (native)
    at remap (E:\myapp\node_modules\remap-istanbul\lib\remap.js:213:12)
    at RemapCoverageReporter.onCoverageComplete (E:\myapp\node_modules\karma-remap-coverage\remap-covera
s:23:23)
    at Server.<anonymous> (E:\myapp\node_modules\karma\lib\events.js:13:22)
    at emitTwo (events.js:106:13)
    at Server.emit (events.js:191:7)
    at InMemoryReport.writeReport (E:\myapp\node_modules\karma-coverage\lib\in-memory-report.js:14:22)
    at writeReport (E:\myapp\node_modules\karma-coverage\lib\reporter.js:68:16)
    at E:\myapp\node_modules\karma-coverage\lib\reporter.js:290:11
    at Array.forEach (native)
    at Collection.forEach (E:\myapp\node_modules\karma\lib\browser_collection.js:93:21)
    at E:\myapp\node_modules\karma-coverage\lib\reporter.js:247:16
    at Array.forEach (native)

=============================== Coverage summary ===============================
Statements   : 49.04% ( 16003/32631 )
Branches     : 24.32% ( 3140/12910 )
Functions    : 42.46% ( 3258/7673 )
Lines        : 49.86% ( 15287/30662 )
================================================================================
11 11 2016 15:46:02.173:ERROR [karma]: TypeError: Cannot read property 'text' of undefined
    at E:\myapp\node_modules\istanbul\lib\report\html.js:288:53
    at Array.forEach (native)
    at annotateBranches (E:\myapp\node_modules\istanbul\lib\report\html.js:255:30)
    at HtmlReport.writeDetailPage (E:\myapp\node_modules\istanbul\lib\report\html.js:426:9)
    at E:\myapp\node_modules\istanbul\lib\report\html.js:489:26
    at SyncFileWriter.writeFile (E:\FrontEnd\FrontEnd\node_modules\istanbul\lib\util\file-writer.js:57:9)
    at FileWriter.writeFile (E:\myapp\node_modules\istanbul\lib\util\file-writer.js:147:23)
    at E:\myapp\node_modules\istanbul\lib\report\html.js:488:24
    at Array.forEach (native)
    at HtmlReport.writeFiles (E:\myapp\node_modules\istanbul\lib\report\html.js:482:23)
    at E:\myapp\node_modules\istanbul\lib\report\html.js:484:22
    at Array.forEach (native)
    at HtmlReport.writeFiles (E:\myapp\node_modules\istanbul\lib\report\html.js:482:23)
    at HtmlReport.writeReport (E:\myapp\node_modules\istanbul\lib\report\html.js:566:14)
    at E:\FrontEnd\FrontEnd\node_modules\remap-istanbul\lib\writeReport.js:77:22
    at E:\myapp\node_modules\remap-istanbul\node_modules\amdefine\amdefine.js:125:34
PS E:\myapp>

My configuration files are as follows:

karma.conf.js

module.exports = function(config) {
  var testWebpackConfig = require('./webpack.test');

  var configuration = {

    // base path that will be used to resolve all patterns (e.g. files, exclude)
    basePath: '',

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

    // list of files to exclude
    exclude: [ ],

    /*
     * list of files / patterns to load in the browser
     *
     * we are building the test environment in ./spec-bundle.js
     */
    files: [ 
     
      {pattern: './karma-test-shim.js', watched: false}
    ],

    /*
     * preprocess matching files before serving them to the browser
     * available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     */
    preprocessors: { 
      './karma-test-shim.js': ['webpack', 'sourcemap','coverage']
    },

    // Webpack Config at ./webpack.test.js
    webpack: testWebpackConfig,

    coverageReporter: {
      type: 'in-memory'
    },

    remapCoverageReporter: {
      'text-summary': null,
      json: './coverage/coverage.json',
      html: './coverage/html'
    },

    // Webpack please don't spam the console when running in karma!
    webpackMiddleware: { stats: 'errors-only'},

    /*
     * test results reporter to use
     *
     * possible values: 'dots', 'progress'
     * available reporters: https://npmjs.org/browse/keyword/karma-reporter
     */
    reporters: [ 'mocha', 'coverage', 'remap-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: false,

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

    customLaunchers: {
      ChromeTravisCi: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },

    /*
     * Continuous Integration mode
     * if true, Karma captures browsers, runs the tests and exits
     */
    singleRun: true
  };

  if (process.env.TRAVIS){
    configuration.browsers = [
      'ChromeTravisCi'
    ];
  }

  config.set(configuration);
};

webpack.test.js

var helpers = require('./helpers');

module.exports = {

  devtool: 'inline-source-map',

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['ts', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'

      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('_COMMON', 'REF01'),
        loader: 'null'
      },
      {
        test: /\.css$/,
        include: helpers.root('_COMMON', 'REF01'),
        loader: 'raw'
      }
    ]
  }

}

package.json

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for angular 2",
  "scripts": {
    "start": "webpack-dev-server --inline --config ./OPF/REF01/build/webpack/webpack.config.js --progress --port 8080",
    "test": "karma start",
    "build": "rimraf ./OPF/REF01/release && webpack --config ./OPF/REF01/build/webpack/webpack.prod.js --progress --profile --bail",
    "postinstall": "typings install"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "2.1.2",
    "@angular/compiler": "2.1.2",
    "@angular/core": "2.1.2",
    "@angular/forms": "2.1.2",
    "@angular/http": "2.1.2",
    "@angular/platform-browser": "2.1.2",
    "@angular/platform-browser-dynamic": "2.1.2",
    "@angular/router": "3.1.2",
    "@angular/upgrade": "2.1.2",
    "core-js": "2.4.1",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26",
    "angular2-in-memory-web-api": "0.0.21",
    "bootstrap": "3.3.7"
  },
  "devDependencies": {
    "ag-grid": "6.2.1",
    "ag-grid-ng2": "6.2.0",
    "angular2-template-loader": "0.4.0",
    "css-loader": "0.23.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "html-loader": "0.4.3",
    "html-webpack-plugin": "2.15.0",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.2.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-remap-coverage": "^0.1.2",
    "karma-remap-istanbul": "^0.2.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "null-loader": "0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "0.5.1",
    "rimraf": "2.5.2",
    "style-loader": "0.13.1",
    "ts-helpers": "^1.1.2",
    "ts-loader": "0.8.1",
    "typescript": "2.0.3",
    "typings": "1.0.4",
    "webpack": "1.13.0",
    "webpack-dev-server": "1.14.1",
    "webpack-merge": "0.14.0"
  }
}

Any kind of help would be highly appreciated.

[jdonaghue]

@gschambial does a source map for E:\myapp\karma-test-shim.js exist? I have not yet been able to reproduce the issue. If you could include a minimal setup that I could pull down and run that replicates the problem that would be very helpful. Thanks!

[kmaraz]

For me the same. Error: Could not find source map for: "e:\Projects\app\main.ts"

[MichaReiser]

This should be fixed with #87 ... we just need to wait for a release.

[Ks89]

I don't know, probably I'm drunk, but I'm having the same problem 'Error: Could not find source map for: ' also with the latest release of remap-istanbul (0.8.0).

[MichaReiser]

Karma coverage does not create the needed source maps.
You need to use https://github.com/deepsweet/istanbul-instrumenter-loader to instrument your code. I also know that karma-coverage uses a tool old version of istanbul. So I had to change the configuration to only write a json report using karma-coverage that is then transformed using remap-istanbul

Update: Karma-coverage-istanbul still requires remap-istanbul 0.7 and therefore, does not use the new features. We have to wait for another release sshev/karma-remap-coverage#10

[Ks89]

Initial answer: I'm using istanbul-instrument-loader but I'm having the same problem.

Updated answer: Damn :(

[MichaReiser]

Works now for me...

MichaReiser/parallel.es#98

[dylans]

Works now for me...

👍

We'll wait for any further feedback before closing this issue in case there's anything else we might have missed.

[Ks89]

It's not working in one of my personal projects.
I updated all dependencies (local and global).
Always the same problem ("Error: Could not find source map for").

I also tried to copy and paste @MichaReiser's config from parallel.es, but without success.
The main differences from parallel.es are:

• I'm using webpack 2.1.0 beta 27 and not beta 22
• I'm NOT using babel
• I'm using angular 2.3.0 (with angular2-template-loader)

I'm confused

[MichaReiser]

@Ks89
Can you post the name of your project or the GitHub Links or the full karma and webpack.configuration? Babel is actually not needed and I'm also using webpack 2 beta 27

I can imagine the following issues:

1. istanbul-instrumenter-loader not configured in webpack or outdated (has to be latest version!)
2. Instrumentation is configured over all source files and not only the test files. The problem here is, that webpack has, except your explicitly using the source-map-loader, no source maps for third party dependencies.

[Ks89]

Yes

The project is open source. I created a branch for this.

https://github.com/Ks89/My-MEAN-website-client/blob/update-to-istanbul-instrumenter-loader-1.x.x/config/webpack.test.js

https://github.com/Ks89/My-MEAN-website-client/blob/update-to-istanbul-instrumenter-loader-1.x.x/config/karma-test-runner.js

https://github.com/Ks89/My-MEAN-website-client/blob/update-to-istanbul-instrumenter-loader-1.x.x/karma.conf.js

[MichaReiser]

The problem is simple to solve and has nothing to do with *istanbul.

You might have noted that only the source maps for typescript files are missing. So it must have something to do with your TypeScript configuration ;)

I studied your webpack.configuration and surprisingly, you disable Source Maps for TypeScript! So there are actually no source maps for the TypeScript code...

{
  test: /\.ts$/,
  loader: 'awesome-typescript-loader',
  query: {
    module: 'commonjs',
    sourceMap: false,
    inlineSourceMap: true
  }
}

So just remove the two source map lines from the configuration and everything works smoothly.

[Ks89]

Oh Damn. Thank u. So simple?
I tried everything instead of look these lines. I'm an idiot.

I'll try this evening.

[Ks89]

I confirm, everything is ok now.
Thank u again @MichaReiser

[dylans]

Thanks everyone for your attention, patience and help! Closing this one out, hopefully for good.

[MadHatter122312]

I am still getting the same error after changing version to:
"remap-istanbul": "^0.11.1",
"karma-typescript": "^3.0.13",

> /core@2.0.0 posttest /Users/Core-KarmaTypescrit/ng-core/lib
> remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json

Error: Could not find source map for: "/Users/Core-KarmaTypescrit/ng-core/lib/src/components/error.component.ts"
    at CoverageTransformer.addFileCoverage (/Users/Core-KarmaTypescrit/ng-core/lib/node_modules/remap-istanbul/lib/CoverageTransformer.js:171:18)
    at /Users/Core-KarmaTypescrit/ng-core/lib/node_modules/remap-istanbul/lib/CoverageTransformer.js:298:14
    at Array.forEach (<anonymous>)
    at CoverageTransformer.addCoverage (/Users/Core-KarmaTypescrit/ng-core/lib/node_modules/remap-istanbul/lib/CoverageTransformer.js:296:24)
    at /Users/Core-KarmaTypescrit/ng-core/lib/node_modules/remap-istanbul/lib/remap.js:51:13
    at Array.forEach (<anonymous>)
    at remap (/Users/Core-KarmaTypescrit/ng-core/lib/node_modules/remap-istanbul/lib/remap.js:50:16)
    at Promise.then (/Users/Core-KarmaTypescrit/ng-core/lib/node_modules/remap-istanbul/bin/remap-istanbul.js:133:21)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

My karma.conf.js:

'use strict';

module.exports = function (config) {
  var configuration = {
    basePath: '.',

    frameworks: ['jasmine-ajax', 'jasmine', 'karma-typescript'],

    files: [

      'node_modules/systemjs/dist/system.src.js',

      // Polyfills
      'node_modules/core-js/client/shim.js',
      'node_modules/reflect-metadata/Reflect.js',

      { pattern: "src/**/*.spec.ts" },
      { pattern: "src/**/*.ts" },
      { pattern: "src/**/*.html" },

      // zone.js
      'node_modules/zone.js/dist/zone.js',
      'node_modules/zone.js/dist/long-stack-trace-zone.js',
      'node_modules/zone.js/dist/proxy.js',
      'node_modules/zone.js/dist/sync-test.js',
      'node_modules/zone.js/dist/jasmine-patch.js',
      'node_modules/zone.js/dist/async-test.js',
      'node_modules/zone.js/dist/fake-async-test.js',
      'node_modules/hammerjs/hammer.js',

      // RxJs
      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },

      // tslib
      { pattern: 'node_modules/tslib/tslib.js', included: false, watched: false },

      // Paths loaded via module imports:
      // Angular itself
      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
      { pattern: 'node_modules/@ngx-translate/core/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/ngx-responsive/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/moment-timezone/**/*.js', included: false, watched: false },
      // { pattern: 'node_modules/moment-timezone/**/*.js.map', included: false, watched: false },
      { pattern: 'node_modules/moment/**/*.js', included: false, watched: false },
      // { pattern: 'node_modules/moment/**/*.js.map', included: false, watched: false },
      { pattern: 'node_modules/@pershing/**/bundles/*.js', included: false, watched: false },
      // ag-grid related files for testing
      { pattern: 'node_modules/ag-grid-angular/dist/**/*.js', included: false, served: true, watched: false },
      { pattern: 'node_modules/ag-grid-angular/main.js', included: false, served: true, watched: false },
      { pattern: 'node_modules/ag-grid/dist/**/*.js', included: false, served: true, watched: false },
      { pattern: 'node_modules/ag-grid/main.js', included: false, served: true, watched: false },

      // paths loaded via module imports
      {pattern: 'src/**/*.js', included: true, watched: true},
      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
      {pattern: 'src/**/*.css', included: true, served: true, watched: true},

    ],

    exclude: [
      'node_modules/**/*spec.js',
      'src/**/*.d.ts'
    ],

    // proxied base paths
    proxies: {
      // required for component assets fetched by Angular's compiler
      '/src/': '/base/src/',
    },

    port: 9876,

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

    colors: true,

    autoWatch: true,

    karmaTypescriptConfig: {
      bundlerOptions: {
          entrypoints: /\.spec\.ts$/,
          transforms: [
              require("karma-typescript-angular2-transform")
          ]
      },
      compilerOptions: {
        lib: ["ES2015", "DOM"]
    }
    },

    // changed to ChromeHeadless to reduce test duration
    browsers: ["ChromeHeadless"],

    // customLaunchers: {
    //   Chrome: {
    //     base: 'Chrome',
    //     flags: ['--no-sandbox']
    //   }
    // },

    client: {
      jasmine: {
          random: false
      }
    }, 

    // Coverage reporter generates the coverage
    reporters: ['mocha', 'coverage', 'kjhtml', 'progress', 'karma-typescript'],

    // Source files that you wanna generate coverage for.
    // Do not include tests or libraries (these files will be instrumented by Istanbul)
    preprocessors: {
      // ts preprocessor required for ts report
      "**/*.ts": ["karma-typescript"],
    },

    // Generate code coverage for Istanbul
    coverageReporter: {
      includeAllSources: true,
      // Define path as <root>/coverage
      dir: 'coverage/',
      subdir: 'report',
      // report formats
      reporters: [
        {type: 'text'},
        {type: 'json', file: 'coverage-final.json'},
        {type: 'html'},
        {type: 'lcov'}
      ]
    }
  };

  if (process.env.TRAVIS) {
    configuration.browsers = ['Chrome_travis_ci'];
  }

  config.set(configuration)
};

...and my tsconfing.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "types": [
            "jasmine",
            "node"
        ],
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "noLib": false,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "noImplicitAny": false,
        "noImplicitReturns": true,
        "noImplicitUseStrict": false,
        "noFallthroughCasesInSwitch": true,
        "removeComments": true,
        "declaration": true,
        "lib": [
            "es2015",
            "dom"
        ],
        "typeRoots": [
            "node_modules/@types"
        ],
        "suppressImplicitAnyIndexErrors": true,
         /* workaround for duplicate identifier error for Observables
        * while using npm link
        * https://github.com/Microsoft/typescript/issues/6496
        */
        "baseUrl": "./",
        "paths": {
            "rxjs/Observable": ["./node_modules/rxjs/Observable"]
        }
        /* end*/
    },
    "exclude": [
        "demo",
        "node_modules",
        "dist",
        "tools",
        "gulpfile.ts",
        "gulpfile.d.ts"
    ],
    "include": [
        "src/**/*"
    ],
    "angularCompilerOptions": {
        "strictMetadataEmit": false,
        "skipTemplateCodegen": true
    }
}