帶有 karma 的覆蓋率報告以及 javascript 和 typescript src 文件的混合

Question

我有一個項目，我使用 webpack 進行開發/測試，並使用 karma 作為我的測試運行程序。 該項目的源文件一半用 js 編寫，一半用 ts/tsx 編寫。 測試套件完全用 js 編寫。 我目前使用 karma-coverage，它顯示我所有 js 源文件的覆蓋率報告，但它不支持打字稿文件。 我所有的測試都運行，那里沒有問題，我只是想要我所有測試文件的覆蓋率報告。 任何人都可以指出我正確的方向嗎？

如果有幫助，這是我的 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'
        }
      ]
    }
  });
};

以及我的 webpack 測試配置的相關部分

  {
      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"'
        })
      ]
    }

Answer 1

經過幾天的靈魂和谷歌在數百個瀏覽器標簽中搜索，我找到了一個可行的解決方案。 這是使用 TypeScript 2.x 和 Webpack 2.x。 test.js是我的切入點。 它可以很容易地成為test.ts （最終會如此）。 在那個入口點，我加載了我的*.spec.js和*.spec.ts文件。 然后這些文件導入他們需要測試的任何來源。 我已將所有 webpack 配置放在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-coverage-istanbul-reporter 、 source-map-loader ，在tsconfig.json ，你想在compilerOptions設置這些：

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

我指出了關於 html 報告的 TODO。 它確實有效，但我無法將其輸出到帶有 TypeScript 文件的自定義目錄（子目錄）作為其中的一部分。 JavaScript 只能正常工作。 可能是istanbul-reports的特定於 Windows 的問題。 如果您將html添加到coverageIstanbulReporter下的reports數組中，您應該會在您的項目目錄中看到它，但將其放入REPORTS_PATH可能會出現問題。

還值得注意的是，我很幸運地使用karma-remap-coverage而不是karma-coverage-istanbul-reporter但前者無法正確生成 cobertura 報告以進行覆蓋，而這正是我對 Jenkins 所需要的。