我使用Angular 4模板创建了一个新项目，我想向它添加测试覆盖率报告，但我无法使其正常工作。测试运行正常，但最终看起来karma-remap-coverage无法生成报告，因为它无法找到源图。这是错误：
webpack: wait until bundle finished:
webpack: Compiled successfully.
02 10 2017 10:37:22.343:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
02 10 2017 10:37:22.347:INFO [launcher]: Launching browser Chrome with unlimited concurrency
02 10 2017 10:37:22.370:INFO [launcher]: Starting browser Chrome
02 10 2017 10:37:24.067:INFO [Chrome 61.0.3163 (Windows 10 0.0.0)]: Connected on socket D9FHbxYFkC9uUFrnAAAA with id 77245712
Chrome 61.0.3163 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.28 secs / 0.173 secs)
Error: Could not find source map for: "C:\Projects\insights\Src\Web.UI.Admin\ClientApp\test\boot-tests.ts"
at CoverageTransformer.addFileCoverage (C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma-remap-coverage\node_modules\remap-istanbul\src\CoverageTransformer.js:96:14)
at C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma-remap-coverage\node_modules\remap-istanbul\src\CoverageTransformer.js:223:10
at Array.forEach (native)
at CoverageTransformer.addCoverage (C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma-remap-coverage\node_modules\remap-istanbul\src\CoverageTransformer.js:221:5)
at C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma-remap-coverage\node_modules\remap-istanbul\src\remap.js:31:7
at Array.forEach (native)
at remap (C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma-remap-coverage\node_modules\remap-istanbul\src\remap.js:30:11)
at RemapCoverageReporter.onCoverageComplete (C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma-remap-coverage\remap-coverage.js:23:23)
at Server.<anonymous> (C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma\lib\events.js:13:22)
at emitTwo (events.js:106:13)
at Server.emit (events.js:191:7)
at InMemoryReport.writeReport (C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma-coverage\lib\in-memory-report.js:14:22)
at writeReport (C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma-coverage\lib\reporter.js:68:16)
at C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma-coverage\lib\reporter.js:290:11
at Array.forEach (native)
at Collection.forEach (C:\Projects\insights\Src\Web.UI.Admin\node_modules\karma\lib\browser_collection.js:93:21)
=============================== Coverage summary ===============================
Statements : 49.97% ( 999/1999 )
Branches : 25.31% ( 206/814 )
Functions : 44.81% ( 220/491 )
Lines : 50.74% ( 966/1904 )
================================================================================
(node:68684) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'text' of undefined
以下是我正在使用的配置文件：
tsconfig.json
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": false, // I changed this one to false
"inlineSourceMap": true, // and I added inline source maps
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
"strict": true,
"lib": [ "es6", "dom" ],
"types": [ "webpack-env" ]
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false }
}
webpack.conf.js的一部分
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
//filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});
和我的karma.conf.js文件：
module.exports = function (config) {
config.set({
basePath: '.',
frameworks: ['jasmine'],
files: [
'../../wwwroot/dist/vendor.js',
'./boot-tests.ts'
],
preprocessors: {
'./boot-tests.ts': ['webpack', 'sourcemap', 'coverage']
},
reporters: ['progress', 'coverage', 'remap-coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
mime: { 'application/javascript': ['ts','tsx'] },
singleRun: true,
webpack: require('../../webpack.config.js')().filter(config => config.target !== 'node'), // Test against client bundle, because tests run in a browser
webpackMiddleware: { stats: 'errors-only' },
coverageReporter: {
type: 'in-memory'
},
remapCoverageReporter: {
'text-summary': null,
json: './coverage/coverage.json',
html: './coverage/html'
},
});
};