Webpack Karma Istanbul重新映射为TypeScript [英] Webpack Karma Istanbul Remapping for TypeScript
问题描述
我正在开发客户端应用程序,但是在创建正确的Karma配置时遇到了麻烦。现在,我的设置如下:
I'm developing a client-side app and I'm having trouble with creating the right Karma configs. Right now, I have my setup as follows:
Webpack:使用ts-loader编译TypeScript,资产等。
Webpack: Using ts-loader, compiles TypeScript, assets etc.
业力:使用webpack插件加载Webpack配置(使用ts-loader),然后使用Jasmine + PhantomJS运行所有单元测试
Karma: Using the webpack plugin, loads the Webpack config (which uses ts-loader), then runs all unit tests with Jasmine + PhantomJS
单元测试全部运行正常,但我还没有找到处理webpack伊斯坦布尔重新映射的方法。 Karma-webpacks似乎没有生成源映射以允许重新映射发生。任何指针将不胜感激!
The unit tests all run fine, but I haven't figured out a way to handle the webpack istanbul remapping. Karma-webpacks seems to not be generating source maps to allow the remapping to happen. Any pointers would be appreciated!
业力配置:
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
})
};
推荐答案
当前 Karma Remap Istanbul 是唯一能够内嵌TypeScript覆盖范围的软件包。显然,也可以通过在生成的coverage.json上调用 remap-istanbul
来进行管理。
Currently Karma Remap Istanbul is the only package capable of generating TypeScript coverage inline. It can also obviously be managed by simply calling remap-istanbul
on your generated coverage.json.
此软件包将假设您将输出配置设置为 text:未定义
This package will get you TypeScript coverage output summary on the console assuming you set the output config to text: undefined
在控制台上获得TypeScript Coverage输出摘要您现有的工作流程非常简单,有关如何做到这一点的文档,请参见github README.md
。
Adding it to your existing workflow is simple enough, the documentation on how exactly to do so in the packages github README.md
.
这篇关于Webpack Karma Istanbul重新映射为TypeScript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!