Webpack Karma + Typescript with ES6

Question

I am trying to run a karma test for a library written in typescript, but keep getting Uncaught SyntaxError: Unexpected token importeven though babel is imported and configured for es2015. (Unfortunately, karma will only support ES6 starting at v2.5)

What do I need change in the configuration to make things work?

karma.conf.js:

var webpackConfig = require('./webpack.config.test');

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            {
                pattern: './config/karma.tests.js',
                watched: false
            }
        ],
        preprocessors: {
            './config/karma.tests.js': ['babel', 'webpack', 'sourcemap']
        },
        plugins: [
            'karma-webpack',
            'karma-jasmine',
            'karma-sourcemap-loader',
            'karma-chrome-launcher',
            'karma-phantomjs-launcher',
            'karma-babel-preprocessor'
        ],
        babelPreprocessor: {
            options: {
                presets: ['es2015']
            }
        },
        webpack: webpackConfig,
        webpackMiddleware: {
            stats: 'errors-only'
        },
        webpackServer: {
            noInfo: true
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['PhantomJS'],
        singleRun: true
    });
};

webpack.config.test.js

var webpack                         = require('webpack');
var helpers                         = require('./helpers');

var config = {
    devtool: 'inline-source-map',
    resolve: {
        root: helpers.root('src'),
        extensions: [ '', '.js', '.ts' ]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                include: helpers.root('src'),
                exclude: helpers.root('node_modules')
            }
        ]
    },
}

module.exports = config;

tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
        "declaration": true,
        "declarationDir": "declarations",
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "outDir": "dist",
        "preserveConstEnums": true,
        "removeComments": false,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,        
        "target": "es6",
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

Answer 1

Hope you I can solve your problem here. I think that webpack config needs loaders to convert the ES6 files, so you need loaders in your webpack.config.test.js file.

var webpack = require('webpack');
var helpers = require('./helpers');

var config = {
    devtool: 'inline-source-map',
    resolve: {
        root: helpers.root('src'),
        extensions: [ '', '.js', '.ts' ]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                include: helpers.root('src'),
                exclude: helpers.root('node_modules')
            },
                test: /\.js$/,
                exclude: helpers.root('node_modules'),
                loader: 'babel-loader'
        ]
    },
}

module.exports = config;