無法找到Karma + Jasmine + TypeScript + Webpack的源地圖

Question

我正在嘗試使用Karma，Jasmine和Webpack測試（使用覆蓋率）我的TypeScript應用程序。 通過以下內容，我能夠成功運行測試，但無法正確生成覆蓋。 我正在使用karma-remap-coverage （ https://github.com/sshev/karma-remap-coverage ），看起來很簡單。

看起來好像發生了一些有趣的事情（而且我得到了一些報道）但是在這里和那里進行了一些調整，數字變化很大，我實際上永遠無法加載源圖。

這是基本設置：

我有一個包含10個.ts文件的src目錄。 目前只有一個具有相應的.spec文件。

spec文件非常簡單，足以證明我可以運行測試：

import ComponentToTest from './componentToTest';

describe('ComponentToTest', () => {

  it('should run a test', () => {
      expect(1+1).toBe(2);
  });

  it('should be able to invoke the a method', () => {
      spyOn(ComponentToTest, 'foo').and.callThrough();
      ComponentToTest.foo('testing foo');
      expect(ComponentToTest.foo).toHaveBeenCalled();
  });

});

當與我的tsconfig.json文件配對時，這就像一個魅力：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": false,
    "sourceMap": true,
    "lib": ["es6", "dom"],
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules"
  ]
}

和karma.conf.js文件：

module.exports = config => config.set({

    frameworks: ['jasmine'],

    mime: { 'text/x-typescript': ['ts','tsx'] },

    // if I make this a generic './src/**/*.ts' it seems to freeze up
    // without throwing any errors or running any tests, but that seems
    // like a separate issue...
    files: [
        './src/lib/componentToTest.ts',
        './src/lib/componentToTest.spec.ts'
    ],

    preprocessors: {
        './src/**/*.spec.ts': ['webpack'],
        './src/**/*.ts': ['webpack', 'sourcemap', 'coverage']
    },

    webpack: {
        devtool: "source-map",
        module: {
            rules: [
                {
                    test: /\.ts?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: [".ts", ".js"]
        }
    },

    webpackMiddleware: {
        quiet: true,
        stats: {
            colors: true
        }
    },

    // add both "karma-coverage" and "karma-remap-coverage" reporters
    reporters: ['progress', 'coverage', 'remap-coverage'],

    // save interim raw coverage report in memory
    coverageReporter: {
        type: 'in-memory'
    },

    // define where to save final remaped coverage reports
    remapCoverageReporter: {
        'text-summary': null,
        html: './coverage/html',
        cobertura: './coverage/cobertura.xml'
    },

    colors: true,

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

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

});

最后，我用一個簡單的Gulp任務啟動測試：

gulp.task('test', function (done) {
  new Server({
    configFile: __dirname + '/karma.conf.js',
    singleRun: true
  }, (exitCode) => {
     done();
     process.exit(exitCode);
  }).start();
});

運行時，我得到一個似乎（大多數）有希望的輸出：

Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 1 of 2 SUCCESS (0 secs / 0.002 secs)
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 2 of 2 SUCCESS (0.026 secs / 0.004 secs)
[Error: Could not find source map for: "app/src/lib/componentToTest.ts"]
[Error: Could not find source map for: "app/src/lib/componentToTest.spec.ts"]

========================= Coverage summary =========================
Statements   : 43.69% ( 322/737 )
Branches     : 15.7% ( 38/242 )
Functions    : 35.47% ( 61/172 )
Lines        : 44.91% ( 322/717 )
====================================================================

所以有些事情正在發生！ 這讓我覺得我很親密。 當我在瀏覽器中瀏覽我的覆蓋率報告時，我看到.spec.ts文件和.ts文件都列出了（這又是，越來越近了）但是由於以下幾個原因我並不完全在那里：

1. .spec.ts文件包含在coverage報告中。 由於這是測試文件，我不想包含它。
2. 源地圖未正確生成 - 從控制台中的錯誤以及無法瀏覽到特定文件的覆蓋率報告中可以清楚地看出這一點。

我覺得我非常接近。 我有什么簡單的遺漏或建議嗎？

更新：

我意識到我使用的是舊版本的Node，並認為這可能會導致一些問題。 我升級到6.11.0雖然沒有解決任何問題，但確實提供了更多的上下文：

remap-istanbul報告錯誤（真的沒有驚喜）：

CoverageTransformer.addFileCoverage (/app/node_modules/remap-istanbul/lib/CoverageTransformer.js:148:17)

我使用的是karma-remap-coverage@0.1.4 ，它使用了remap-istanbul@0.8.4 - 似乎過去在remap-istanbul@0.8.4 remap-istanbul方面存在問題，但在我使用的版本中沒有。

還使用Webpack 2.6.1和TypeScript 2.3.2

Answer 1

好吧，經過幾天嘗試不同的事情，我終於找到了一個有效的解決方案。 我不確定在我的第一篇文章中究竟是什么導致了這個問題，但是這里我已經到了最后。 對於尋找非常簡單的TypeScript，Karma，Jasmine，Webpack（帶覆蓋）設置的其他人來說，這可能會有所幫助。

• 我的文件結構和spec文件保持不變。

• 我的tsconfig.json更新為：

   { "compilerOptions": { "module": "commonjs", "target": "es6", "noImplicitAny": false, "inlineSourceMap": true, // this line "sourceMap": false, // and this one "experimentalDecorators": true, "lib": ["es6", "dom"] }, "exclude": [ "node_modules" ] } 

• 我轉而使用awesome-typescript-loader而不是ts-loader 。

• 最后，我的karma.conf.js文件現在看起來像：

   module.exports = config => config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', frameworks: ['jasmine'], mime: { 'text/x-typescript': ['ts','tsx'] }, files: [ 'node_modules/angular/angular.min.js', './src/**/*.ts' ], preprocessors: { './src/**/*.ts': ['webpack'] }, webpack: { devtool: 'inline-source-map', module: { rules: [ { enforce: 'pre', test: /\\.js$/, loader: 'source-map-loader', exclude: [ 'node_modules', /\\.spec\\.ts$/ ] }, { test: /\\.ts?$/, use: [ { loader: 'awesome-typescript-loader', query: { /** * Use inline sourcemaps for "karma-remap-coverage" reporter */ sourceMap: false, inlineSourceMap: true, compilerOptions: { removeComments: true } }, } ] }, { enforce: 'post', test: /\\.(js|ts)$/, loader: 'istanbul-instrumenter-loader', exclude: [ /node_modules/, /\\.spec\\.ts$/ ] }, { test: /\\.html$/, loader: 'html-loader' } ] }, resolve: { extensions: [".ts", ".js", ".html"] }, externals: { angular: "angular" } }, webpackMiddleware: { quiet: true, stats: { colors: true } }, // add both "karma-coverage" and "karma-remap-coverage" reporters reporters: ['progress', 'coverage', 'remap-coverage'], // save interim raw coverage report in memory coverageReporter: { type: 'in-memory' }, // define where to save final remaped coverage reports remapCoverageReporter: { 'text-summary': null, html: './coverage/html', cobertura: './coverage/cobertura.xml' }, colors: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: true }); 

最終包版本包括：

• 節點4.2.6 （我也能夠使用更新版本的節點，但由於其他原因需要在這里）
• awesome-typescript-loader 3.1.2
• istanbul-instrumenter-loader 2.0.0
• 茉莉核心2.5.2
• 業力1.6.0
• karma-chrome-launcher 2.0.0
• 業力覆蓋1.1.1
• karma-jasmine 1.1.0
• karma-remap-coverage 0.1.4
• karma-webpack 2.0.3
• 打字稿2.3.2
• webpack 2.6.1

現在我的測試運行了，控制台中沒有錯誤，我有原始TypeScript文件的覆蓋率報告！

很多人都把它放在一起（它最終指導了我的最終解決方案）： https ： //github.com/AngularClass/angular-starter/tree/master/config