How to know the coverage in project with karma and webpack?

Question

In my project, I want to use es6 syntax and test my code by Karma. I successfully organize testing but get the wrong information about the coverage.
The coverage report includes spec files and webpack bundles instead of source code.
Also, I want to send information about coverage to codeclimate.com .

Answer 1

This is the code from configuration working for me. Source code

After execute:

yarn test

Coverage info you can see if open in browser 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

Provide CC_TEST_REPORTER_ID variable in travis settings