Не удается найти исходные карты для Karma + Jasmine + TypeScript + Webpack
я пытаюсь проверить (с охватом) мое приложение TypeScript с помощью Karma, Jasmine и Webpack. Со следующим я могу успешно запускать тесты, но не могу правильно генерировать покрытие. Я использую karma-remap-coverage
(https://github.com/sshev/karma-remap-coverage) и это кажется достаточно простым.
это выглядит как будто происходит что-то интересное (и я получаю какой-то отчет о покрытии), но с несколькими настройками здесь и там, цифры резко меняются, и я никогда не смогу загрузить исходные карты.
вот основная настройка:
у меня есть src
каталог, содержащий 10 .ts
файлы. Только у одного есть соответствующий на данный момент.
на spec
файл довольно прост и был достаточно, чтобы доказать, что я могу запускать тесты:
import ComponentToTest from './componentToTest';
describe('ComponentToTest', () => {
it('should run a test', () => {
expect(1+1).toBe(2);
});
it('should be able to invoke the a method', () => {
spyOn(ComponentToTest, 'foo').and.callThrough();
ComponentToTest.foo('testing foo');
expect(ComponentToTest.foo).toHaveBeenCalled();
});
});
это работает как шарм, когда в паре с моим :
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"lib": ["es6", "dom"],
"experimentalDecorators": true
},
"exclude": [
"node_modules"
]
}
и karma.conf.js
файл:
module.exports = config => config.set({
frameworks: ['jasmine'],
mime: { 'text/x-typescript': ['ts','tsx'] },
// if I make this a generic './src/**/*.ts' it seems to freeze up
// without throwing any errors or running any tests, but that seems
// like a separate issue...
files: [
'./src/lib/componentToTest.ts',
'./src/lib/componentToTest.spec.ts'
],
preprocessors: {
'./src/**/*.spec.ts': ['webpack'],
'./src/**/*.ts': ['webpack', 'sourcemap', 'coverage']
},
webpack: {
devtool: "source-map",
module: {
rules: [
{
test: /.ts?$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"]
}
},
webpackMiddleware: {
quiet: true,
stats: {
colors: true
}
},
// add both "karma-coverage" and "karma-remap-coverage" reporters
reporters: ['progress', 'coverage', 'remap-coverage'],
// save interim raw coverage report in memory
coverageReporter: {
type: 'in-memory'
},
// define where to save final remaped coverage reports
remapCoverageReporter: {
'text-summary': null,
html: './coverage/html',
cobertura: './coverage/cobertura.xml'
},
colors: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
});
и наконец, я запускаю тесты с простой задачей залпом:
gulp.task('test', function (done) {
new Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, (exitCode) => {
done();
process.exit(exitCode);
}).start();
});
при запуске я получаю вывод, который кажется (в основном) многообещающим:
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 1 of 2 SUCCESS (0 secs / 0.002 secs)
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 2 of 2 SUCCESS (0.026 secs / 0.004 secs)
[Error: Could not find source map for: "app/src/lib/componentToTest.ts"]
[Error: Could not find source map for: "app/src/lib/componentToTest.spec.ts"]
========================= Coverage summary =========================
Statements : 43.69% ( 322/737 )
Branches : 15.7% ( 38/242 )
Functions : 35.47% ( 61/172 )
Lines : 44.91% ( 322/717 )
====================================================================
так что что-то происходит! Что заставляет меня чувствовать, что я близко. Когда я просматриваю отчет о покрытии в браузере, я вижу оба и .ts
файл в списке (который снова становится ближе), но я не совсем там по нескольким причинам:
- в включается в отчет о покрытии. Поскольку это тестовый файл, я не хочу его включать.
- исходные карты не генерируются должным образом - это ясно из ошибок в консоли, а также из невозможности просмотра отчета о покрытии конкретного файла.
я чувствую, что я чертовски близко. Есть ли что-то простое, что я пропустил или предложения?
обновление:
I понял, что я использую более старую версию Node и думал, что это может вызвать некоторые проблемы. Я обновлен до 6.11.0
и хотя это ничего не решило, это дало немного больше контекста:
об ошибках сообщает remap-istanbul
(не удивительно, на самом деле):
CoverageTransformer.addFileCoverage (/app/node_modules/remap-istanbul/lib/CoverageTransformer.js:148:17)
я использую karma-remap-coverage@0.1.4
использует remap-istanbul@0.8.4
- похоже, что были проблемы с remap-istanbul
в прошлом, но не в той версии, которую я использую.
также с помощью Webpack 2.6.1
и машинописный текст 2.3.2
1 ответов
Ну, после нескольких дней попыток, я, наконец, нашел решение, которое работает. Я не уверен, что конкретно вызвало проблему в моем первом посте, но вот где я оказался. Это может быть полезно для кого-то еще, кто ищет очень простой текст, Karma, Jasmine, Webpack (с покрытием).
- моя файловая структура и
spec
файл остался прежним. -
мой
tsconfig.json
обновление кому:{ "compilerOptions": { "module": "commonjs", "target": "es6", "noImplicitAny": false, "inlineSourceMap": true, // this line "sourceMap": false, // and this one "experimentalDecorators": true, "lib": ["es6", "dom"] }, "exclude": [ "node_modules" ] }
я переключился на использование
awesome-typescript-loader
вместоts-loader
.-
и, наконец, моя
karma.conf.js
файл теперь выглядит так:module.exports = config => config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', frameworks: ['jasmine'], mime: { 'text/x-typescript': ['ts','tsx'] }, files: [ 'node_modules/angular/angular.min.js', './src/**/*.ts' ], preprocessors: { './src/**/*.ts': ['webpack'] }, webpack: { devtool: 'inline-source-map', module: { rules: [ { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader', exclude: [ 'node_modules', /\.spec\.ts$/ ] }, { test: /\.ts?$/, use: [ { loader: 'awesome-typescript-loader', query: { /** * Use inline sourcemaps for "karma-remap-coverage" reporter */ sourceMap: false, inlineSourceMap: true, compilerOptions: { removeComments: true } }, } ] }, { enforce: 'post', test: /\.(js|ts)$/, loader: 'istanbul-instrumenter-loader', exclude: [ /node_modules/, /\.spec\.ts$/ ] }, { test: /\.html$/, loader: 'html-loader' } ] }, resolve: { extensions: [".ts", ".js", ".html"] }, externals: { angular: "angular" } }, webpackMiddleware: { quiet: true, stats: { colors: true } }, // add both "karma-coverage" and "karma-remap-coverage" reporters reporters: ['progress', 'coverage', 'remap-coverage'], // save interim raw coverage report in memory coverageReporter: { type: 'in-memory' }, // define where to save final remaped coverage reports remapCoverageReporter: { 'text-summary': null, html: './coverage/html', cobertura: './coverage/cobertura.xml' }, colors: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: true });
окончательные версии пакета включают:
- узел 4.2.6 (я также смог заставить это работать с более новой версией node, но должен быть здесь по другим причинам)
- удивительный-typescript-загрузчик 3.1.2
- istanbul-instrumenter-loader 2.0.0
- Жасмин-основной 2.5.2
- карма 1.6.0
- karma-chrome-launcher 2.0.0
- карма-покрытие 1.1.1
- карма-Жасмин 1.1.0
- карма-переназначение-покрытие 0.1.4
- karma-webpack 2.0.3
- машинопись 2.3.2
- webpack 2.6.1
теперь мои тесты выполняются, в консоли нет ошибок, и у меня есть отчет о покрытии исходных файлов TypeScript!
много кредитов для людей, которые собрали это вместе (это закончилось тем, что направило довольно много моего окончательного решения):https://github.com/AngularClass/angular-starter/tree/master/config