Test Coverage with Karma

Adding the Karma Test Coverage Tool

I got tired of flailing around in the dark, so after turning on the lights, I started looking into test coverage tools.

A few sources recommended Karma, so I went for it. It’s good (sorry).

1

npm install karma karma-coverage

My config:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'app/scripts/*.js',
      'test/spec/*.js'
    ],
    browsers: [PhantomJS],
    singleRun: true,
    reporters: ['progress', 'coverage'],
    preprocessors: { '*.js': ['coverage'] }
  });
};

But when I run it, I get provider errors.

1
2
3
4
5
6
7


$ node_modules/.bin/karma start my.conf.js 
    node_modules/di/lib/injector.js:9
      throw error('No provider for "' + name + '"!');
      ^

Error: No provider for "framework:jasmine"! (Resolving: framework:jasmine)
    at error (/home/matt/projects/javascript/centipede/node_modules/di/lib/injector.js:22:12)

SO says I’m missing a dependency.

You have not yet installed karma-jasmine node module and its not listed in devDependencies section in your package.json

Okay.

1
2
3
4
5
6
7


npm install -D karma-jasmine
node_modules/.bin/karma start my.conf.js 
module.js:487
    throw err;
    ^

Error: Cannot find module 'jasmine-core'

-.-

Dependencies all the way down.

I set up package.json with an empty dependencies array, so the npm install -D commands will add the appropriate packages:

1
2
3
4
5
6


{
  "name": "centipede",
  "version": "0.0.0",
  "private": true,
  "dependencies": {}
}

Then after running npm install karma karma-coverage karma-jasmine jasmine-core, we end up with

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{
  "name": "centipede",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "karma": "^2.0.0",
    "karma-coverage": "^1.1.1"
  },
  "devDependencies": {
    "jasmine-core": "^3.1.0",
    "karma-jasmine": "^1.1.1"
  }
}

Progress!

1
2
3
4
5
6


$ node_modules/.bin/karma start my.conf.js 
17 03 2018 07:44:43.278:INFO [karma]: Front-end scripts not present. Compiling...
17 03 2018 07:44:43.672:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
17 03 2018 07:44:43.673:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
17 03 2018 07:44:43.673:ERROR [launcher]: Cannot load browser "PhantomJS": it is not registered! Perhaps you are missing some plugin?
17 03 2018 07:44:43.674:ERROR [karma]: Found 1 load error

Changing browsers: [‘PhantomJs’] to browsers: [‘Chrome’] results in the same error message complaining about Chrome instead.

According to this issue, I apparently need to add karma plugins manually:

1

plugins = ['karma-jasmine', 'karma-phantomjs-launcher'];

Config is now:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'app/scripts/*.js',
      'test/spec/*.js'
    ],
    browsers: ['Chrome'],
    plugins : ['karma-jasmine', 'karma-phantomjs-launcher'],
    singleRun: true,
    reporters: ['progress', 'coverage'],
    preprocessors: { '*.js': ['coverage'] }
  });-test-coverage
};

New error, more missing libs

1
2
3
4
5


$ node_modules/.bin/karma start my.conf.js 
17 03 2018 07:48:00.466:ERROR [plugin]: Cannot find plugin "karma-phantomjs-launcher".
  Did you forget to install it?
  npm install karma-phantomjs-launcher --save-dev
...

Adding the plugin:

1

npm install karma-phantomjs-launcher --save-dev

This appeared in the package.json:

1

"karma-phantomjs-launcher": "^1.0.4"

Once more unto:

1
2
3
4
5
6


$ node_modules/.bin/karma start my.conf.js 
17 03 2018 07:51:07.492:ERROR [preprocess]: Can not load "coverage", it is not registered!
  Perhaps you are missing some plugin?
17 03 2018 07:51:07.505:ERROR [reporter]: Can not load reporter "coverage", it is not registered!
  Perhaps you are missing some plugin?
...

Found this:

I forgot to add karma-coverage to the list of plugins. This should be added to the sample config in the readme.

Another issue saying I’m missing a plugin. Added it.

1

plugins : ['karma-jasmine', 'karma-phantomjs-launcher', 'karma-coverage'],

Twice more unto:

1
2
3
4
5


$ node_modules/.bin/karma start my.conf.js 
17 03 2018 07:52:04.757:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
17 03 2018 07:52:04.760:INFO [launcher]: Launching browser Chrome with unlimited concurrency
17 03 2018 07:52:04.761:ERROR [launcher]: Cannot load browser "Chrome": it is not registered! Perhaps you are missing some plugin?
17 03 2018 07:52:04.761:ERROR [karma]: Found 1 load error

I guessed that I needed to change karma-phantomjs-launcher to karma-chrome-launcher in the plugins list.

1
2
3
4
5
6
7


$ node_modules/.bin/karma start my.conf.js 
17 03 2018 07:53:15.161:ERROR [plugin]: Cannot find plugin "karma-chrome-launcher".
  Did you forget to install it?
  npm install karma-chrome-launcher --save-dev
17 03 2018 07:53:15.215:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
17 03 2018 07:53:15.215:INFO [launcher]: Launching browser Chrome with unlimited concurrency
17 03 2018 07:53:15.216:ERROR [karma]: Found 1 load error

(╯°□°）╯︵ ┻━┻

ヘ(´° □°)ヘ┳━┳

1

npm install karma-chrome-launcher --save-dev

And now in devDependencies, a wild "karma-chrome-launcher": "^2.2.0" appears!

Then things started to happen! A browser window opened and closed right away, but I still can’t see coverage because the tests are not behaving the same as they were with Jasmine through the browser. This is probably because of how they’re being loaded.

Looks like I have some test errors to resolve!

Adding the Karma Test Coverage Tool#

Adding the Karma Test Coverage Tool