包含karma以及javascript和typescript src文件的混合覆盖率报告

我有一个项目，我使用webpack进行开发/测试，karma作为我的测试运行者。这个项目的源文件一半用js编写，一半用ts/tsx编写。测试套件完全用js编写。我目前使用karma coverage，它显示所有js源文件的覆盖率报告，但不支持typescript文件。我所有的测试都在运行，没有问题，我只是希望所有测试文件的覆盖率报告。谁能给我指出正确的方向吗

这是我的karma.conf.js，如果这有帮助的话

'use strict';

const webpackCfg = require('./webpack.config')('test');

module.exports = function karmaConfig(config) {

  config.set({
    browsers: ['Chrome'],
    files: [
      'test/loadtests.js'
    ],
    port: 8080,
    captureTimeout: 60000,
    frameworks: [
      'mocha',
      'chai',
      'sinon'
    ],
    client: {
      mocha: {}
    },
    singleRun: true,
    reporters: ['mocha', 'coverage', 'junit'],
    mochaReporter: {
      output: 'autowatch'
    },
    preprocessors: {
      'test/loadtests.js': ['webpack', 'sourcemap']
    },
    webpack: webpackCfg,
    webpackServer: {
      noInfo: true
    },
    junitReporter: {
      outputDir: 'coverage',
      outputFile: 'junit-result.xml',
      useBrowserName: false
    },
    coverageReporter: {
      dir: 'coverage/',
      watermarks: {
        statements: [70, 80],
        functions: [70, 80],
        branches: [70, 80],
        lines: [70, 80]
      },
      reporters: [
        { type: 'text' },
        {
          type: 'html',
          subdir: 'html'
        },
        {
          type: 'cobertura',
          subdir: 'cobertura'
        },
        {
          type: 'lcovonly',
          subdir: 'lcov'
        }
      ]
    }
  });
};

以及我的网页测试配置的相关部分

  {
      devtool: 'inline-source-map',
      externals: {
        cheerio: 'window',
        'react/lib/ExecutionEnvironment': true,
        'react/addons': true,
        'react/lib/ReactContext': true,
      },
      module: {
        preLoaders: [
          {
            test: /\.(js|jsx)$/,
            loader: 'isparta-loader',
            include: [
              this.srcPathAbsolute
            ]
          }
        ],
        loaders: [
          {
            test: /\.cssmodule\.css$/,
            loaders: [
              'style',
              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]'
            ]
          },
          {
            test: /^.((?!cssmodule).)*\.css$/,
            loader: 'null-loader'
          },
          {
            test: /\.(sass|scss|less|styl|png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
            loader: 'null-loader'
          },
          {
            test: /\.json$/,
            loader: 'json'
          },
          {
            test: /\.ts(x?)$/,
            exclude: /node_modules/,
            loader: ['babel', 'ts-loader']
          },
          {
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            query: {
              presets: ['airbnb']
            },
            include: [].concat(
              this.includedPackages,
              [
                this.srcPathAbsolute,
                this.testPathAbsolute
              ]
            )
          }
        ]
      },
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': '"test"'
        })
      ]
    }

---

经过几天的灵魂和谷歌搜索数百个浏览器标签，我找到了一个可行的解决方案。这是使用TypeScript2.x和Webpack2.x

test.js

是我的切入点。它可以很容易地被

test.ts

（最终也会如此）。在该入口点中，我加载

*.spec.js

和

*.spec.ts

文件。然后这些文件导入它们需要测试的任何源。我已经将所有的网页配置放在

karma.conf.js

中，因此更容易看到：

let myArgs = require('yargs').argv;
let path = require('path');
let webpack = require('webpack');

module.exports = function(config) {
  const REPORTS_PATH = myArgs.reportsPath ? myArgs.reportsPath :path.join(__dirname, 'build');

  config.set({
    basePath: '',

    frameworks: ['jasmine', 'es6-shim'],

    files: [
      './test.js'
    ],

    exclude: [],

    reporters: ['progress', 'spec', 'coverage', 'junit', 'coverage-istanbul'],

    preprocessors: {
      './test.js': ['webpack', 'sourcemap']
    },

    webpackServer: {
       noInfo: true // prevent console spamming when running in Karma!
    },

    webpack: {
      devtool: 'inline-source-map',
      resolve: {
        modules: [
          path.resolve('./node_modules'),
          path.resolve('./')
        ],
        extensions: ['.js', '.ts', '.css', '.scss']
      },
      plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery",
          "window.jQuery": "jquery"
        })
      ],
      module: {
        rules: [
          {
            enforce: 'pre',
            test: /\.js$/,
            use: 'source-map-loader',
            exclude: [/node_modules/]
          },
          {
            test: /\.ts$/,
            use: [{
              loader: 'awesome-typescript-loader',
              options: {
                module: 'commonjs'
              },
            }]
          },
          {
            test: /\.js$/,
            use: [{
            loader: 'awesome-typescript-loader',
              options: {
                entryFileIsJs: true,
                transpileOnly: true
              }
            }],
            exclude: [/node_modules/],
          },
          {
            enforce: 'post',
            test: /\.(js|ts)$/,
            use: [{
              loader: 'istanbul-instrumenter-loader',
              options: {
                esModules: true
              }
            }],
            exclude: [/node_modules/, /\.spec\.(js|ts)$/, /test/]
          },
          { test: /\.html/, use: 'raw-loader' },
          { test: /\.(s)?css$/, use: 'null-loader' },
          { test: /\.(png|jpg|jpeg|gif|svg|pdf)$/, use: 'null-loader' },
          { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'null-loader' },
          { test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'null-loader' },
          { test: /\.json$/, use: 'null-loader' }
        ]
      }
    },

    coverageReporter: {
      type: 'in-memory'
    },

    coverageIstanbulReporter: {
      //TODO: Figure out why the 'html' reporter blows up with istanbul-reports (something with absolute path copying files)
      reports: ['text-summary', 'cobertura'],
      // base output directory
      dir: REPORTS_PATH,
      fixWebpackSourcePaths: true,
      'report-config': {
        cobertura: {
          file: 'coverage.xml'
        },
        'text-summary': {
          file: null
        }
      }
    },

    junitReporter: {
      outputDir: `${REPORTS_PATH}/junit/`,
      outputFile: 'jasmine-results.xml'
    },

    // Hide webpack build information from output
    webpackMiddleware: {
      stats: {
        chunkModules: false,
        colors: true
      },
      noInfo: 'errors-only'
    },

    colors: true,
    logLevel: config.LOG_ERROR,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    autoWatchBatchDelay: 400
  });
};

因此，这里的关键部分是

awesome typescript loader

，

karma reporter

，

源地图加载器

，并且在

tsconfig.json

中，您要在

编译器选项中设置它们：

"inlineSourceMap": true,
"sourceMap": false,

我指出了html报告的待办事项。它确实可以工作，但我无法将它输出到包含TypeScript文件的自定义目录（subdir）。JavaScript只工作得很好。伊斯坦布尔报告可能是windows特有的问题。如果将
html
添加到
coverage stanbulreporter
下的
reports
数组中，您应该可以在项目目录中看到它，但在将其放入
reports\u路径时可能会遇到问题

还值得注意的是，我很幸运地使用了
karma remap coverage
而不是
karma coverage istanbul reporter
，但前者无法正确生成cobertura报告，这正是我对Jenkins的需要。
你知道吗？我真的很挣扎。我现在甚至不能让测试正常运行。如果你找到答案，可以把它贴在这里供大家参考吗？我还没有解决这个问题，但它在我的队列中，我会在我解决问题时更新。谢谢。我甚至不能让我的测试运行混合ts和js源代码。我有我的应用程序运行，但没有测试。您是否有可能共享用于测试的网页配置的相关部分？使用测试配置编辑我找到了一个解决方案！当我到达一台真正的计算机时，我会添加我的答案