webpack手动搭建vue项目（七）—— 单元测试覆盖率_babel7使用babel-plugin-istanbul

1.安装依赖

>npm install karma-coverage cross-env babel-plugin-istanbul --save-dev

2.更新你的 .babelrc 文件

添加如下：

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

3 .更新karma.conf.js

module.exports = function(config) {
  config.set({
    // ...
 
    reporters: ['spec', 'coverage'],
 
    coverageReporter: {
      dir: './coverage',
      reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }]
    }
  })
}

 4.更新脚本

// package.json
{
  "scripts": {
    "test": "cross-env BABEL_ENV=test karma start --single-run"
  }
}

结尾附上我的各种版本：

#webpack3.x                                        #webpack4.x
babel-polyfill@6.26.0                              @babel/polyfill@7.4.4
element-ui@2.8.2                                   element-ui@2.8.2
vue@2.6.10                                         vue@2.6.10
vue-resource@1.5.1                                 vue-resource@1.5.1
vue-router@3.0.6                                   vue-router@3.0.6
vuex@3.1.1                                         vuex@3.1.1
@vue/test-utils@1.0.0-beta.29                      @vue/test-utils@1.0.0-beta.29
babel-cli@6.26.0                                   @babel/cli@7.4.4
babel-core@6.25.0                                  @babel/core@7.4.4
babel-eslint@7.1.1                                 babel-eslint@7.1.1
babel-loader@7.1.1"                                babel-loader@8.0.6
babel-plugin-istanbul@5.1.3                        babel-plugin-istanbul@5.1.4
babel-plugin-syntax-dynamic-import@6.18.0          @babel/plugin-syntax-dynamic-import@7.2.0
babel-plugin-transform-object-rest-spread@6.26.0   @babel/plugin-proposal-object-rest-spread@7.4.4
babel-preset-env@1.7.0                             @babel/preset-env@7.4.4
chai@4.2.0                                         chai@4.2.0
clean-webpack-plugin@2.0.2                         clean-webpack-plugin@2.0.2
copy-webpack-plugin@4.2.3                          copy-webpack-plugin@5.0.3
                                                   core-js@3.1.0
cross-env@5.2.0                                    cross-env@5.2.0
css-loader@2.1.1                                   css-loader@2.1.1
eslint@4.15.0                                      eslint@4.15.0
eslint-config-standard"@10.2.1                     eslint-config-standard"@10.2.1
eslint-friendly-formatter@3.0.0                    eslint-friendly-formatter@3.0.0
eslint-loader@1.7.1                                eslint-loader@1.7.1
eslint-plugin-html@3.0.0                           eslint-plugin-html@3.0.0
eslint-plugin-import@2.7.0                         eslint-plugin-import@2.7.0
eslint-plugin-node@5.0.0                           eslint-plugin-node@5.0.0
eslint-plugin-promise@3.4.0                        eslint-plugin-promise@3.4.0
eslint-plugin-standard@3.0.1                       eslint-plugin-standard@3.0.1
eslint-plugin-vue@4.5.0                            eslint-plugin-vue@4.5.0
extract-text-webpack-plugin@3.0.2                  extract-text-webpack-plugin@4.0.0-beta.0
file-loader@3.0.1                                  file-loader@3.0.1
html-webpack-plugin@2.30.1                         html-webpack-plugin@3.2.0
karma@4.1.0                                        karma@4.1.0
karma-chai@0.1.0                                   karma-chai@0.1.0
karma-chrome-launcher@2.2.0                        karma-chrome-launcher@2.2.0
karma-coverage@1.1.2                               karma-coverage@1.1.2
karma-mocha@1.3.0                                  karma-mocha@1.3.0
karma-sourcemap-loader@0.3.7                       karma-sourcemap-loader@0.3.7
karma-spec-reporter@0.0.32                          karma-spec-reporter@0.0.32
karma-webpack@3.0.5                                karma-webpack@3.0.5
mocha@6.1.4                                        mocha@6.1.4
mockjs@1.0.1-beta3                                 mockjs@1.0.1-beta3
node-sass@4.12.0                                   node-sass@4.12.0
sass-loader@7.1.0                                  sass-loader@7.1.0
style-loader@0.23.1                                style-loader@0.23.1
uglifyjs-webpack-plugin@1.1.6                      uglifyjs-webpack-plugin@2.1.3
vue-loader@15.7.0                                  vue-loader@15.7.0
vue-template-compiler@2.6.10                       vue-template-compiler@2.6.10
webpack@3.3.0                                      webpack@4.31.0
                                                   webpack-cli@3.3.2
webpack-dev-server@2.5.1                           webpack-dev-server@3.4.1
webpack-merge@4.1.1                                webpack-merge@4.2.1

注意：如果安装过程中出现 istanbul This module is no longer maintained, try this instead: npm i nyc Visit https://istanbul.js.org/integrations for other alternatives.这个是因为istanbul 这个包被弃用了，需要在安装完成后替换掉

在项目目录\node_modules\babel-plugin-istanbul\node_modules 下面

istanbul-lib-instrument和 istanbul-lib-coverage这个两个包分别是3.2.0和2.0.4版本