写点什么

跟我一起基于 Karma 搭建一个测试环境 (中)

用户头像
Jack Q
关注
发布于: 2020 年 08 月 18 日
跟我一起基于 Karma 搭建一个测试环境 (中)

More Requirements

有了一个基础的架子之后,机智的大家肯定会和我一样,不会满足于现有这个简陋的版本。所以接下来我会继续分享各种提升测试 feeling 和 efficient 的内容。

Upgrade your test coding feeling

毕竟已经 0202 年了,我们的源码中的代码风格 不够 modern。实际工程里也不可能只有一个js文件。

我们需要将代码修改成支持导出、导入的风格,这样才更贴近现实的使用场景。

  • 编辑 src/index.js 中内容为

export function add(a, b) {
return a + b
}
  • 编辑 test/demo.js 中内容为

import { add } from '../src/index'
// @ts-ignore
describe("test add", () => {
it("1 add 2", () => {
expect(add(1, 2)).to.be.equals(3);
});
});



此时请不要着急执行你的 test 命令,否则你会得到这个 💣



报错的原因:

  • 浏览器如果不在 script 标签中声明 type=module,则不支持 import、export语法。



搞清问题所在,就好解决问题了。既然浏览器不支持,想办法让浏览器支持不就解决问题了嘛。

在此,只需要借助babel 将 ES6 转成 ES5,问题就能迎刃而解。



  1. 安装babel

yarn add @babel/core @babel/preset-env -D
or
npm install --save-dev @babel/core @babel/preset-env

新建.babelrc 配置文件

touch .babelrc && vi .babelrc

并加入如下配置

{
"presets": ["@babel/preset-env"]
}

当然 配置内容可以直接写在 karma.conf.js 中。这里之所以抽离出来,目的是为了... 先买个关子,后面我会进行说明。



纯靠手动 执行 babel 转码着实有点小蠢,聪明的攻城狮们,靠着工具早早下了班。

联想到平时工作中自动打包不都是靠着 webpack 或者 browserify嘛,那我们只需借助 打包 工具不就能实现自动化了吗。

接下来,我要介绍两种 打包工具:

  • 安装 browserify

yarn add browserify karma-browserify watchify babelify -D
or
npm install --save-dev browserify karma-browserify watchify babelify



既然要将 browserify 集成进测试流程中去,那么 karma 的配置少不了改动一番。



frameworks 中增加 browserify





plugins 中增加 karma-browserify





同时修改files 内容为





增加 preprocessors 和 browserify 配置





说完browserify,接下来就该说说 webpack了。当然要是有机会,以后也可以试试,vite 能不能集成到 这个流程中来。



  • 安装webpack



yarn add webpack webpack-cli babel-loader karma-webpack -D
or
npm install --save-dev webpack webpack-cli babel-loader karma-webpack



frameworks 保持不变





plugins 中增加 karma-webpack





同时修改files 内容为





exclude 增加 对 node_modules 的过滤

增加 preprocessors 和 webpack 配置





很多人可能会对 files 中内容 变更产生疑问。为什么要改成 只加载 test路径下的内容?



因为这里借助了 打包工具 webpack(或者 browserify) 对代码进行了编译预处理。

而karma 中的files 相当于是 webpack 中的entry(karma-webpack 源码中 log 之后发现,实际上也是这么回事)

打包工具处理代码时,会根据入口文件,自动去搜索 引用内容 加入到编译中去。

我们在测试用例中已经引用 src 中的内容了,所以此处只留下test路径即可。否则是会产生重复引用,导致覆盖率测试时,出现问题的。

Get your code coverage

说到code coverage,在 javascript 最令人熟知的就是 instanbul了。在 Jest 框架下,只需要加一条 --coverage 就能实现 代码覆盖测试。我一度以为 fb 在Jest 中自己实现了一套代码覆盖率工具,最近看他的源码的时候,突然发现 Jest的代码覆盖率测试也是靠 instanbul 实现的。

instanbul 也是同时支持 webpack 和 browserify的。

以下代码以webpack为例 (browserify 的 instanbul 集成我会单独开个仓库作示例)

  • 安装 babel 提供的 Istanbul 插件

yarn add babel-plugin-istanbul -D
or
npm install --save-dev babel-plugin-istanbul
  • .babelrc 中的增加配置项

{
"presets": ["@babel/preset-env"],
++"plugins": ["istanbul"]
}

注意粘贴时删除上文中的 ++, 此处表示当前行为新增内容

有了覆盖率 统计插件,却只输出 progress 格式的报告,显然是毫无意义的。



  • 安装 instanbul 报告插件

yarn add karma-coverage-istanbul-reporter -D
or
npm install --save-dev karma-coverage-istanbul-reporter



  • 基于上文中的 webpack 版本的 karma.confi.js 进行如下调整



reporters 中增加 coverage-istanbul





plugins 中增加 karma-browserify





新增coverageIstanbulReporter 项( 是 karma-coverage-istanbul-reporter 的 配置项)

coverageIstanbulReporter: {
// reports can be any that are listed here: https://github.com/istanbuljs/istanbuljs/tree/73c25ce79f91010d1ff073aa6ff3fd01114f90db/packages/istanbul-reports/lib
reports: ['lcov', 'text'],
// base output directory. If you include %browser% in the path it will be replaced with the karma browser name
dir: path.join(__dirname, 'coverage'),
// if using webpack and pre-loaders, work around webpack breaking the source path
fixWebpackSourcePaths: true,
// Omit files with no statements, no functions and no branches covered from the report
skipFilesWithNoCoverage: true,
// Most reporters accept additional config options. You can pass these through the `report-config` option
report-config: {
// all options available at: https://github.com/istanbuljs/istanbuljs/blob/73c25ce79f91010d1ff073aa6ff3fd01114f90db/packages/istanbul-reports/lib/html/index.js#L257-L261
lcov: {
// outputs the report in ./coverage/html
subdir: 'lcov-report'
}
},
},

coverageIstanbulReporter是和plugins、browsers 同级别的配置项



更多 reports 类型 详情可查看 这里

text 会在 terminal 输出如下报告:

lcov:Same as lcovonly, but also generates a HTML report you can view in your browser.

lcov会生成一份可视化的报告(可以在浏览器中查看)

还有有一份 lcov.info (这个是后面 codecov 用到的统计数据)

配置完毕,我们可以运行一下测试命令来检验成果了

yarn test
or
npm run test

结果如下:

至此我们的框架又达成了一个新的里程碑。



But,心细你的一定看到了一些 不舒服的地方。

没错,测试报告输出的地方混入了 webpack 的编译信息 和 重复的报告内容。

本着追求完美的精神,我们继续进行一定的优化

  • 控制 webpack 的输出内容

既然是karma-webpack 作为 调用webpack的桥梁。第一时间就想到要去 npm 或者 github 上看看他的示例。

突然发现一条没有用过的配置项 stats

webpack官网一查 这就是我们想要的,那个可以控制 webpack 在terminal中输出内容的地方

编辑 karma.confi.js

webpackMiddleware: {
// webpack-dev-middleware configuration
// i. e.
stats: 'errors-only',
},



  • 替换 progress

替换 progress 就比较无聊了。reporter 中有示例图的不多,只能一一尝试效果。最后选了一个输出结果有那么些意义且看起来还算漂亮的 mocha-reporter。

安装 mocha-reporter

yarn add karma-mocha-reporter -D
or
npm install --save-dev karma-coverage-istanbul-reporter

编辑 karma.confi.js 中内容

--'progress',
++'mocha',
'coverage-istanbul'
]



plugins: [
'karma-mocha',
'karma-chai',
'karma-chrome-launcher',
'karma-webpack',
'karma-coverage-istanbul-reporter',
++'karma-mocha-reporter'
],

注意粘贴时删除上文中的 ++、--, 分别表示当前行为新增、删除内容



贴上一张最终效果

Summary

本章我们对之前的基础框架进行了升级。增加了对ES6语法支持(webpack or browserify)、代码覆盖率的支持,对可视化测试报告(terminal端)进行了优化调整。最后一节中,我们会 基于覆盖率测试时生成的的 lcov 成果对 可视化测试报告的输出进行升级改造 ,并分享codecov小图标的生成和应用。



发布于: 2020 年 08 月 18 日阅读数: 80
用户头像

Jack Q

关注

还未添加个人签名 2018.06.20 加入

还未添加个人简介

评论

发布
暂无评论
跟我一起基于 Karma 搭建一个测试环境 (中)