找不到卡玛+茉莉花+ 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文件(这也是越来越近了)，但是由于以下几个原因，我并不完全在那里：

1. .spec.ts文件包含在覆盖率报告中。因为这是测试文件，所以我不想包含它。
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似乎一直存在问题，但在我使用的版本中却没有问题。

还使用Webpack 2.6.1和TypeScript 2.3.2

Answer 1

嗯，经过几天的尝试，我终于找到了一个可行的解决方案。在我的第一篇文章中，我不太清楚是什么导致了这个问题，但这是我最后的结论。这可能有助于其他人寻找一个真正简单的TypeScript，卡玛，茉莉花，Webpack (覆盖)设置。

• 我的文件结构和spec文件保持不变。
• 我的tsconfig.json更新为： { "compilerOptions"：{“模块”："commonjs"，“目标”："es6"，"noImplicitAny"：false，"inlineSourceMap"：true，//此行"sourceMap"：false，// experimentalDecorators: true，"lib"："es6"，"dom“}，”sourceMap“："node_modules”}
• 我转而使用awesome-typescript-loader而不是ts-loader。
• 最后，我的karma.conf.js文件现在看起来如下： module.exports = config => config.set(将用于解析所有模式的{ //基路径)(例如。文件，排除) basePath：‘，框架：'jasmine'，mime：{ 'text/x-typescript'：'ts'，'tsx’}，文件：‘节点_模块/角/angular.min.js’，'./src/**/*.ts‘，预处理程序：{./src/*.ts’：'webpack‘}，webpack：{ devtool：‘map’，模块：{ rules：[{inline：'pre'，test: /.js$/，加载程序：‘源-映射加载程序’，排除：‘节点_模块’，/.spec.ts$/ }，{ test: /..ts？$/，使用：{加载程序：“太棒了-类型-加载程序”，查询：{ /** *使用内联源地图进行“业力-重新映射-覆盖”记者*/ sourceMap: false，inlineSourceMap: true，compilerOptions：{ removeComments: true }，}，{强制执行：'post'，test: /.(js\ts)$/，加载程序：‘伊斯坦布尔-工具-加载程序’，排除:/node_node/，/.spec.ts$/ }，{ test: /.html$/，加载程序：‘html’} }，解析：{.ts：".js"，".html“}，外部：{角：“角”}，webpackMiddleware：{安静:真，统计：{颜色:真}，//添加“业力-覆盖”和“业力-重新映射-报道”记者：‘进度’，‘报道’，‘重新映射-报道’，//在内存coverageReporter中保存临时原始覆盖率报告：{ type：' in - memory‘}，//定义在何处保存最终重组的覆盖率报告remapCoverageReporter：{’text-汇总‘：null，html：'./ coverage /html'，cobertura：'./ coverage /cobertura.xml’}，颜色: true，//启动这些浏览器//可用的浏览器启动程序：https://npmjs.org/browse/keyword/karma-launcher浏览器：'Chrome'，//连续集成模式//如果是，Karma捕获浏览器，运行测试并退出singleRun: true })；

最后的包版本包括：

• 节点4.2.6 (我还能够让它与较新版本的节点一起工作，但由于其他原因需要在此工作)
• 太棒了-类型记录-加载程序3.1.2
• 伊斯坦布尔-仪表-装载机2.0.0
• 茉莉花核2.5.2
• 业力1.6.0
• karma-铬发射器2.0.0
• 业力-覆盖范围1.1.1
• 卡玛-茉莉花1.1.0
• 业力-重绘-覆盖率0.1.4
• 卡玛-webpack 2.0.3
• 打字本2.3.2
• webpack 2.6.1

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

许多功劳都归功于那些把这一切整合在一起的人(它最终指导了我的最终解决方案)：https://github.com/AngularClass/angular-starter/tree/master/config