Webpack Karma Istanbul Remapping для TypeScript

Я разрабатываю клиентское приложение, и у меня возникают проблемы с созданием правильных конфигураций Karma. Прямо сейчас у меня есть моя настройка следующим образом:

Webpack: использование ts-loader, компиляция TypeScript, активов и т.д.

Карма: Используя плагин webpack, загружает конфигурацию Webpack (которая использует ts-loader), затем запускает все модульные тесты с помощью Jasmine + PhantomJS

Устройства проверяют, что все работает нормально, но я не выяснил способ обработки перепрограммирования webpack istanbul. Кажется, что Karma-webpacks не генерируют исходные карты, чтобы можно было выполнить переназначение. Любые указатели будут оценены!

Конфигурация кармы:

var webpackConfig = require("./webpack.config.js");
delete webpackConfig.entry;

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

        // list of files / patterns to load in the browser
        files: [
            // Non-automatically bundled libraries
            'app/client/js/lib/easeljs.min.js',
            'app/client/js/lib/tweenjs.min.js',
            // Entry File
            'app/client/js/index.ts',
            'app/client/html/**/*.html',

            // Test files and dependencies
            'node_modules/angular-mocks/angular-mocks.js',
            'test/client/**/*.spec.js'
        ],

        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            '**/*.html': ['ng-html2js'],
            'app/client/js/index.ts': ['webpack', 'sourcemap', 'coverage']
        },

        ngHtml2JsPreprocessor: {
            cacheIdFromPath: function (filepath) {
                // Remaps the path for Karma webpack
                return '/_karma_webpack_//' + filepath.replace(/^.*[\\\/]/, '');
            },
            moduleName: 'templates'
        },

        webpack: webpackConfig,

        webpackMiddleware: {
            noInfo: true
        },

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

        coverageReporter: {
            dir: 'build/client/test/coverage/',
            reporters: [
                {
                    type: 'json',
                    subdir: '.'
                }
            ]
        },

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

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

Ответ 1

В настоящее время Karma Remap Istanbul - единственный пакет, способный генерировать TypeScript покрытие inline. Очевидно, что управлять ею можно, просто позвонив remap-istanbul в ваш сгенерированный файл coverage.json.

Этот пакет предоставит вам TypeScript сводку вывода на консоль, предполагая, что вы устанавливаете конфигурацию вывода text: undefined

Добавление его в существующий рабочий процесс достаточно прост, документация о том, как именно это сделать в пакетах github README.md.

Ответ 2

Установите karma-typescript:

npm install karma-typescript --save-dev

Поместите это в свой karma.conf.js:

frameworks: ["jasmine", "karma-typescript"],

files: [
    { pattern: "src/**/*.ts" }
],

preprocessors: {
    "**/*.ts": ["karma-typescript"]
},

reporters: ["progress", "karma-typescript"],

browsers: ["Chrome"]

Это будет запускать ваши тестовые тесты Typescript на лету и генерировать Istanbul html-покрытие, которое выглядит следующим образом:

sc4Mswh.png

Это устраняет необходимость использования Karma и webpack вместе, Karma используется для запуска тестов и создания покрытия, webpack используется для группировки.