Угловой 1,5 карма юнит испытывает нг-макет дважды

У меня есть веб-приложение, написанное на Typescript 2.4.2, скомпилированное последней версией Webpack (2.7.0).

Я в процессе добавления тестов кармы с использованием Jasmine в качестве библиотеки утверждений.

Это мой файл конфигурации кармы:

'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: Превышен максимальный размер стека вызовов

Быстрый поиск в Google выдает много сообщений по этому вопросу, говоря, что эта ошибка появляется, когда Karma загружает ng-mock дважды. Кроме того, отладка кода в Chrome подтверждает, что это ngMock, который не может быть инициализирован, и Angular выдает предупреждение о том, что Angular был загружен дважды.

Что я могу сделать по этому поводу? Мне кажется, что karma обрабатывает каждый тестовый файл отдельно, поэтому он не использует Webpack для объединения Angular в один модуль, а скорее компилирует каждый файл самостоятельно и добавляет Angular и ng-mock снова.

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

И я сбросил все вещи из веб-пакета в конфиге Karma.

Я говорю Webpack, чтобы скомпилировать другой пакет, с простым файлом TS точки входа, который читает:

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

Карма следит за выходным файлом пакета на предмет изменений.

Я решил эту проблему, добавив angular-services.test.tsфайлы, содержащие все тесты, использующие angular-mock. например, они используют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'
Другие вопросы по тегам