找不到 Karma + Jasmine + TypeScript + Webpack 的源映射

Question

我正在尝试使用 Karma、Jasmine 和 Webpack 测试（覆盖）我的 TypeScript 应用程序。通过以下，我能够成功运行测试，但无法正确生成覆盖率。我正在使用 karma-remap-coverage (https://github.com/sshev/karma-remap-coverage)，它看起来很简单。

看起来好像发生了一些有趣的事情（而且我得到了某种覆盖率报告）但是随着一些地方的调整，数字发生了巨大的变化，我永远无法真正加载源地图。

这是基本设置：

我有一个 src 目录，其中包含 10 个 .ts 文件。目前只有一个有相应的.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 文件都列出了（这又一次，越来越近）但由于几个原因我不在那里:

.spec.ts 文件被包含在覆盖率报告中。由于这是测试文件，我不想包含它。
源映射未正确生成 - 从控制台中的错误以及无法浏览到特定文件的覆盖率报告可以清楚地看出这一点。

我确实觉得我非常接近。我缺少什么简单的东西或建议吗？

更新：

我意识到我使用的是旧版本的 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 似乎存在问题，但在我使用的版本中没有。

同时使用 Webpack 2.6.1 和 TypeScript 2.3.2

Answer 1

好吧，在尝试了几天不同的东西之后，我终于找到了一个可行的解决方案。我不确定在我的第一个 post 中具体是什么导致了这个问题，但这就是我结束的地方。这可能对寻找真正简单的 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

});

最终包版本包括：

node 4.2.6 （我也能够让它与较新版本的 node 一起工作，但由于其他原因需要在这里）
awesome-typescript-loader 3.1.2
伊斯坦布尔-instrumenter-loader 2.0.0
茉莉核心 2.5.2
业力 1.6.0
karma-chrome-启动器 2.0.0
业力覆盖 1.1.1
业力茉莉花 1.1.0
业力重映射覆盖范围 0.1.4
因果网络包 2.0.3
打字稿 2.3.2
网络包 2.6.1

现在我的测试运行，控制台没有错误，我有原始 TypeScript 文件的覆盖率报告！

非常感谢将这些放在一起的人（它最终指导了我的最终解决方案）：https://github.com/AngularClass/angular-starter/tree/master/config

找不到 Karma + Jasmine + TypeScript + Webpack 的源映射

Can't find source maps for Karma + Jasmine + TypeScript + Webpack

javascript

typescript

karma-jasmine

webpack

remap-istanbul