aml*_*amm 8 javascript typescript karma-jasmine webpack remap-istanbul
我正在尝试使用Karma,Jasmine和Webpack测试(使用覆盖率)我的TypeScript应用程序.通过以下内容,我能够成功运行测试,但无法正确生成覆盖.我正在使用karma-remap-coverage(https://github.com/sshev/karma-remap-coverage),看起来很简单.
它看起来好像一些有趣的事情正在发生的事情(和我得到某种覆盖报告),但在这里和那里了一些调整,这些数字彻底改变,我永远不能真正加载sourcemaps.
这是基本设置:
我有一个src包含10个.ts文件的目录.目前只有一个.spec文件具有相应的文件.
该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();
});
});
当与我的tsconfig.json文件配对时,这就像一个魅力:
{
"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任务启动测试:
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 )
====================================================================
所以有些事情正在发生!这让我觉得我很亲密.当我在浏览器中浏览我的覆盖率报告时,我看到列出的.spec.ts文件和.ts文件(这又是,越来越近)但是我不是因为以下几个原因:
.spec.ts文件包含在覆盖率报告中.由于这是测试文件,我不想包含它.我觉得我非常接近.我有什么简单的遗漏或建议吗？
更新:
我意识到我使用的是旧版本的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和TypeScript2.3.2
好吧,经过几天尝试不同的事情,我终于找到了一个有效的解决方案.我不确定在我的第一篇文章中究竟是什么导致了这个问题,但是这里我已经到了最后.对于寻找非常简单的TypeScript,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
});
最终包版本包括:
现在我的测试运行了,控制台中没有错误,我有原始TypeScript文件的覆盖率报告!
很多人都把它放在一起(它最终指导了我的最终解决方案):https://github.com/AngularClass/angular-starter/tree/master/config