PhantomJS: SyntaxError: Use of reserved word 'import'

[Rolandisimo]

Having trouble setting up Karma. Help would be much appreciated.
It seems that the preprocessors are not working in my setup.

karma.config.js

var WebpackConf = require('./webpack.config.js');

module.exports = function(config) {
    config.set({
        browsers: ['PhantomJS'],
        plugins: [
            'karma-babel-preprocessor', 'karma-jasmine', 'karma-webpack', 'karma-phantomjs-launcher'
        ],
        files: [
            {
                pattern: 'spec/*.js',
                watched: false
            }
        ],
        frameworks: ['jasmine'],
        preprocessors: {
            'test-context.js': ['webpack'],
            './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;
                }
            },
            webpack: WebpackConf,
            webpackServer: {
                noInfo: true
            }
        }
    });
};

webpack.config.js

var path = require('path');
var projectRoot = __dirname;

var WebpackConf = {
    // Must be an absolute path or watching feature will fail
    context: path.join(projectRoot, 'app'),
    entry: ['babel-polyfill', './index.js'],
    output: {
        path: path.join(projectRoot, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'stage-0']
                }
            }, {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    },
    resolveLoader: {
        root: [path.join(projectRoot, 'node_modules')]
    },
    resolve: {
        root: [path.join(projectRoot, 'node_modules')]
    }
};
module.exports = WebpackConf;

test-context.js

var context = require.context('./spec', true, /spec\.js$/);
context.keys().forEach(context);

package.json

  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-register": "^6.9.0",
    "css-loader": "^0.23.1",
    "jasmine": "^2.4.1",
    "jasmine-core": "^2.4.1",
    "jasmine-es6": "^0.1.10",
    "karma": "^1.1.0",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.1",
    "karma-webpack": "^1.7.0",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.1",
    "webpack-validator": "^2.1.3"
  }

And when running

karma start karma.config.js

it gives me this –

02 07 2016 16:07:22.882:WARN [karma]: No captured browser, open http://localhost:9876/
02 07 2016 16:07:22.888:INFO [karma]: Karma v1.1.0 server started at http://localhost:9876/
02 07 2016 16:07:22.888:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
02 07 2016 16:07:22.898:INFO [launcher]: Starting browser PhantomJS
02 07 2016 16:07:23.459:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#jJtIc-CBaMX8QwxPAAAA with id 49932002
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'import'
  at spec/run.js:1

The struggle is real.... 🔨
I want to be able to run the tests with ES6. Any ideas how to fix this?

[MikaAK]

I've also run into issues with importing using karma-babel-preprocessor. I would use webpack as a preprocessor for your spec files instead of babel. Some imports may also work differently due to enhanced-resolve being used in webpack

[DanielaValero]

I also could not make it work with karma-babel-preprocessor and switched back to webpack as preprocessor.

When you do so, make sure you don't send files to your entry in webpack when running the tests, as the files will be set in your karma.conf

[MikaAK]

Closing as webpack should be used as your preprocessor if you want to import. Feel free to comment with otherwise and I can reopen if necessary

[Rolandisimo]

Okeey, thanks for the tips all. 👍 :)