Karma code coverage always shows 100% (0/0) for the tests

Question

I am trying to build a react boilerplate so that I can use it for my personal project. Right now, I am trying to integrate the code coverage feature. I want all the test files to reside in its respective component folder rather than creating a separate tests folder. Below is the link to the repo.

https://github.com/shettyrahul8june/react-webpack-beej

karma.conf.js

import webpackConfig from './webpack.config';

webpackConfig.devtool = 'inline-source-map';

module.exports = (config) => {
  config.set({
    browsers: ['Chrome'], // run in Chrome
    singleRun: true, // just run once by default
    colors: true,
    // autoWatch: true,
    // logLevel: config.LOG_DEBUG,
    // use the mocha, chai and sinon test framework
    frameworks: ['mocha', 'chai', 'sinon'],
    files: [
      'tests.webpack.js', // just load this file
    ],
    preprocessors: {
      // preprocess with webpack and our sourcemap loader
      'tests.webpack.js': ['webpack', 'sourcemap'],
    },
    plugins: [
      'karma-chrome-launcher',
      'karma-chai',
      'karma-mocha',
      'karma-sinon',
      'karma-sourcemap-loader',
      'karma-webpack',
      'karma-coverage',
    ],
    // report results in this format
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      dir: '../coverage',
      reporters: [
        { type: 'text-summary' },
        { type: 'html' },
        { type: 'lcov' },
      ],
    },
    webpack: {
      node: {
        fs: 'empty',
      },
      module: webpackConfig.module,
      resolve: webpackConfig.resolve,
      externals: Object.assign({}, webpackConfig.externals, {
        'react/addons': true,
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': 'window',
      }),
    },
    webpackServer: {
      noInfo: true, // please don't spam the console when running in karma!
    },
  });
};

test.webpack.js

// make sure you have your directory and regex test set correctly!
const context = require.context('../src/', true, /.+\.test\.jsx?$/);
context.keys().forEach(context);

I tried going through various questions which are similar to mine but none actually solve my problem. Most of them have configured in a different way. I am not sure what am I doing wrong. I tried various techniques but all efforts where in vain. Test seems to work fine but the coverage always shows 100%.

Answer 1

I had a similar issue. I found that the import of the zone.js elements needed to follow a strict flow. The important item was proxy, it needed to be placed after the different test type imports.

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
require('zone.js/dist/proxy');
require('zone.js/dist/jasmine-patch');