如何使用 karma-systemjs 导入打字稿文件？

Question

背景

我正在尝试为 Angular 1x 应用程序设置测试运行程序，但我无法让 Karma 与 Systemjs 和 Typescript 一起使用。

测试是用 Typescript 编写的，我们使用 Systemjs 导入使用 ES6 模块的文件。大多数文件不使用 ES6 模块。

我没有使用像 karma-typescript 这样的 karma prepreocessor，而是尝试使用 Systemjs 来转换我的 Typescript。那是错误的方法吗？似乎没有任何转译发生！

错误

当我运行karma start 时，脚本在导入打字稿命名空间时失败：

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

这是我的 karma.conf.js 文件，基于 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 配置：

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

Answer 1

尝试在您的 systemjs 配置 (config.js) 中添加 transpiler 属性：

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