Can't run Karma tests, "Use of reserved word 'import'"

[ToWelie89]

I'm submitting a bug report

Webpack version:
^1.13.1

Webpack Karma version:
^1.7.0

Karma version:
^0.13.22

Please tell us about your environment:
Windows

Browser: [PhantomJS2]

Current behavior:

I get the error "SyntaxError: Use of reserved word 'import'" when trying to run my tests. It seems Babel never transpiles my code.

Expected/desired behavior:

To not get any errors :P

karma.conf.js

var webpackConfig = require('./webpack.test');
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        reporters: ['progress'],
        files: [
            'js/tests.webpack.js'
        ],
        preprocessors: {
            'js/tests.webpack.js': ['webpack', 'sourcemap']
        },
        browsers: ['PhantomJS2'],
        colors: true,
        singleRun: true,
        logLevel: config.LOG_DEBUG,
        devtool: 'inline-source-map',
        webpack: webpackConfig,
        webpackMiddleware: {
            noInfo: 'errors-only'
        }
    });
};

webpack.test.js

var webpack = require('webpack');
module.exports = function () {
    var webpackConfig = {
        debug: true,
        entry: {},
        output: {},
        plugins: [],
        devtool: 'inline-source-map',
        module: {
            preLoaders: [],
            loaders: [{
                test: /\.js$/,
                loaders: ['babel'],
                exclude: /node_modules/
            }]
        }
    };
    return webpackConfig;
};

js/tests.webpack.js

import 'angular';
import 'angular-mocks/angular-mocks';
const testsContext = require.context('./', true, /.test$/);
testsContext.keys().forEach(testsContext);

Is there something wrong with the loader I am using? I have tried for 2 days to get this to work, I've read every issue I can find regarding this on Stack overflow but whatever I do it doesn't want to work :( If anyone can help me with this I will be eternally grateful.

[chrisdeely]

I think you need to provide a preset for Babel, I'm sot sure if does anything unless you tell it what to do.

For instance, I use the following:

loader: 'babel-loader',
  options: {
    presets: [
      ['es2015', {modules: false}]
    ]
  }

I am using webpack 2, however so the config syntax is different. Also, I'd recommend updating your karma install, but not sure that matters in this case.

[nitinsurana]

I had a similar issue reported - #297.
The problem is not really related to Karma, but the way we're importing webpackConfig in Karma.
Changing to

var webpackConfig = require('./webpack.test')();  //notice the function invocation

should make it work.

[sagorshkov]

@nitinsurana I'm sorry, but I cant understand. If webpack config file exports a function which depends of env of argv argument the hack above will not work. You will have to do something like this:
var webpackConfig = require('./webpack.test')(env, argv);
Looks like karma CLI arguments should be parsed and should be able in the karma.config.js
I have to change some webpack configs to compel my tests to work, how can I do this in the case if my webpack config exports a function?

[nitinsurana]

@sagorshkov you're right. The Karma CLI arguments needs to be parsed & passed if required in webpack for some test configuration. Fortunately, in my case, the tests were not relying on the env. I had used env in webpack for only modifying the entry point which in relation to Karma doesn't matter, since Karma will change entry point accordingly.