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 используется для группировки.