跟我一起基于 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小图标的生成和应用。