错误：在 Angular2、Karma、Webpack 和伊斯坦布尔找不到源地图

Question

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: [
           'awesome-typescript-loader?sourceMap=false,inlineSourceMap=true',
           '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'
      }
    ],
    postLoaders: [{
      test: /\.ts$/,
      exclude: /(node_modules|OPF\\REF01\\spa_test)/,
      loader: 'istanbul-instrumenter'
    }]
  }

}

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.

Answer 1

Here is my minimalist setup for code coverage. For complete code sample - refer start kit

Kindly note

• Not using any pre-processors apart from webpack
• Not using karma-remap-coverage, karma-remap-istanbul, karma-sourcemap-loader
• Run the command npm test, code coverage report will be created at config/coverage

Folder Structure

package.json
tsconfig.json
app/
- app.component.ts
- app.component.spec.ts
config/
- helpers.js
- karma.conf.js
- karma-test-shim.js
- webpack.test.js

config/helpers.js

var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
     return path.join.apply(path, [_root].concat(args));
}
exports.root = root;

config/karma.conf.js

var webpackConfig = require("./webpack.test");
module.exports = function(config) {
    config.set({
        basePath: "",
        frameworks: ["jasmine"],
        files: [
            { pattern: "karma-test-shim.js", watched: false }
        ],
        preprocessors: {
            "karma-test-shim.js": ["webpack"]
        },
        webpack: webpackConfig,
        webpackMiddleware: {
            stats: "errors-only"
        },
        webpackServer: {
            noInfo: true
        },
        customLaunchers: {
            "PhantomJS_custom": {
                base: "PhantomJS",
                options: {
                    windowName: "my-window",
                    settings: {
                        webSecurityEnabled: false
                    },
                },
                flags: ["--load-images=true"],
                debug: false
            }
        },
        coverageReporter: {
            dir: "coverage",
            reporters: [
                {
                    type: "json",
                    subdir: ".",
                    file: "coverage.json"
                }
            ]
        },
        reporters: ["progress", "coverage"],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ["PhantomJS_custom"],
        singleRun: true
    });
};

config/karma-test-shim.js

Error.stackTraceLimit = Infinity;
require("core-js/es6");
require("core-js/es7/reflect");
require("zone.js/dist/zone");
require("zone.js/dist/long-stack-trace-zone");
require("zone.js/dist/proxy");
require("zone.js/dist/sync-test");
require("zone.js/dist/jasmine-patch");
require("zone.js/dist/async-test");
require("zone.js/dist/fake-async-test");
require("rxjs/Rx");
var testContext = require.context("../app", true, /\.spec\.ts/);
testContext.keys().forEach(testContext);
var testing = require("@angular/core/testing");
var browser = require("@angular/platform-browser-dynamic/testing");
testing.TestBed.initTestEnvironment(
    browser.BrowserDynamicTestingModule,
    browser.platformBrowserDynamicTesting());

config/karma-test-shim.js

var helpers = require("./helpers");
module.exports = {
    devtool: "inline-source-map",
    resolve: {
        extensions: ["", ".ts", ".js"]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: [
                    "awesome-typescript-loader?sourceMap=false,inlineSourceMap=true"
                ]
            }
        ],
        postLoaders: [
            {
                test: /\.ts$/,
                exclude: /(node_modules|\.spec\.ts)/,
                loader: "istanbul-instrumenter"
            }
        ]
    }
};

package.json

"dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/router": "3.2.1",
    "core-js": "2.4.1",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
},
"devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/jasmine": "^2.5.38",
    "awesome-typescript-loader": "^2.2.4",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "~2.5.2",
    "karma": "^1.3.0",
    "karma-cli": "^1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-webpack": "^1.8.0",
    "remap-istanbul": "^0.6.4",
    "typescript": "^2.0.3",
    "webpack": "^1.13.2",
    "webpack-merge": "^0.14.0"
},
"scripts": {
    "test": "karma start config/karma.conf.js && npm run report",
    "report": "remap-istanbul -i config/coverage/coverage.json -o config/coverage/html-report -t html -e node_modules"
}

Answer 2

Couple of things

1. You dont have any loader for ts files, you just have template loader from ts files.

    { test: /\\.ts$/, loaders: [ 'awesome-typescript-loader?sourceMap=false,inlineSourceMap=true', 'angular2-template-loader' ] }

2. You dont istanbul-instrumenter postloader.

    postLoaders: [{ test: /\\.ts$/, exclude: /(node_modules|app\\\\spec)/, loader: 'istanbul-instrumenter' }]

   Your exclude expression may be different.

Let me know if this helps, I will try to put my working sample on github.

Answer 3

将“karma-remap-istanbul”严格版本设置为“0.5.0”对我有帮助。

"karma-remap-istanbul": "0.5.0",

Answer 4

我刚刚从karma.conf.js删除了记者remap-coverage ，如下所示：

reporters: ['mocha', 'coverage', 'tfs', 'sonarqubeUnit']