javascript - タイプスクリプト + カルマ + webpack + コードカバレッジが機能しない

Question

ステップバイステップの手順に従って、angular1 プロジェクトを angular2 に移行したいと考えています。したがって、typescript をプロジェクトに追加しました。しかし今、Karma、Webpack、および CodeCoverage で実行する際に問題が発生しています。単体テストはすべて緑色ですが、コード カバレッジのレポートには ".ts" ファイルが表示されません。

これを機能させるには、karma.config をどのように構成する必要がありますか? 私はすでに「karma-typescript」と「karma-remap-istanbul」を試しましたが、すべての依存関係の正しい設定を取得することに行き詰まっています。

ここに私のkarma.conf.jsがあります：

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '../../',

// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],

// list of files / patterns to load in the browser
files: [
  'node_modules/sinon/pkg/sinon-1.17.5.js',
  'node_modules/jquery/dist/jquery.min.js',
  'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
  'node_modules/svg4everybody/dist/svg4everybody.min.js',
  'specs/unit/mocks/*.js',
  'specs/config/karma.import.js'
],

// list of files to exclude
exclude: [
],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
  'app/**/*.ts': ['karma-typescript'],
  'specs/config/karma.import.js': ['webpack', 'sourcemap']
},

// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['spec', 'coverage'],

coverageReporter: {
  reporters: [
    { type: 'html', subdir: '.' }
  ],
  instrumenters: {isparta: require('isparta')},
  instrumenter: {
    'app/src/**/*.js': 'isparta'
  },
  instrumenterOptions: {
    istanbul: { noCompact: true }
  },
  includeAllSources: true
},

// web server port
port: 9876,

plugins: [
  'karma-babel-preprocessor',
  'karma-chrome-launcher',
  'karma-jasmine',
  'karma-sinon',
  'karma-spec-reporter',
  'karma-coverage',
  'karma-webpack',
  'karma-sourcemap-loader',
  'karma-typescript'
],

// 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: 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: false,

// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,

babelPreprocessor: {
  options: {
    presets: ['latest'],
    sourceMap: 'inline'
  },
  sourceFileName: function (file) {
    return file.originalPath;
  }
},

// special webpack-configuration for handling spec-files and preparing all
// modules for the code-coverage tool
webpack: {
  devtool: 'inline-source-map',
  module: {
    loaders: webpackConfig.module.loaders,
    preLoaders: [
      // {
      //   test: /\.js$/,
      //   loader: 'babel',
      //   include: /app\/src/,
      //   exclude: /node_modules|vendor/,
      //   query: {
      //     cacheDirectory: true
      //   }
      // },
      {
        test: /\.js$/,
        loader: 'istanbul-instrumenter',
        include: /app\/src/,
        exclude: /node_modules|vendor/,
        query: {
          cacheDirectory: true,
          esModules: true
        }
      }
    ]
  },
  cache: true
},

webpackMiddleware: {
  stats: {
    chunkModules: false,
    colors: true
  }
}

これは、すべてのリソースが個別にロードされる「karma.import.js」です。

const testsContext = require.context('../../app/src/', true, /\.spec\.js$/); 
testsContext.keys().forEach(testsContext);

// require all `src/components/**/index.js`
const componentsContext = require.context('../../app/src/', true, /(app)\.js$/);
componentsContext.keys().forEach(componentsContext);

require('angular-mocks');