使用 karma-coverage-istanbul-reporter 统计测试覆盖率时如何忽略文件

Question

最近在学习使用 Karma 但是统计测试覆盖率的时候发现覆盖率非常低，查看结果发现因为他也统计了我引入的一个工具类（如下图），如何设置才能在统计的时候忽略lib文件夹中的文件

Karma配置如下：

const webpackTestConfig = require('./build/webpack.test.js')

module.exports = function(config) {
  config.set({

    basePath: 'test/',

    frameworks: ['jasmine'],

    files: [
      '**/*.spec.js',
      '*.spec.js',
    ],

    exclude: [
    ],

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

    plugins: [
      'karma-chrome-launcher',
      'karma-jasmine',
      'karma-webpack',
      'karma-sourcemap-loader',
      'karma-coverage-istanbul-reporter',
      'karma-phantomjs-launcher'
    ],

    webpack: webpackTestConfig,

    reporters: ['coverage-istanbul'],


    coverageIstanbulReporter: {
      reports: ['html', 'text-summary'],
      dir: 'coverage/',
      fixWebpackSourcePaths: true,
      skipFilesWithNoCoverage: true,
      'report-config': {
        html: {
          subdir: 'html'
        }
      }
    },

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,
    
    autoWatch: true,

    browsers: [
      'ChromeHeadless',
    ],

    singleRun: false,

    concurrency: Infinity
  })
}

webpackTestConfig的内容为：

const path = require('path');

module.exports =  {
  devtool: 'inline-source-map',
  mode: 'none',
  resolve: {
    extensions: ['.js', '.json'],
    alias:{
      "@": path.resolve(__dirname,'../src')
    }
  },
  module: {
    rules: [
      {
        test: /js\/\.js$/,
        use: {
          loader: 'istanbul-instrumenter-loader',
          options: { esModules: true }
        },
        enforce: 'pre',
        exclude: /node_modules|\.spec\.js$|lib/,
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env'],
            plugins: ['istanbul']
          }
        },
        exclude: /node_modules/
      }
    ]
  },
};

搜过相关的解决办法，都说在webpack的loader中忽略文件，但是我设置了还是没用，相关回答如下：
https://github.com/mattlewis9...

Answer 1

找到了问题所在，因为我当初以为webpack loader和babel的istanbul插件效果不同，所以在webpack loader和babel同时设置了istanbul的插件，所以在istanbul-instrumenter-loader中配置的exclude没有生效，因为在他之前babel已经统计了一次，去掉其中一个就ok了。不过webpack的loader和babel的插件统计的数据好像不太一样，后续再对比差距吧。

Answer 2

你看这是不是你要的答案https://cloud.tencent.com/dev...

Answer 3

如果你用的是@vue/cli3，它已经给你配了一套，只需要接入babel-plugin-istanbul就行了。 参考官网整个操作

它这个实际上就是过cross-env中的babel配置的。回到你这个问题，如果你是基于@vue/cli3以上的配置，你只需要修改babelrc或者babel.config.js文件的配置就行了：

一般是这个样子：

  'env': {
    'test': {
      'plugins': ['istanbul']
    }
  }

把它替换为：

  'env': {
    'test': {
      'plugins': [
        [
          'istanbul',
          { 'exclude': [ 'tests/**' ] }
        ]
      ]
    }
  }

其实就是在配exclude选项。

PS:

这种改法的好处是实际上是修改npm run script的cross-env的配置，而不是去修改webpack改整个项目的配置。