Use of reserved word 'class' with karma and webpack

Question

I'm building a project with angularJS in ES6.

I'm trying to config karma test runner and coverage with istanbul.

When I try to lauch unit test with Karma, I've following error :

Use of reserved word 'class'

This is my karma config file :

var path = require('path');

module.exports = function (config) {
    config.set({

        basePath: '',

        plugins: [
            'karma-coverage',
            'karma-jasmine',
            'karma-phantomjs-launcher',
            'karma-webpack',
            'karma-coverage-istanbul-reporter'
        ],

        frameworks: ['jasmine'],

        files: [
            'tests/index.js'
        ],

        preprocessors: {
            'tests/index.js': 'webpack'
        },

        webpack: {
            module: {
                rules: [{
                    test   : /\.js$/,
                    use    : {
                        loader: 'istanbul-instrumenter-loader',
                        query : {
                            esModules: true
                        }
                    },
                    include: path.resolve('src/')
                }, {
                    test: /\.html$/, loaders: ["html-loader"]
                }, {
                    test: /\.less$/,
                    use : [{
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }]
                }, {
                    test  : /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
                    loader: 'url-loader'
                }]
            }
        },

        reporters: ['progress', 'coverage-istanbul'],

        coverageIstanbulReporter: {
            reports              : ['text-summary'],
            fixWebpackSourcePaths: true
        },

        port       : 9876,
        colors     : true,
        logLevel   : config.LOG_INFO,
        autoWatch  : true,
        browsers   : ['PhantomJS'],
        singleRun  : true,
        concurrency: Infinity,
    })
};

And this is my tests/index.js file

// requires all tests in `project/test/src/components/**/index.js`
const tests = require.context('./specs/', true, /index\.js$/);
tests.keys().forEach(tests);

// requires all components in `project/src/components/**/index.js`
const components = require.context('../src/', true, /\.js$/);
components.keys().forEach(components);

Did I miss something ?

Thanks.

Answer 1

PhantomJS currently doesn't support es2015+.

So you either need a transpiler loader like babel-loader, or you need to install PhantomJS beta which supports new syntax.