How to import typescript files with karma-systemjs?

Question

Background

I'm trying to set up a test runner for an Angular 1x app, but I'm not able to get Karma to work with Systemjs and Typescript.

The tests are written in Typescript, and we use Systemjs to import files that use ES6 modules. Most files do not use ES6 modules.

Instead of using a karma prepreocessor like karma-typescript, I'm trying to use Systemjs to transpile my Typescript. Is that the wrong way to go? It doesn't seem like any transpiling is happening!

The error

When I run karma start, the script fails on the import of a typescript namspace:

import core = myApp.core;

Chrome 52.0.2743 (Windows 7 0.0.0) ERROR
  Error: (SystemJS) SyntaxError: Unexpected token import
        Evaluating app/scripts/site/core/components/settingsMenu/settingsMenu.spec.ts
        Error loading app/scripts/site/core/components/settingsMenu/settingsMenu.spec.ts

Here is my karma.conf.js file, based on this example.

// Karma configuration
// Generated on Thurs Apr 13 2017

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

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: './',

        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['systemjs', 'jasmine'],

        systemjs: {
            configFile: 'config.js',
            config: {
                paths: {
                    'systemjs': 'app/vendor/systemjs/system.src.js',
                    'system-polyfills': 'app/vendor/systemjs/system-polyfills.src.js',
                    'typescript': '/node_modules/typescript/lib/typescript.js'
                },
                packages: {
                    'app': {
                        defaultExtension: 'ts'
                    }
                },
                transpiler: 'typescript'
            },
            serveFiles: [
                'app/scripts/**/*!(spec).ts'
            ]
        },

        // list of files / patterns to load in the browser
        files: [
            { pattern: 'app/scripts/**/*.spec.ts' }
        ],


        // list of files to exclude
        exclude: [],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {

        },

        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress'],


        // web server port
        port: 9876,


        // enable / disable colors in the output (reporters and logs)
        colors: true,


        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,


        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,


        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['Chrome'],


        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false
    });
};

systemjs config:

System.config({
    baseURL: './',
    defaultJSExtensions: true
});

Answer 1

Try adding the transpiler property in your systemjs config (config.js):

System.config({
   baseURL: './',
   defaultJSExtensions: true,
   transpiler: 'typescript'
});