Typescript not transpiled in Karma tests

Question

I would like to run karma tests against Typescript. I have installed karma and everything and I can acutally run tests.

However, whenever I have Typescript syntax in my *.ts files I get Syntax Errors like this:

Error: (SystemJS) SyntaxError: Unexpected token )

So obviously my TS files are not transpiled. When I use pure JS syntax, my tests run ok.

Here is my karma.conf.js file:

module.exports = function(config) {
    config.set({
        frameworks: ['systemjs', 'jasmine'],
        systemjs: {
            configFile: 'karma.system.conf.js',
            config: {
                paths: {
                    'es6-module-loader': 'src/node_modules/es6-module-loader/dist/es6-module-loader.js',
                    jasmine: 'src/node_modules/jasmine-core/lib/jasmine-core.js',
                    systemjs: 'src/node_modules/systemjs/dist/system.js',
                    'system-polyfills': 'src/node_modules/systemjs/dist/system-polyfills.js',
                    typescript: 'src/node_modules/typescript/lib/typescript.js',
                    'plugin-typescript': 'src/node_modules/plugin-typescript/lib/plugin.js'
                },
                transpiler: 'plugin-typescript'
                //transpiler: 'typescript' //I've tried both - same result
            },

            // Patterns for files that you want Karma to make available, but not loaded until a module requests them. eg. Third-party libraries.
            serveFiles: [
                'src/**/*.js',
                'src/**/*.ts'
            ]
        },
        files: [
            'test/*.ts'
        ],
        exclude: [
            'test/*.SKIP.ts'
        ]
    });
};

Many thanks for your help!

Answer 1

Here is my working configuration.

karma.config.js:

/****** karma.config.js ******/
module.exports = function(config) {
    config.set({
        //logLevel: 'DEBUG',
        urlRoot: '/',
        frameworks: ['systemjs', 'jasmine'],

        plugins: [
            'es6-module-loader',
            'karma-systemjs',
            'karma-jasmine',
        ],
        systemjs: {
            configFile: './karma.system.conf.js',
            config: {
                baseURL: './'
            },
            // Patterns for files that you want Karma to make available, but not loaded until a module requests them. eg. Third-party libraries.
            serveFiles: [
                //'apps/**/*.js',
                //'src/**/*.ts'
            ]

            // SystemJS configuration specifically for tests, added after your config file.
            // Good for adding test libraries and mock modules
            // config: {
            //     paths: {
            //         'angular-mocks': 'bower_components/angular-mocks/angular-mocks.js'
            //     }
            // }
        },
        files: [
            'test/unit/*.ts',
            'test/unit/*.js',
        ],
        exclude: [
            'test/unit/*.SKIP.ts'
        ]
    });
};

karma.system.config.js

/****** karma.system.config.js ******/
System.config({

    paths: {
        'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js',
        'jasmine': 'node_modules/karma-jasmine/*',
        systemjs: 'node_modules/systemjs/dist/system.js',
        typescript: 'node_modules/typescript/lib/typescript.js',
        'plugin-typescript': 'node_modules/plugin-typescript/lib/plugin.js'
    },

    meta: {
        '*.ts': {
            format: 'es6'
        }
    },

    packages: {
        'src/apps': { defaultExtension: 'ts' }
    },

    transpiler: 'typescript',

});

The hint from TypeScripter helped me, also I had to add the meta information. I hope this helps someone else, too.

Answer 2

SystemJS is not a configuration item as far as I know. Any special reason including that 'SystemJS:....' in your configurations? Remove that and include all files under files[]. You can use new pattern where serving and watching can be provided in a single line.