Test Service-Klasse mit es6 in Winkel

Question

Ich habe eine service class in es6 für eine eckige Anwendung geschrieben. Es fordert eine api mit http für Daten an. Jetzt möchte ich den Dienst über mocha and chai testen. Hier ist, was Service wie folgt aussieht:

"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 
    }) 
} 

Jetzt habe ich gerade versuche die Testsuite zu bekommen und läuft, aber ich erhalte die folgende Fehlermeldung, wenn ich betreibe karma start:

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

, die an den Exportbefehl des Dienstes ist. Müsste ich einige Konfigurationsänderungen vornehmen, damit dies funktioniert?

Answer 1

Ich denke, dass Sie Ihre Dateien in einem browserlesbaren Format vorverarbeiten müssen. Dies kann beispielsweise unter Verwendung der karma-rollup-preprocessor, rollup-plugin-babel und der es2015-rollup Babel-Voreinstellung erfolgen. So Ihre Karma.conf.js Datei in etwa wie folgt aussehen:

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 */ 
    }); 
}; 

Dies ist nur ein Weg, Weg, es zu tun, aber Ihre Dateien erhalten gebündelt und vorverarbeitet in den Browser freundliche es5iife s vor von Karma ausgeführt werden. Dies sollte die beseitigen, die Sie bekommen haben. Hoffe das hilft.