webpack4.0各个击破(9)—— karma篇
【摘要】 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本)
一. webpack与自动化测试
webpack
对应的关键词是模块化,它的主要任务就是打包和管理模块,所以首先需要明确的概念就是webpack
之所以关联自动化测试,是因为它能够为测试脚本提供模块管理的能力,本质上来讲,是将webpack
的打包功能嵌入了自动化测试框架,而不是将自动化测试框架作为插件集成进了webpack
,理解这个区别是非常关键的。
对于Karma
+Mocha
+Chai
及其他自动化测试相关工具的话题将在《大前端的自动化工厂》系列博文中讲述,本篇主要介绍karma-webpack
连接件,它从工具实现层面上将自动化测试与自动化构建联系在了一起。
二. karma-webpack
插件地址:https://github.com/webpack-contrib/karma-webpack
2.1 自动化单元测试库简介
先对基本的单元测试工具做一个简要说明:
Karma
测试框架,提供多浏览器环境跑单元测试的能力,包括headless
浏览器。Mocha
测试框架,提供兼容浏览器和Node环境的单元测试能力,可使用karma-mocha
集成进Karma
中。Chai
断言库,支持should,expect,assert不同类型的断言测试函数,可使用karma-chai
集成进Karma
中。
大部分单元测试都是基于上述三个库联合使用而展开的。Karma-webpack
主要提供的能力,是为Karma
中加载的测试脚本提供模块化加载的能力。
2.2 基本使用
使用yarn add karma-webpack -D
进行安装,karma.conf.js
配置文件如下:
module.exports = (config) => {config.set({ files: [ // 针对test目录下所有符合命名规范的测试文件{ pattern: 'test/*_test.js', watched: false },{ pattern: 'test/**/*_test.js', watched: false }], preprocessors: { // 为选定脚本指定前处理器,这里配置所有的测试脚本需要经过webpack处理'test/*_test.js': [ 'webpack' ], 'test/**/*_test.js': [ 'webpack' ]}, webpack: { // webpack配置,针对测试脚本打包的compilation配置,与项目文件打包不相关// 也可以引入独立的配置文件}, webpackMiddleware: { //如果使用了webpack-dev-server则可以传入一些参数stats: 'errors-only'}})
}
这种配置中webpack
会将每一个命中的文件当做是一个entry
,也就是说它只会处理局部的依赖管理,这样做的优点是可以针对部分测试脚本单独跑单元测试,但劣势也很明显,就是当测试脚本数量很大且需要默认跑所有的测试用例的场景下(例如自动化流水线上自动触发的LLT测试中)效率相对较低。
2.3 默认跑完全部测试用例的场景
针对上面的问题,webpak
提供了另一种可选的处理测试脚本集的方法,很容易想象,其实就是自己新建一个entryPoint
,将要跑的测试脚本全部引入,打包成一个bundle.js
文件,它的优势和劣势和基本场景正好是相反的。
这种场景下,karma.conf.js
的配置只需要针对入口文件即可:
files: [ // only specify one entry point// and require all tests in there'test/index_test.js'],preprocessors: { // add webpack as preprocessor'test/index_test.js': [ 'webpack' ]
},
然后在测试文件的根目录下新建一个入口脚本index_test.js
:
// 这个配置针对的是test/**/?_test.js格式的脚本文件const testsContext = require.context(".", true, /_test$/);
testsContext.keys().forEach(testsContext)
三. 测试报告
一般跑完单元测试,都需要输出一份指定格式的报告,用于过后自查或问题追溯,此处需要注意的是当与webpack4.0
结合使用时,karma
的一些默认行为会失效(例如在控制台输出单元测试用例和结果汇总,以及karma
独立运行时用来生成代码覆盖率报告插件karma-coverage
也无法正常工作),在此均需要重新配置。
单元测试报告
单元测试信息无法输出的问题,可以显式引用插件
karma-spec-reporter
或karma-mocha-reporter
并进行基本的配置即可。代码覆盖率报告
代码覆盖率报告的自动生成配置较为复杂,需要依赖前端代码覆盖率工具
istanbul
并结合若干插件才能实现。低版本的webpack
可以参考karma-webpack-example这个开源项目的示例进行配置。webpack4.0
以上版本可以参考下文推荐的示例。单元测试结果:
覆盖率报告:
四. 配置参考
笔者提供了针对webpack4.0 + karma
的自动化测试配置示例,放在了Webpack4-Karma-Mocha-Chai-Demo,有需要的小伙伴可以自行查看,如果对你有帮助,不要忘记给个Star哦~
来源:华为云社区 作者:大史不说话
webpack4.0各个击破(9)—— karma篇相关推荐
- webpack4.0各个击破(7)—— plugin篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- Webpack4.0各个击破(7)plugin篇
目录 一. plugin概述 1.1 Plugin的作用 1.2 Compiler 1.3 Compilation 二. 如何写一个plugin 四. 实战 [参考] 一. plugin概述 1.1 ...
- Webpack4.0各个击破(6)loader篇
Webpack4.0各个击破(6)loader篇 一. loader综述 二. 如何写一个loader 三. loader的编译器本质 [参考] 一. loader综述 loader是webpack的 ...
- webpack4.0各个击破(4)—— Javascript splitChunk
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(10)—— Integration篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(2)—— CSS篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(8)—— tapable篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(6)—— Loader篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(3)—— Assets篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
最新文章
- Active Directory管理之十一:升级Active Directory(上)
- 【CVPR2020来啦】不容错过的29个教程Tutorial !(附Slides下载链接)
- LISTVIEW嵌套GRIDVIEW的一些处理(点击GRIDVIEW的条目,能够显示他在LISTVIEW中的位置)(对这篇文章的优化处理,不每次都new onItemClickListener)...
- Laravel 5.2问题-----postman进api的post请求,为什么出现Forbidden?
- java技术自我_2020年Java程序员如何进行自我提升?
- 用JavaScript实现100以内自然数求和
- Angular component的一个例子
- 3D电视,你知道多少?
- oracle数据库,增加序列,自增序列,规定位数,不足用0补足
- windwos cakephp mysql apache_配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
- ps专业色彩调色扩展面板 Moody Photoshop Panel 1.1.2汉化版
- 货车运输 vijos 1843 NOIP2013 D1T3 最大生成树,并查集,(伪·LCA)
- Alt+/ 快速提示快捷键修复及ecplise心得
- Ubuntu中SVN的安装和使用
- 【用游戏学C语言】几个基本的小游戏的实现(缓慢更新中~)
- 猿编程 python_猿编程客户端下载_猿编程(小学阶段编程课程学习专用) 1.5.2 官方版_极速下载站...
- 第一章概述-------第一节--1.7 计算机网络体系结构
- banner代码分析
- python for循环求1到100的和_python如何计算1到100的和(用for循环)
- 微信小程序 学习第一天
热门文章
- cad渐开线齿轮轮廓绘制_如何在机械CAD软件中自动生成齿轮
- 用linux上网有什么优点,Linux系统的介绍,有什么优点,怎么使用
- 机器学习花朵图像分类_在PyTorch中使用转移学习进行图像分类
- foreach和while的区别(编译之后)_C++学习大纲:条件编译
- 两台服务器之间mysql数据库怎么做同步_MySQL 数据库同步结构总结
- 小程序 图片上传php后台,微信小程序图片选择、上传到服务器、预览(PHP)实现实例...
- Docker Flie
- 33、JSONP跨域
- Tomcat系列(6)——Tomcat处理一个HTTP请求的过程
- win和mac系统Sublime Text 3配置编译c和c++