Javascript Can'；找不到业力的源地图+；茉莉花&x2B；打字脚本+；网页包

我正在尝试使用Karma、Jasmine和Webpack测试我的打字脚本应用程序。通过以下步骤，我能够成功运行测试，但无法正确生成覆盖率。我正在使用

karma-remap-coverage

（），看起来很简单

看起来好像发生了一些有趣的事情（我得到了一些报道），但是随着这里和那里的一些调整，数字发生了巨大的变化，我永远无法实际加载sourcemaps

以下是基本设置：

我有一个

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"
  ]
}

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

});

和

karma.conf.js

文件：

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

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.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伊斯坦布尔

正在报告这些错误（这真的不奇怪）：

我正在使用

业力重映射-coverage@0.1.4

其中使用了

重新映射-istanbul@0.8.4

-似乎在过去，

重新映射伊斯坦布尔

出现了问题，但在我使用的版本中没有

---

还使用了Webpack

2.6.1

和TypeScript

2.3.2

好吧，经过几天的尝试，我终于找到了一个有效的解决方案。在我的第一篇文章中，我不确定是什么导致了这个问题，但这里是我结束的地方。这可能有助于其他人寻找一个真正简单的打字稿，卡玛，茉莉花，网页包（覆盖）设置

• 我的文件结构和

  spec

  文件保持不变
• My

  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加载程序

  ，而不是

  ts加载程序

• 最后，我的

  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类型脚本加载程序3.1.2
• 伊斯坦布尔仪器装载机2.0.0
• 茉莉花芯2.5.2
• 业力1.6.0
• 卡玛铬发射器2.0.0
• 业力覆盖率1.1.1
• karma jasmine 1.1.0
• karma重新映射覆盖率0.1.4
• 卡玛网页2.0.3
• 打字稿2.3.2
• 网页2.6.1

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

---

这要归功于将这一点放在一起的人（它最终指导了我的最终解决方案）：

我在AngularStarter的某个时候也让它发挥了作用。除了在Chrome中调试时，我看到我的typescript被编译成ES5/ES6，而不是原来的版本之外，我有代码覆盖率和其他一切。可能是什么问题？