ES6 Code Coverage with Babel, JSPM, Karma, Jasmine and Istanbul

Gunnar Lium
Jul 10, 2015 · 5 min read

When living on the edge, getting the tooling of the past to work as expected requires a bit of extra work. I’ll walk you through the steps you need to get set up with a modern JavaScript toolchain with proper code coverage.

If you’re impatient, and just want to see the code, head over to https://github.com/gunnarlium/babel-jspm-karma-jasmine-istanbul.

Disclaimer: All the tools used in this post are in rapid development. It was working at the time of writing, but this can be invalidated at any time. Please let me know you if you find any issues or if you’re from the future, and can tell me that some of the more hacky bits are no longer needed. The linked GitHub repository will be kept up to date, and also includes the updated step by step guide.

The goal

Set up Karma testing with code coverage for a project that uses ES6 with Babel, JSPM and Jasmine.

The problem

Both your tests and your code written in ES6 need to be transpiled to ES5 before being run. However, you want your code coverage report to show you the files as they were before transpilation, so you recognize the content.

The solution

Use source maps to make the generated HTML match you’re original files.

Bootstrapping your project

Make sure you have jspm installed globally.

Init JSPM:

Use the defaults for everything except server baseURL, set this to src. It should look something like this:

With package.json created, also lock down the version of jspm:

As the purpose is to get tests set up, we’ll start by writing a simple test. In src/hello.spec.js, enter:

We’re using a little bit of ES6 here, to show that your tests can also be written in ES6.

Go ahead an create the implementation at the same time. In src/hello.js enter:

Setting up the test environment

With our test written, it’s time to start adding a few test related dependencies, so we can run it.

First, let’s install the basics needed for Jasmine and Karma with PhantomJS:

Also, create a simple karma.conf.js:

At this point, you should be able to run `karma start karma.conf.js`, but it will error without much explanation, as your transpiling isn’t quite ready yet. You need to install karma-babel-preprocessor:

Load the polyfill in your Karma config:

This is needed since SystemJS depends on Function.bind(), which is not supported in PhantomJS.

Set up your Babel config in .babelrc:

If you rerun Karma, your tests should be passing. If you didn’t care about HTML coverage reports, you could go on your way, and have a fully working ES6, Karma, Jasmine, JSPM and Babel setup. Not too bad!

Coverage

For coverage reports, we’ll use Istanbul and the Karma coverage plugin:

You also need to update your karma config:

If you run your tests now, you should find a coverage report in the coverage folder, with proper highlighting of covered code. However, what you’re seeing is the transpiled code:

Image for post
Image for post

For this simple code, that shouldn’t be too hard to mentally connect to your source files, but wouldn’t it better if you could be looking at ES6 code instead? Let’s fix that!

You’ll need a few more dependencies. First, we’ll install isparta, which is designed to be used with Istanbul with Babel and Karma/Karma Coverage:

isparta works as a custom instrumentor, which must be registred in Karma config:

If you’re reading this in the future, your coverage report may already be showing you ES6 code. As I’m stuck in the past, I need to use a custom version of karma-coverage. Update your package.json to use douglasduteil/karma-coverage#next:

Now you’re almost there. Your tests are running, you get coverage reports, and their all in beatiful ES6. There’s one problem, however. If you look closely at the coverage for hello.js, you’ll see that the coverage is highlighting the wrong lines:

Image for post
Image for post

We can fix this by adding source maps.

In Karma config:

Again, if you’re living in the future, this might already be working for you. If not, you need to use another custom version of a dependency, this time Istanbul:

Boom! If you run Karma again, line highlighting should also be working.

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store