Karma coverage always coming empty - unit-testing

Question

I've been trying to run karma coverage for a couple of days now only to find an empty blank page as below.
Here's my configuration:
var path = require('path');
var webpackConfig = require('./webpack.common');
module.exports = function (config) {
var _config = {
basePath: '',
frameworks: ['jasmine'],
files: [
{ pattern: './karma-shim.js', watched: false }
],
exclude: [],
preprocessors: {
'./karma-shim.js': ['webpack', 'sourcemap', 'coverage']
},
client: {
captureConsole: false
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
coverageReporter: {
dir: 'coverage/',
reporters: [{
type: 'json',
dir: 'coverage',
subdir: 'json',
file: 'coverage-final.json'
}]
},
remapIstanbulReporter: {
src: 'coverage/json/coverage-final.json',
reports: {
lcovonly: 'coverage/json/lcov.info',
html: 'coverage/html',
'text': null
},
timeoutNotCreated: 1000, // default value
timeoutNoMoreFiles: 1000 // default value
},
webpackServer: {
noInfo: true // please don't spam the console when running in karma!
},
reporters: ["mocha", "coverage", "karma-remap-istanbul"],
port: 9876,
colors: true,
logLevel: config.LOG_ERROR,
autoWatch: false,
browsers: ['PhantomJS'], // you can also use Chrome
singleRun: true
};
config.set(_config);
};
And here's my karma-shim.js file
Error.stackTraceLimit = Infinity;
require('es6-shim');
require('reflect-metadata');
require('ts-helpers');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var appContext = require.context('./app', true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
var testing = require('#angular/core/testing');
var browser = require('#angular/platform-browser-dynamic/testing');
testing.setBaseTestProviders(browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
Folder Structure is as follows:
Any idea what am i missing here? Help much appreciated.
Thanks

Answer 1

Your karma config is clearly missing a reference to the source.
Please modify config as follows:
module.exports = function (config) {
var _config = {
[...]
preprocessors: {
// Remove coverage as preprocessor for your tests -
// Istambul (runs coverage behind the scene for karma) will
// instrumentate this
'./karma-shim.js': ['webpack', 'sourcemap'],
// Add path to your source (.js or .ts - depands on your project)
'./index.ts': [ 'coverage' ]
},
[...]
},
[...]
}
Explanation: coverage tests your code against your unit tests - you need to supply entry point for your code to get Karma analyse coverage.
Extras - adding karma-coverage plugin:
module.exports = function (config) {
var _config = {
[...]
plugins: [
require( 'karma-coverage' )
],
[...]
},
[...]
}
Extras - karma & typescript files:
module.exports = function (config) {
var _config = {
[...]
plugins: [
require( '#angular/cli/plugins/karma' )
],
[...]
},
[...]
preprocessors: {
'./src/test.ts': [ '#angular/cli' ],
'./index.ts': [ 'coverage' ]
},
[...]
mime: {
'text/x-typescript': [ 'ts', 'tsx' ]
},
[...]
}

Answer 2

I've got the same problem, and I've tried everything I could find on the Internet, but nothing worked. So I solved it in the following HARD but VERY SIMPLE way:
Create a new folder, or delete all the content of the existing folder of your project (YOU'D NEED TO ADD, COMMIT, AND PUSH EVERYTHING IF YOU DELETE THE CONTENT), and then clone the same project all over again.
As usual, run command "npm install".
Then copy the following karma.conf.js file content to replace your own karma.conf.js file content:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: false,
});
};
Most likely, it's the 'coverage' part that is wrong in
dir: require('path').join(__dirname, 'coverage'),
In my case, the original setup was
dir: require('path').join(__dirname, './../coverage/360-app'),
which gave me a hard time. But since you set it up wrong in the beginning, it'd be hard to get it right even if you change it.
After I did the re-clone, I started to have everything I want:
Good luck to everyone.