Can't Get Karma Tests to Run (using Webpack & Babel)

Question

As the title explains, I cannot get my Karma tests to run.

I am using Webpack and Babel.

I get the following error:

12 06 2017 16:27:40.868:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
12 06 2017 16:27:40.870:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
12 06 2017 16:27:40.881:INFO [launcher]: Starting browser PhantomJS
12 06 2017 16:27:44.699:INFO [PhantomJS 2.1.1 (Windows 7 0.0.0)]: Connected on socket dbtwk1MmIabHeIW_AAAA with id 89862944
PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
SyntaxError: Use of reserved word 'import'
at js/tests.webpack.js:50

My setup is based on tutorials I've read about how to use Webpack, ES2015, Angular, and Karma together (tutorials like this one ), but I can never get it to work. Can someone please help?

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']
        },
        plugins: [
            'karma-webpack',
            'karma-jasmine',
            'karma-phantomjs-launcher',
            'karma-babel-polyfill',
            'karma-babel-preprocessor',
            'babel-preset-es2015'
        ],
        browsers: ['PhantomJS'],
        colors: true,
        singleRun: true,
        webpack: webpackConfig
    });
};

webpack.test.js:

'use strict';
var webpack = require('webpack');
module.exports = function makeWebpackConfig(options) {
    var config = {};
    config.entry = {};
    config.output = {}
    config.devtool = 'inline-source-map';
    // Initialize module
    config.module = {
        preLoaders: [{
            test: /\.js$/,
            exclude: [
                /node_modules/,
                /\.test\.js$/
            ],
            loader: 'babel-loader'
        }],
        loaders: [{
            test: /\.js$/,
            loader: 'babel?optional=runtime',
            query: {
                presets: ['es2015']
            },
            exclude: /node_modules/
        }]
    };
    return config;
};

js/tests.webpack.js:

import 'angular';
import 'angular-mocks/angular-mocks';

var testsContext = require.context(".", true, /.test$/);
testsContext.keys().forEach(testsContext);

testfile.test.js:

describe('test', function() {
    beforeEach(() => {
    });
    it('lol', function() {
        expect(1).toEqual(1);
    });
});

devDependencies in package.json:

"devDependencies": {
    "angular": "^1.5.7",
    "angular-mocks": "^1.6.4",
    "angular-ui-bootstrap": "^2.5.0",
    "angularjs-slider": "^5.8.0",
    "babel": "^6.23.0",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.10.4",
    "babel-eslint": "6.1.2",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^3.3.6",
    "eslint": "^3.4.0",
    "eslint-config-google": "0.6.0",
    "eslint-plugin-angular": "1.3.1",
    "eslint-plugin-babel": "3.3.0",
    "eslint-plugin-fp": "^2.2.0",
    "eslint-plugin-jasmine": "^1.8.1",
    "eslint-plugin-json": "1.2.0",
    "eslint-plugin-protractor": "1.27.1",
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "0.7.0",
    "grunt-contrib-less": "~0.8.3",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-watch": "1.0.0",
    "grunt-jsonlint": "1.0.7",
    "grunt-karma": "^2.0.0",
    "grunt-notify": "^0.4.5",
    "grunt-replace": "^1.0.1",
    "grunt-run": "^0.6.0",
    "grunt-shell": "1.3.0",
    "grunt-usemin": "3.1.1",
    "http-server": "^0.9.0",
    "isparta-instrumenter-loader": "^1.0.1",
    "jasmine-core": "^2.6.2",
    "jquery": "^2.2.4",
    "karma": "^1.7.0",
    "karma-babel-polyfill": "0.0.5",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-chrome-launcher": "^2.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "load-grunt-config": "^0.17.2",
    "load-grunt-tasks": "^3.3.0",
    "webpack": "^1.9.11"
  }

Answer 1

did https://github.com/webpack/webpack/issues/5059#issuecomment-308178331

query: {
    presets: [
      'es2015', {
      'modules': false
     }]
 }

work for you?