如何使用 Webpack 和 Babel 从 Karma 的代码覆盖率中排除规范文件
How Can I Exclude Spec Files from Code Coverage with Karma using Webpack and Babel?
>问题
我正在开发一个配置了 webpack
、babel
和 karma
的小型 react-redux 项目。我在 karma 中添加了代码覆盖率,但我找不到将测试文件排除在覆盖率之外的方法。所以我的代码覆盖率有spec
文件。
如何将这些spec
文件排除在覆盖范围之外?
我尝试使用正则表达式来排除spec
文件,但由于它是由webpack
加载的,因此它不起作用。
tests.webpack.js
const context = require.context('./src', true, /.+'Spec'.js$/);
context.keys().forEach(context);
module.exports = context;
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: 'dist/bundle.js'
},
devtool: 'source-map',
resolve: {
extensions: ['', '.js', '.scss'],
modulesDirectories: [
'node_modules',
'src'
]
},
module: {
preLoaders: [
{
test: /'.js$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
],
loaders: [
{
test: /'.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
],
},
};
karma.config.js
var path = require('path');
module.exports = function (config) {
config.set({
browsers: ['PhantomJS'],
singleRun: true,
frameworks: ['mocha', 'sinon-chai'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap']
},
reporters: ['mocha', 'osx', 'coverage'],
webpack: {
module: {
preLoaders: [
{
test: /'.js$/,
exclude: [
path.resolve('src/'),
path.resolve('node_modules/')
],
loader: 'babel'
},
{
test: /'.js$/,
include: path.resolve('src/'),
loader: 'isparta'
}
]
}
},
webpackServer: {
noInfo: true
},
coverageReporter: {
type: 'html',
dir: 'coverage/'
}
});
};
这就是我在项目中的做法,我的所有测试都位于每个组件包含__test__
文件夹中。您应该能够将其更改为类似/'.spec.js$/
的正则表达式。
karmaConfig.webpack.module.preLoaders = [{
test : /'.(js|jsx)$/,
include : new RegExp(config.dir_client),
loader : 'isparta',
exclude : [
/node_modules/,
/__test__/,
],
}];
在您的情况下,您需要将排除添加到配置的这一位中。
{
test: /'.js$/,
include: path.resolve('src/'),
loader: 'isparta'
}
我通过在 .forEach(context) 之前放置一个 .filter() 来过滤掉我不想要的结果来解决这个问题。
const includes = require('lodash/includes');
const context = require.context('./src', true, /'.test'.js$/);
context.keys()
.filter(file => includes(file, './api/') === false)
.forEach(context);
您也可以将其直接写入 .forEach() 中。
const includes = require('lodash/includes');
const context = require.context('./src', true, /'.test'.js$/);
context.keys()
.forEach(file => {
if (includes(file, './api/') === false) {
context(file);
}
});
如果您不使用 Lodash,您可以使用:
file.indexOf('./api/') === -1
相关文章:
- 音频控件在mouseover上显示,在mouseout上淡出
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 如何在读取XLS/XLSX本地文件时,使用IE的javascript代码启用未标记为安全的ActiveX控件
- Windows形成web浏览器控件和Javascript更改的DOM
- Sencha Touch构建-排除文件
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 如何将javascript事件从web浏览器wpf控件发送到wpf的c#代码
- 如何更改文本框控件的不透明度值
- 如何为排除无穷大和NaN的数字声明Flow类型
- JS条件故障排除
- 所有控件的组合框
- 创建一个方法,通过一个窗口进行迭代并获取Titanium中的所有控件
- 当点击另一件事时,将焦点设置为一件事
- 在angularjs中创建自定义控件的推荐方法
- 自定义控件中的双向绑定在SAPUI5中不起作用
- 如何在ASP中为用户控件添加Javascript对象网
- Dynamics 2016内部部署Crm客户端脚本.选项集控件类型缺少方法
- 什么'在Express中路由时,应用程序级中间件和路由器级中间件之间的区别是什么
- 从快速中间件中排除路由
- 如何从ASP中排除控件.. NET验证时隐藏(display:none;)