使用角度为es6的测试服务类

Question

我有一个用es6编写的service class用于角度应用程序。 它正在使用http请求api数据。 现在我想通过mocha and chai测试服务。 这是什么服务看起来像：

"use strict";
const HTTP = new WeakMap();
class EventService{
    constructor($http, moment){
        HTTP.set(this, $http);
        this.$http = $http;
        this.url = 'http://test/api/events?';
        this.apiKey = '1234asd';
    }

    getEvents(){
        return this.$http({
            url: this.url + 'from=' + this.from + '&to=' +  this.to + '&apiKey=' + this.apiKey,
            method: "GET",
            crossDomain: true,
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            }
        });
    }
}


EventService.$inject = ['$http', 'moment'];

export default EventService;

Karma.conf.js：

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: ['mocha', 'chai'],


    // list of files / patterns to load in the browser
    files: [
      'node_modules/angular/angular.js',
      'node_modules/angular-mocks/angular-mocks.js',
      'node_modules/moment/moment.js',
      'node_modules/angular-moment/angular-moment.js',
      'lib/shared/services/events-service.js',
      'tests/*.js'
    ],


    // 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,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

现在我只是想让测试套件启动并运行，但是，当我运行karma start时，我收到以下错误：

Uncaught SyntaxError: Unexpected token export
  at lib/shared/services/events-service.js

哪个是服务的导出命令。 我是否必须进行一些配置更改才能使其正常工作？

Answer 1

我认为您需要将文件预处理为浏览器可读格式。 例如，可以使用karma-rollup-preprocessor ， rollup-plugin-babel和es2015-rollup babel预设来完成此操作。 所以你的Karma.conf.js文件看起来如下所示：

var babel = require('rollup-plugin-babel');

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['mocha', 'chai'],
        files: [
            'node_modules/angular/angular.js',
            'node_modules/angular-mocks/angular-mocks.js',
            'node_modules/moment/moment.js',
            'node_modules/angular-moment/angular-moment.js',
            'lib/shared/services/events-service.js',
            'tests/*.js'
        ],
        preprocessors: {
            'lib/shared/services/events-service.js': ['rollup'],
            'tests/*.js': ['rollup']
        },
        rollupPreprocessor: {
            plugins: [
                babel({
                    'babelrc': false,
                    'presets': ['es2015-rollup']
                })
            ],
            format: 'iife',
            moduleName: '<your_project>',
            sourceMap: 'inline'
        },
        /* other config options */
    });
};

这只是一种方法，但是在Karma运行之前，您的文件将被捆绑并预处理成适合浏览器的es5 iife 。 这应该消除你一直得到的Uncaught SyntaxError 。 希望这可以帮助。