覆蓋報告與業力和javascript和打字稿src文件的組合

Question

我有一個項目，我使用webpack開發/測試和業力作爲我的測試跑步者。這個項目有源文件，其中一半寫在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報告的問題。它工作，但我不能得到它輸出到一個自定義目錄（subdir）與TypeScript文件作爲其一部分。 JavaScript只能正常工作。可能是istanbul-reports與Windows相關的問題。如果您將html添加到下的reports陣列中，您應該在您的項目目錄中看到它，但可能會在REPORTS_PATH中遇到問題。

另外值得一提的是，我使用karma-remap-coverage代替karma-coverage-istanbul-reporter但前者不會正確生成覆蓋這正是我需要的詹金斯的Cobertura報告有很多運氣的。