如何知道 karma 和 webpack 在项目中的覆盖率？答案

【问题标题】：How to know the coverage in project with karma and webpack?如何知道 karma 和 webpack 在项目中的覆盖率？
【发布时间】：2019-11-11 19:59:00
【问题描述】：

在我的项目中，我想使用 es6 语法并通过 Karma 测试我的代码。我成功地组织了测试，但得到了关于覆盖率的错误信息。
覆盖率报告包括规范文件和 webpack 包而不是源代码。
另外，我想将有关报道的信息发送到codeclimate.com。

【问题讨论】：

标签： javascript webpack karma-runner code-coverage

【解决方案1】：

这是为我工作的配置代码。 Source code

执行后：

yarn test

在浏览器coverage/index.html打开时可以看到的覆盖率信息

// package.json
{
  "scripts": {
    "build": "webpack --config production.config.js",
    "test": "karma start"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "babel-loader": "^8.0.6",
    "babel-plugin-istanbul": "^5.1.4",
    "cross-env": "^5.2.0",
    "html-webpack-plugin": "^3.2.0",
    "jasmine-core": "^3.4.0",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.2",
    "karma-jasmine": "^2.0.1",
    "karma-mocha-reporter": "^2.2.5",
    "karma-webpack": "^4.0.2",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5"
  }
}

// karma.conf.js

const webpackConfig = require("./test.config");

module.exports = function(config) {
  config.set({
    basePath: "",

    frameworks: ["jasmine"],

    files: ["src/app/**/*.js"],

    exclude: [],

    // not included `coverage` preprocessor
    preprocessors: {
      "src/app/**/*.js": ["webpack"]
    },

    webpack: webpackConfig,

    reporters: ["mocha", "coverage"],

    coverageReporter: {
      type: process.env.TRAVIS ? "lcov" : 'html',
      dir: "coverage",
      // default subdir named by browser
      subdir: '.'
    },
    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: !process.env.TRAVIS,

    browsers: ["ChromeHeadless"],

    singleRun: process.env.TRAVIS,

    concurrency: Infinity
  });
};

// test.config.js

const config = {
  module: {
    rules: [
      {
        // exclude tests from coverage report
        test: /\.(spec|test)\.js$/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      },
      {
        // include code
        test: /\.js$/,
        exclude: /\.(spec|test)\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              plugins: ["istanbul"]
            }
          }
        ]
      }
    ]
  },
  mode: "development"
};

module.exports = config;

// .travis.yml

language: node_js
node_js:
  - stable

addons:
  chrome:
    - stable

cache:
  yarn: true
  directories:
    - node_modules

before_script:
  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
  - chmod +x ./cc-test-reporter
  - ./cc-test-reporter before-build

script:
  - yarn test

after_script:
  - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT

在 travis 设置中提供 CC_TEST_REPORTER_ID 变量

【讨论】：