Ошибка: не удалось найти исходную карту для Angular2, Karma, Webpack и Istanbul
Я пытаюсь создать отчет о покрытии TypeScript Файлы, использующие karma-remap-istanbul плагин.
Мои тестовые примеры успешно выполняются кармой, но когда karma-remap-istanbul пытается создать отчет о покрытии, он выдает следующую ошибку:
Error: Could not find source map for: "E:\myapp\karma-test-shim.js"
at E:\myapp\node_modules\remap-istanbul\lib\remap.js:257:11
at Array.forEach (native)
at E:\myapp\node_modules\remap-istanbul\lib\remap.js:214:22
at Array.forEach (native)
at remap (E:\myapp\node_modules\remap-istanbul\lib\remap.js:213:12)
at RemapCoverageReporter.onCoverageComplete (E:\myapp\node_modules\karma-remap-coverage\remap-covera
s:23:23)
at Server.<anonymous> (E:\myapp\node_modules\karma\lib\events.js:13:22)
at emitTwo (events.js:106:13)
at Server.emit (events.js:191:7)
at InMemoryReport.writeReport (E:\myapp\node_modules\karma-coverage\lib\in-memory-report.js:14:22)
at writeReport (E:\myapp\node_modules\karma-coverage\lib\reporter.js:68:16)
at E:\myapp\node_modules\karma-coverage\lib\reporter.js:290:11
at Array.forEach (native)
at Collection.forEach (E:\myapp\node_modules\karma\lib\browser_collection.js:93:21)
at E:\myapp\node_modules\karma-coverage\lib\reporter.js:247:16
at Array.forEach (native)
=============================== Coverage summary ===============================
Statements : 49.04% ( 16003/32631 )
Branches : 24.32% ( 3140/12910 )
Functions : 42.46% ( 3258/7673 )
Lines : 49.86% ( 15287/30662 )
================================================================================
11 11 2016 15:46:02.173:ERROR [karma]: TypeError: Cannot read property 'text' of undefined
at E:\myapp\node_modules\istanbul\lib\report\html.js:288:53
at Array.forEach (native)
at annotateBranches (E:\myapp\node_modules\istanbul\lib\report\html.js:255:30)
at HtmlReport.writeDetailPage (E:\myapp\node_modules\istanbul\lib\report\html.js:426:9)
at E:\myapp\node_modules\istanbul\lib\report\html.js:489:26
at SyncFileWriter.writeFile (E:\FrontEnd\FrontEnd\node_modules\istanbul\lib\util\file-writer.js:57:9)
at FileWriter.writeFile (E:\myapp\node_modules\istanbul\lib\util\file-writer.js:147:23)
at E:\myapp\node_modules\istanbul\lib\report\html.js:488:24
at Array.forEach (native)
at HtmlReport.writeFiles (E:\myapp\node_modules\istanbul\lib\report\html.js:482:23)
at E:\myapp\node_modules\istanbul\lib\report\html.js:484:22
at Array.forEach (native)
at HtmlReport.writeFiles (E:\myapp\node_modules\istanbul\lib\report\html.js:482:23)
at HtmlReport.writeReport (E:\myapp\node_modules\istanbul\lib\report\html.js:566:14)
at E:\FrontEnd\FrontEnd\node_modules\remap-istanbul\lib\writeReport.js:77:22
at E:\myapp\node_modules\remap-istanbul\node_modules\amdefine\amdefine.js:125:34
PS E:\myapp>
Мои файлы конфигурации следующие:
karma.conf.js
module.exports = function(config) {
var testWebpackConfig = require('./webpack.test');
var configuration = {
// base path that will be used to resolve all patterns (e.g. files, exclude)
basePath: '',
/*
* Frameworks to use
*
* available frameworks: https://npmjs.org/browse/keyword/karma-adapter
*/
frameworks: ['jasmine'],
// list of files to exclude
exclude: [ ],
/*
* list of files / patterns to load in the browser
*
* we are building the test environment in ./spec-bundle.js
*/
files: [
{pattern: './karma-test-shim.js', watched: false}
],
/*
* preprocess matching files before serving them to the browser
* available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
*/
preprocessors: {
'./karma-test-shim.js': ['webpack', 'sourcemap','coverage']
},
// Webpack Config at ./webpack.test.js
webpack: testWebpackConfig,
coverageReporter: {
type: 'in-memory'
},
remapCoverageReporter: {
'text-summary': null,
json: './coverage/coverage.json',
html: './coverage/html'
},
// Webpack please don't spam the console when running in karma!
webpackMiddleware: { stats: 'errors-only'},
/*
* test results reporter to use
*
* possible values: 'dots', 'progress'
* available reporters: https://npmjs.org/browse/keyword/karma-reporter
*/
reporters: [ 'mocha', 'coverage', 'remap-coverage'],
// 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: false,
/*
* start these browsers
* available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
*/
browsers: [
'Chrome'
],
customLaunchers: {
ChromeTravisCi: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
/*
* Continuous Integration mode
* if true, Karma captures browsers, runs the tests and exits
*/
singleRun: true
};
if (process.env.TRAVIS){
configuration.browsers = [
'ChromeTravisCi'
];
}
config.set(configuration);
};
webpack.test.js
var helpers = require('./helpers');
module.exports = {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader?sourceMap=false,inlineSourceMap=true',
'angular2-template-loader'
]
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null'
},
{
test: /\.css$/,
exclude: helpers.root('_COMMON', 'REF01'),
loader: 'null'
},
{
test: /\.css$/,
include: helpers.root('_COMMON', 'REF01'),
loader: 'raw'
}
],
postLoaders: [{
test: /\.ts$/,
exclude: /(node_modules|OPF\\REF01\\spa_test)/,
loader: 'istanbul-instrumenter'
}]
}
}
package.json
{
"name": "angular2-webpack",
"version": "1.0.0",
"description": "A webpack starter for angular 2",
"scripts": {
"start": "webpack-dev-server --inline --config ./OPF/REF01/build/webpack/webpack.config.js --progress --port 8080",
"test": "karma start",
"build": "rimraf ./OPF/REF01/release && webpack --config ./OPF/REF01/build/webpack/webpack.prod.js --progress --profile --bail",
"postinstall": "typings install"
},
"license": "MIT",
"dependencies": {
"@angular/common": "2.1.2",
"@angular/compiler": "2.1.2",
"@angular/core": "2.1.2",
"@angular/forms": "2.1.2",
"@angular/http": "2.1.2",
"@angular/platform-browser": "2.1.2",
"@angular/platform-browser-dynamic": "2.1.2",
"@angular/router": "3.1.2",
"@angular/upgrade": "2.1.2",
"core-js": "2.4.1",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26",
"angular2-in-memory-web-api": "0.0.21",
"bootstrap": "3.3.7"
},
"devDependencies": {
"ag-grid": "6.2.1",
"ag-grid-ng2": "6.2.0",
"angular2-template-loader": "0.4.0",
"css-loader": "0.23.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.15.0",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-remap-coverage": "^0.1.2",
"karma-remap-istanbul": "^0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"null-loader": "0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "0.5.1",
"rimraf": "2.5.2",
"style-loader": "0.13.1",
"ts-helpers": "^1.1.2",
"ts-loader": "0.8.1",
"typescript": "2.0.3",
"typings": "1.0.4",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1",
"webpack-merge": "0.14.0"
}
}
Любая помощь будет принята с благодарностью.
3 ответа
Вот моя минималистская настройка для покрытия кода. Полный пример кода - см. Стартовый комплект
Пожалуйста, обратите внимание
- Не использует никаких препроцессоров, кроме веб-пакета
- Не используется karma-remap-покрытие, karma-remap-istanbul, karma-sourcemap-loader
- Запустите команду npm test, отчет о покрытии кода будет создан при настройке / освещении
Структура папок
package.json tsconfig.json приложение/ - app.component.ts - app.component.spec.ts конфиг / - helpers.js - karma.conf.js - карма-тест-шим.js - webpack.test.js
конфиг /helpers.js
var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [_root].concat(args));
}
exports.root = root;
конфиг / karma.conf.js
var webpackConfig = require("./webpack.test");
module.exports = function(config) {
config.set({
basePath: "",
frameworks: ["jasmine"],
files: [
{ pattern: "karma-test-shim.js", watched: false }
],
preprocessors: {
"karma-test-shim.js": ["webpack"]
},
webpack: webpackConfig,
webpackMiddleware: {
stats: "errors-only"
},
webpackServer: {
noInfo: true
},
customLaunchers: {
"PhantomJS_custom": {
base: "PhantomJS",
options: {
windowName: "my-window",
settings: {
webSecurityEnabled: false
},
},
flags: ["--load-images=true"],
debug: false
}
},
coverageReporter: {
dir: "coverage",
reporters: [
{
type: "json",
subdir: ".",
file: "coverage.json"
}
]
},
reporters: ["progress", "coverage"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ["PhantomJS_custom"],
singleRun: true
});
};
Конфигурационный / карма-тест-shim.js
Error.stackTraceLimit = Infinity;
require("core-js/es6");
require("core-js/es7/reflect");
require("zone.js/dist/zone");
require("zone.js/dist/long-stack-trace-zone");
require("zone.js/dist/proxy");
require("zone.js/dist/sync-test");
require("zone.js/dist/jasmine-patch");
require("zone.js/dist/async-test");
require("zone.js/dist/fake-async-test");
require("rxjs/Rx");
var testContext = require.context("../app", true, /\.spec\.ts/);
testContext.keys().forEach(testContext);
var testing = require("@angular/core/testing");
var browser = require("@angular/platform-browser-dynamic/testing");
testing.TestBed.initTestEnvironment(
browser.BrowserDynamicTestingModule,
browser.platformBrowserDynamicTesting());
Конфигурационный / карма-тест-shim.js
var helpers = require("./helpers");
module.exports = {
devtool: "inline-source-map",
resolve: {
extensions: ["", ".ts", ".js"]
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: [
"awesome-typescript-loader?sourceMap=false,inlineSourceMap=true"
]
}
],
postLoaders: [
{
test: /\.ts$/,
exclude: /(node_modules|\.spec\.ts)/,
loader: "istanbul-instrumenter"
}
]
}
};
package.json
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"core-js": "2.4.1",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/jasmine": "^2.5.38",
"awesome-typescript-loader": "^2.2.4",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "~2.5.2",
"karma": "^1.3.0",
"karma-cli": "^1.0.1",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-webpack": "^1.8.0",
"remap-istanbul": "^0.6.4",
"typescript": "^2.0.3",
"webpack": "^1.13.2",
"webpack-merge": "^0.14.0"
},
"scripts": {
"test": "karma start config/karma.conf.js && npm run report",
"report": "remap-istanbul -i config/coverage/coverage.json -o config/coverage/html-report -t html -e node_modules"
}
Пара вещей
- У вас нет загрузчика для файлов TS, у вас просто есть загрузчик шаблонов из файлов TS.
{ test: /\.ts$/, loaders: [ 'awesome-typescript-loader?sourceMap=false,inlineSourceMap=true', 'angular2-template-loader' ] } - Вы не istanbul-инструктор постлоадер.
Ваше исключающее выражение может быть другим.postLoaders: [{ test: /\.ts$/, exclude: /(node_modules|app\\spec)/, loader: 'istanbul-instrumenter' }]
Дайте мне знать, если это поможет, я постараюсь поместить мой рабочий образец на github.
Я только что удалил репортера remap-coverage из karma.conf.js как показано ниже:
reporters: ['mocha', 'coverage', 'tfs', 'sonarqubeUnit']
Настройки "karma-remap-istanbul" строгой версии до "0.5.0" мне помогают.
"karma-remap-istanbul": "0.5.0",