Sometimes you’re so trapped in the daily grind, getting things done, adding value to your project every day that you don’t feel like you have time to get around and do that teeny tiny improvement that could make your life as a developer so much easier. So you put it in your ever growing TODO-list and you tell yourself, I’ll do it soon, when I have some time to spare. In practice that usually results in never implementing that improvement.

That’s why I like to book 30 minutes a week with myself for improvements, I add it to my calendar and really force myself to follow through. This week I did something that I had been putting off for a long time: Setting up my angular tests with karma so that I can write them in ES6 (the latest version of JavaScript). After I was done it was so easy that I couldn’t believe I hadn’t done it sooner. And now I can enjoy ES6 both in my production and test code. Much less friction than constantly jumping between ES6 and ES5 like I did before.

I expect that you are using Karma as test runner and have node and npm available in your machine

These are the steps that you need to follow in order to enable ES6 in your Angular tests:

1. Install the Karma-Babel preprocessor
2. Setup a Babel configuration
3. Update your Karma configuration with the preprocessor

1.Install the Karma Babel Preprocessor

You can install the Karma-Babel preprocessor via npm:

PS> npm install karma-babel-preprocessor --save-dev

2. Setup a Babel Configuration

In its latest version Babel, the ES6/ES7 to ES5 transcompiler, has been redesigned to use a plugin model where, instead of having a built-in configuration, you need to pick and choose which plugins (or features) to enable. For instance, your .babelrc configuration file could look like this if you only wanted to enable ES6 arrow functions:

{
  "plugins": ["transform-es2015-arrow-functions"]
}

A neat option is to use a preset which is essentially a group of predefined plugins. The es2015-preset, for example, contains all ES6 features.

The simplest way to configure your tests to run ES6 is to use this preset. You can add it to your project via npm:

PS> npm install babel-preset-es2015 --save-dev

3. Update Your Karma Configuration with the Babel Preprocessor

Once you have the preprocessor and the preset installed in your project the next step is to tell Karma to start using it by updating your karma configuration file (usually called karma.conf.js):

module.exports = function(config) {
  config.set({
    // Probably you have a lot of configurations here
    // with your source code files, third party libraries, specs
    // reporters, frameworks, etc
    // After that you can include the following configurations

    // The preprocessors
    preprocessors: {
      'src/**/*.js': ['babel'],
      'test/**/*.js': ['babel'],
    },

    // Babel preprocessor specific configuration
    babelPreprocessor: {
      options: {
        presets: ['es2015'], // use the es2015 preset
        sourceMap: 'inline', // inline source maps inside compiled files
      },
      filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js')
      },
      sourceFileName: function(file) {
        return file.originalPath
      },
    },
  })
}

If you want to learn more about the preprocessor configuration you can take a look at the Karma documentation, and if you want to learn more about the babel preprocessor itself you can check its GitHub repository.

A couple of things to remember:

• Don’t preprocess third party libraries, it will slow down your tests. So be careful when specifying the blobs in the preprocessor section of the config file
• Remember to add babel polyfills just like you’d do with your production code. Babel doesn’t compile methods like Object.assign, it polyfills them. You can install it via npm: npm install babel-polyfill --save-dev and add a reference to dist/polyfill.js or if you are already using babel-polyfill bower package add a reference to bower_components/babel-polyfill/browser-polyfill.js.

Happy testing with ES6! :)