获取预编译源代码的 Karma 代码覆盖率

Posted 2023-03-16

【中文标题】获取预编译源代码的 Karma 代码覆盖率

【英文标题】：Getting Karma code coverage for pre-transpilation source code

【发布时间】：2015-11-17 03:51:45

【问题描述】：

我使用 Karma 运行测试，使用 webpack 打包文件，使用 babel 进行 es6 -> es5 转换。我已经运行了测试并生成了代码覆盖率，但是代码覆盖率数字是用于转换后的源文件的。有没有办法获得原始源文件的代码覆盖率？

我尝试使用sourcemap 预处理器，但它似乎没有做任何事情。我需要将它添加到 webpack 配置中的某个地方吗？

karma.conf.js

config.set(
    browsers: ['Chrome'], //run in Chrome

    files: [
        'src/**/*-test.js'
    ],

    frameworks: ['mocha'], //use the mocha test framework

    plugins: [
        'karma-chrome-launcher',
        'karma-mocha',
        'karma-sourcemap-loader',
        'karma-webpack',
        'karma-coverage',
    ],

    preprocessors: 
        'src/**/*-test.js': ['webpack']
    ,

    reporters: ['dots', 'coverage'], //report results in this format

    coverageReporter: 
        reporters: [
            type: 'text-summary',
        , 
            type: 'html',
            dir: 'build/reports/coverage'
        ]
    ,

    singleRun: true, //just run once by default

    webpack: 
        node: 
            fs: 'empty'
        ,

        // Instrument code that isn't test or vendor code.
        module: 
            loaders: [
                test: /\.js?$/,
                include: path.join(__dirname, 'src/js'),
                loader: 'babel?stage=0'
            ],

            postLoaders: [
                test: /\.js$/,
                exclude: /(test|node_modules)\//,
                loader: 'istanbul-instrumenter'
            ]
        
    ,

    webpackMiddleware: 
        noInfo: true //please don't spam the console when running in karma!
    
);

【问题讨论】：

你可以使用isparta-loader。

当我尝试将 isparta 添加为 preLoader（带有和不带有 babel 属性）时，它不再编译 import 语句上的代码和错误。它说要使用它而不是标准的 babel 加载器，所以我不确定我做错了什么。

【参考方案1】：

以下配置可以正常工作：

karma.conf.js

var path = require('path');

module.exports = function(config) 
  config.set(
    browsers: [ 'Chrome' ], //run in Chrome

    files: [
      'src/**/*-test.js'
    ],

    frameworks: [ 'mocha' ], //use the mocha test framework

    preprocessors: 
      'src/**/*-test.js': [ 'webpack' ]
    ,

    reporters: [ 'dots', 'coverage' ], //report results in this format

    coverageReporter: 
      reporters: [
        
          type: 'text-summary'
        ,
        
          type: 'html',
          dir: 'build/reports/coverage'
        
      ]
    ,

    singleRun: true, //just run once by default

    webpack: 
      node : 
        fs: 'empty'
      ,

      // Instrument code that isn't test or vendor code.
      module: 
        preLoaders: [
           test: /\.js$/, loader: 'isparta', include: path.join(__dirname, 'src/js') 
        ],
        loaders: [
          
            test: /\.js$/,
            include: path.join(__dirname, 'src/js'),
            loader: 'babel?stage=0'
          
        ]
      
    ,

    webpackMiddleware: 
      noInfo: true //please don't spam the console when running in karma!
    
  );
;

package.json

  "devDependencies": 
    "babel-core": "^5.8.22",
    "babel-loader": "^5.3.2",
    "chai": "^3.2.0",
    "isparta-loader": "^0.2.0",
    "karma": "^0.13.9",
    "karma-chrome-launcher": "^0.2.0",
    "karma-coverage": "^0.5.0",
    "karma-mocha": "^0.2.0",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.2.5",
    "webpack": "^1.11.0"
  

【讨论】：

这对我很有用。比我遇到的任何其他事情都简单得多。这也是我见过的唯一一个不使用“替代业力配置”的例子，其中require.context 用于创建单个入口点。

我还发现在处理大型代码库时，此解决方案比 require.context 选项效果更好。

感谢您，在花了几个小时尝试其他解决方案之后，这个终于让我知道如何让它工作了。我正在使用@djskinner 提到的“替代配置”，它也可以使用。

这不太可能在 webpack 2 下工作。我收到 isparta is not a loader