Babel [karma-babel-preprocessor] Not Converting ES6->ES5 for Karma Tests

Question

We have installed karma, which is using mocha and chai for tests. We are trying to integrate babel straight into karma using karma-babel-preprocessor, to do the converting of our ES6 files into ES5 to be run. Using mocha individually works with babel, i.e. a mocha test command, but we try to use karma instead it doesn't work.

karma.conf.js snippet:

frameworks: ['mocha', 'chai'],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
   'src/**/*.js': ['babel'],
   'test/**/*_spec.js': ['babel']
},

"babelPreprocessor": {
    options: {
        presets: ['es2015'],
        sourceMap: 'inline'
    },   
    filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
    },
    sourceFileName: function(file) {
        return file.originalPath;
    }
},

// list of files / patterns to load in the browser
files: [
  'src/**/*.js',
  'test/**/*_spec.js'
],

package.json snippets:

"scripts": {
  "test": "./node_modules/karma/bin/karma start karma.conf.js"
},

"babel": {
  "presets": ["es2015"]
},

"devDependencies": {
  "babel-preset-es2015": "^6.1.18",
  "chai": "^3.4.1",
  "karma": "^0.13.15",
  "karma-babel-preprocessor": "^6.0.1",
  "karma-chai": "^0.1.0",
  "karma-mocha": "^0.2.1",
  "karma-phantomjs-launcher": "^0.2.1",
  "phantomjs": "^1.9.18",
  "redux": "^3.0.4"
}

We get the following error:

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: exports
  at Users/alexgurr/BT/FutureVoice/trunk/Portal/server/src/login.es5.js:3

When we evaluate the JS files being loaded, they haven't been converted to ES5, hence the syntax 'export' is still present.

We don't want to use any other frameworks for conversion, ie. webpack, browserify etc.

Thanks!

Answer 1

The problem is that you still didn't bundle/wrap your files to be able to execute CommonJS modules in the browser (because Babel transpile es2015 modules into CommonJS and CJS is default module system for node, not for browsers where Karma run its tests). So your options are:

• Use karma-commonjs wrapper (if you want to add all your dependencies manualy)
• Use browserify bundler with babelify plugin
• Use webpack bundler

Answer 2

I've been struggling for the past few hours with the same issue. I'm not sure if your use case is the same as mine, but I finally figured it out.

Code under test src/foo.js:

var foo = "foo value";
export default foo;

Test code tests/foo.spec.js:

import foo from "../src/foo.js";
describe('Foo', function() {
    it('should be "foo value"', function() {
        expect(foo).toBe('foo value');
    });
});

karma.conf.js file before:

{
    // other configs
    files: [
       'src/**/*.js',
       'tests/**/*.spec.js',
    ],
    preprocessors: {
       'src/**/*.js': ['babel'],
       'tests/**/*.spec.js': ['babel'],
    },

    babelPreprocessor: {
        options: {
            "presets": ["es2015"]
        }
    }
}

This yielded the ReferenceError: Can't find variable: exports error you saw.

The fix:

• npm install --save-dev babel-plugin-transform-es2015-modules-umd

• Add following to karma.conf.js

  babelPreprocessor: {
      options: {
          "presets": ["es2015"],
          "plugins": ["transform-es2015-modules-umd"]
      }
  }
  

Then the error went away.

Also, note that the following export declarations (which I believe should be correct) do not work.

// exports an object
export default var foo = "something";

// exports undefined
export var bar = "something else";