Angular 1.5 Karma Unit Test lädt ng-mock zweimal

Question

Ich habe eine Web-App geschrieben mit Typescript 2.4.2, kompiliert von der neuesten Webpack-Version (2.7.0).

Ich bin dabei, Karma-Tests mit Jasmine als Assertion-Bibliothek hinzuzufügen.

Das ist meine Karma-Konfigurationsdatei:

'use strict'; 

const webpack = require('./webpack.config'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 
const _ = require('lodash'); 

_.remove(webpack.plugins, plugin => plugin instanceof CleanWebpackPlugin); 

webpack.module.rules.forEach(rule => { 
    if (rule.loader === 'ts-loader') { 
     rule.exclude = /sg\.d\.ts/; 
    } 
}); 

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

     mime: { 
      'text/x-typescript': ['ts','tsx'] 
     }, 

     // 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: ['jasmine'], 

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

     preprocessors: { 
      "app/scripts/**/*.test.ts": ["webpack"] 
     }, 

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

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

     // 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: ['jsdom', /*'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 
    }) 
} 

Auf der ersten Testreihe habe ich keine Probleme habe, sieht es so etwas wie diese:

import { default as moduleName } from "../module"; 
import { ListService, IListRequest } from "./listService"; 
import * as angular from 'angular'; 
import "angular-mocks"; 
import "jasmine"; 

const { module, inject } = angular.mock; 

describe("List service",() => { 

    let serviceToTest: ListService; 

    let rootScope: ng.IRootScopeService; 
    let httpBackend: ng.IHttpBackendService; 

    beforeEach(module(moduleName)); 

    beforeEach(() => { 
     inject(['$rootScope', '$httpBackend', ListService.SERVICE_NAME, 
      ($rootScope: ng.IRootScopeService, $httpBackend: ng.IHttpBackendService, listService: ListService) => { 
       serviceToTest = listService; 
       rootScope = $rootScope; 
       httpBackend = $httpBackend; 
      }]); 
    }); 

    it("service should not be null",() => { 
     expect(serviceToTest).toBeDefined(); 
    }); 

    // Other tests 
}); 

Das Problem begann, als ich mit dem Schreiben versucht, eine Testsuite für einen anderen Dienst:

Wie Sie sehen können, ist die zweite Testsuite leer.

Mein Problem ist, dass, sobald ich diese zweite Suite hinzufüge, Angular beginnt, Fehler zu werfen - es versucht, Angular und ng-Mock zweimal zu laden, einmal für jede neue Datei, die sie importiert.

Der Fehler, der ausgelöst wird, ist:

Error: [$injector:modulerr] Failed to instantiate module ngLocale due to: RangeError: Maximum call stack size exceeded

Eine schnelle Google-Suche auf der Angelegenheit vielen Thread erzeugt - das sagte Fehler erscheint, wenn Karma Lasten zweimal ng-Mock. Auch das Debuggen des Codes in Chrome bestätigt, dass ngMock nicht initialisiert werden kann, und Angular gibt eine Warnung aus, dass Angular zweimal geladen wurde.

Was kann ich dagegen tun? Es scheint mir, als ob Karma jede Testdatei separat behandelt, also verwendet es nicht Webpack, um Angular in ein einzelnes Modul zu bündeln, sondern kompiliert jede Datei einzeln und fügt wieder Angular und ng-mock hinzu.

Answer 1

Ich bin einen anderen Weg gegangen, konnte nicht herausfinden, wie dieses Problem zu lösen ist.

Meine webpack Config hat jetzt das:

entry: { entry: './app/scripts/main.ts'}, 
    output: { 
     filename: isDev ? "[name].js" : '[name]-[hash].js', 
     path: path.resolve('dist'), 
     pathinfo: isDev 
    }, 
... 
if (isDev) { 
    module.exports.devtool = 'source-map'; 
    module.exports.entry.test = './test/test-main.ts'; 
} 

Und ich ließ das alles webpack Sachen in der Karma-Konfig.

ich Webpack sage ein anderes Bündel zu kompilieren, mit einer einfachen TS-Datei Einstiegspunkt, der lautet:

Import((<any>require).context('../app/scripts/', true, /.*\.test\.ts$/i), (_: any) => {}); 

Karma die Ausgabe Bundle-Datei für Änderungen beobachtet.