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

关注

发布于: 2020 年 08 月 17 日

What karma it is ?Karma 是一个 test runner(测试执行过程管理平台)，是一个运行 test case 的平台。
换而言之，Karma就像一个工厂，但是工厂自身是没法做什么有实际价值的事的(对代码进行测试)，有工人(即chai、mocha、instanbul等工具)在工厂工作，才能有价值产出。
Why Karma ？我想官方介绍可以很好的回答这个问题 A simple tool that allows you to execute JavaScript code in multiple real browsers
对于那些要基于实际浏览器或者想兼容多个浏览器或者前两者要兼顾的需求的项目，且希望有个相对整洁的测试环境的开发人员来说，那么选Karma就对了。
如果没有这些痛点的话，Jest、AVA、Cypress 这些本身就集成了测试框架、断言功能的开箱即用的Test Runner是你的不二之选。（开箱即用真香）
How Karma work ?Karma既不是一个测试环境也没有集成断言库。本质上，Karma是一种生成web服务器的工具，该服务器针对连接的每个浏览器的测试代码执行源代码。真正执行测试任务、输出测试报告，全都要靠插件。没有插件的Karma就是个空架子，莫得灵魂。
Init your first test project最最大的前提，你需要有个nodeJS环境。还没有搭建好nodeJS环境的小伙伴可以自行baidu、谷歌，配置好环境后再继续食用本文。
以下操作均为命令行!!!
创建测试项目
mkdir testDemo && cd testDemo
初始化 package.json
yarn init 
or
npm init
安装karma依赖
yarn add karma -D
or
npm install --save-dev karma
创建源文件 和 测试用例文件
mkdir src && touch src/index.js
﻿
mkdir test && touch test/demo.js
增加Karma 配置初始命令（因为我们没有通过全局安装Karma，无法执行Karma命令）
vi package.json
接下来在你的package.json中加入这行 script
  "scripts": {
    "init-karma": "karma init"
  }
﻿
初始化 测试工程的 karma 配置文件
yarn init-karma
or
npm run init-karma
﻿
此时会出现karma 配置生成命令行
分别是配置：
测试框架
是否要使用 RequireJS
执行代码的浏览器环境列表
要运行在浏览器中的代码
不想运行在浏览器中的代码
是否需要Karma在你代码改动时，自动帮你重新执行测试用
﻿
有人可能会在 第四步、第五步的时候出现warning
请不要慌，那可能是因为你还没有 创建 源码文件和测试用例文件。
请执行 创建源文件 和 测试用例文件 中对应的命令
﻿
Add plugins for Karma俗话说，工要善其事，必先利其器。没有 plugin 的 Karma 就像是一只瑟瑟发抖的小猫猫。
以下操作均为命令行!!!
安装测试框架和断言库(本文以 mocha + chai 为例)
yarn add mocha karma-mocha chai karma-chai -D
安装浏览器启动装置
yarn add karma-chrome-launcher -D
如果你想使用基于 Chromium 的无头浏览器，还可以安装 Puppeteer
本条命令为可选.。视当前网络状况，安装puppeteer可能需要翻墙
yarn add puppeteer -D
Edit your karma config上面👆 我们只是安装了依赖包，但是并没有将 Karma 与 依赖关联起来。我们需要通过在  karma.conf.js   中声明，从而这些插件集成到 karma 中去。
﻿
frameworks 中 增加 chai。这样我们在测试用例中就无需引用 chai 而使用 chai 中的断言方法了。
增加 plugins 项，并添加 karma-mocha 、karma-chai、karma-chrome-launcher
Prepear your code & command﻿
为了能更好更快的去运行测试框架，我们可以在 package.json中新增加一条 script
  "scripts": {
    "init-karma": "karma init",
  ++  "test": "karma start ./karma.conf.js"
  }
注意粘贴时删除上文中的 ++, 此处表示该条命令为新增
到目前为止，大体已上万事具备。还欠缺 源码 和 测试用例。毕竟最终是要 执行 代码的。
编辑 src/index.js  中内容为
function add(a, b) {
  return a + b
}
编辑 test/demo.js 中内容为
// @ts-ignore
describe("test add", () => {
  it("1 add 2", () => {
    expect(add(1, 2)).to.be.equals(3);
  });
});
﻿
Run your first test case準備が完了。我们可以用过运行以下命令查看结果了
yarn test
or
npm run test
﻿
此时，我们成功进行了一次测试用例的执行，并得到了测试结果的反馈。
Summary我们通过集成 mocha、chai、chrome-launcher 等插件借助 karma 成功搭建了一个 基础的测试框架。但是这只是个开始，对ES6语法支持、代码覆盖率支持、可视化测试报告输出 及 库作者 可能会关心的 codecov 小图标的集成，我将在后续文章中继续给大家分享。
﻿