Question

我有一个用Typescript 2.4.2编写的Web应用程序，由最新的Webpack版本（2.7.0）编译。

我正在使用Jasmine作为断言库添加Karma测试。

这是我的业力配置文件：

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

在第一个测试套件中，我没有遇到任何问题，它看起来像这样：

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

当我尝试为另一项服务编写测试套件时，问题就出现了：

import { default as moduleName } from "../module";
import { RedirectionService } from "./RedirectionService";
import * as angular from 'angular';
import "angular-mocks";
import "jasmine";

const { module, inject } = angular.mock;

describe('Redirection service', () => {
});

正如您所看到的，第二个测试套件是空的。

我的问题是，只要我添加第二个套件，Angular就会开始抛出错误 - 它会尝试两次加载Angular和ng-mock，每次为导入它们的新文件加载一次。

引发的错误是：

错误：[$ injector：modulerr]无法实例化模块ngLocale到期至： RangeError：超出最大调用堆栈大小

一个快速的谷歌搜索产生了许多关于此事的线索 - 当Karma加载ng-mock两次时，会弹出这个错误。此外，调试Chrome上的代码确认它是ngMock无法初始化，Angular会发出Angular加载两次的警告。

我该怎么办？在我看来好像karma分别处理每个测试文件，因此它不会使用Webpack将Angular捆绑到单个模块中，而是自己编译每个文件并再次添加Angular和ng-mock。

Answer 1

我走了另一条路，无法弄清楚如何解决这个问题。

我的webpack配置现在有：

 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';
}

我将所有webpack内容放入了Karma配置中。

我告诉Webpack编译另一个包，其中包含一个简单的入口点TS文件：

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

Karma正在观看输出包文件的更改。

Answer 2

我通过添加包含所有使用angular-mock的测试的angular-services.test.ts文件解决了这个问题。例如，它们在每个内部都使用angular.mock.module和inject方法。

angular-services.test.ts 内容：

import 'angular';
import 'angular-mocks';

import 'test_angular_service_1.test'
import 'test_angular_service_2.test'
.
.
import 'test_angular_service_n.test'

Angular 1.5 Karma单元测试加载ng-mock两次

2 个答案: