基于Karma的前端单元测试实践初探

在平常前端开发中，前端的工做多数是是编写业务层级代码，因为业务层级代码变化较大，前端开发中鲜少涉猎到单元测试这一步骤。然而随着工程不断的复杂化、代码复 用性变高的状况下，前端工程中的单元测试流程显得尤其必要。

单元测试是什么

对于前端开发过程当中而言，咱们须要使用测试框架、测试用例等来检测咱们的代码，最后得出特定的结果。对于JavaScript，也就是针对函数、模块及对象的测试。

测试方法论

单元测试一般基于两个经常使用的方法论：TDD模式与BDD模式

TDD（测试驱动开发）

其基本思路是经过测试来推进开发进行，一种测试先于编写代码的思想。

在开发功能代码以前，先编写单元测试用例代码，测试代码肯定须要编写什么产品代码。测试以后，须要重构优化代码，循环以上步骤直到每一个单元都按须要运行。

BDD（行为驱动开发）

想对于TDD中侧重偏向开发的思路而言，BDD更侧重于设计，提倡使用通用的语言将系统的行为更为语义化地描述出来，将系统设计和测试用例相结合。所以，其代码表达更像是用文档的形式描述出一个个具体的执行行为。

如何进行单元测试

针对前端单元测试，咱们须要至少三个工具来进行。

断言库

断言库用于描述具体测试的API，可以让咱们的测试代码更加语义化。常见使用的断言库有Node中的Assert模块、Should.js、Chai.js等。

assert.equal(1, 2) 
(1).should.equal(1) 
expect(1 + 1).to.be.equal(2)
复制代码

上述代码中，Chai与Should为上文提到的BDD风格，其中expect指向chai.expect，使用了链式语言来书写断言语句。咱们经过断言库提供的API，能够判断预设的执行语句结果是否正确。

测试框架

测试框架做为单元测试的核心，提供了测试所须要的API。Mocha是一个功能丰富的测试框架，它既能够基于Node.js，也能够在浏览器环境运行。

describe('Array', function() {
 describe('#indexOf()', function() {
   it('should return -1 when the value is not present', function() {
     assert.equal(-1, [1, 2, 3].indexOf(4))
   })
 })
})
复制代码

以上是使用mocha框架书写的测试脚本，其中脚本中应该包含一个以上的describe块，每一个describe中包含一个以上的it块。

• describe块表示一组相关的测试，其第一个参数为测试的名称，第二参数是执行的函数。
• it块表示一个单独的测试，其第一个参数为测试用例名称，第二个参数为执行函数。

测试脚本后缀一般为.test.js。为了跑通该测试用例，咱们须要安装好Mocha。

npm i mocha -g
复制代码

在文件目录中运行mocha命令后，能够在终端看到以下提示

Array
    #indexOf()
      ✓ should return -1 when the value is not present


  1 passing (6ms)
复制代码

该结果表示经过测试，耗时6ms。

测试管理工具

测试管理工具用以管理整个测试流程，其可以将测试框架、断言库、测试用的浏览器与相关的测试的代码结合在一块儿并运行。经常使用的管理工具备Karma，一个基于Node的管理工具，可支持多种主流浏览器，而且其支持实时的文件监听。

初始化配置环境

首先全局安装Karma

npm i karma-cli -g
复制代码

再经过npm init与npm i karma -D安装初始化相关依赖，最后使用karma init命令完成初始化配置:

配置完成以后会在目录下生成一份 karma.conf.js文件，其中包含了部分上述配置。此外，咱们须要修改该文件，配置断言库及相关plugins。

frameworks: ['mocha', 'chai'] // 使用Chai做为断言库
复制代码

几乎全部的karma插件都须要(经过NPM)额外的库来安装，一般库的名字为karma-*的形式。如使用should.js，则需引入karma-should。

// 配置相关插件
plugins: [
  'karma-mocha',
  'karma-chai',
  'karma-chrome-launcher'
]
复制代码

对应的咱们须要安装相关的依赖包，生成以下package.json：

"devDependencies": {
    "chai": "^4.2.0",
    "karma": "^4.2.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-mocha": "^1.3.0",
    "mocha": "^6.2.0"
  }
复制代码

编写测试代码

基础配置完成后，如今开始书写测试代码。在karma init配置中，目录关联文件的路径我设置了test/*.js和src/*js，这就是告诉Karma须要被测试的代码与测试代码放在src/与test/文件夹中。

在src/文件夹中新建index.js文件，添加一个简单的加法运算函数:

// src/index.js
function add(a, b) {
  return a + b
}
复制代码

上文提到测试脚本后缀一般为.test.js，因而咱们接着在test/文件夹中新建index.test.js：

describe('index.test.js测试', function () {
  it('1 + 1 should be 2', function() {
      expect(add(1, 1)).equal(2)
  })
})
复制代码

测试代码书写完毕后，咱们在目录下运行：

karma init
复制代码

运行成功后，咱们在终端能够到运行结果。

回到karma.conf.js文件中，咱们能够看到files相应配置:

即咱们会在页面中加载命中的文件。咱们能够在弹出的浏览器页面中点击Debug按钮，并查看弹出页面的源代码，此时咱们会发现 test/与 src/下的js文件经过script标签进行加载，所以咱们能够在 index.test.js中使用 src/目录下js文件定义的函数。

由此，咱们能够经过另外一种方式来配置断言库，即仅须要在在 karma.conf.js中的 files添加 'node_modules/chai/chai.js'。

统计测试覆盖率

单元测试在不少状况下须要统计代码测试覆盖率，咱们能够借助第三方库生成报告并看到相关的指标。咱们但愿能够借助覆盖率的检查，去思考如何更好的设计并重构代码，让咱们的代码更有质量。

这里咱们使用karma-coverage来统计测试覆盖率。一样地，咱们须要修改karma.conf.js文件。

preprocessors: {
  'src/*.js': ['coverage'] // 预处理器映射
},
reporters: ['progress', 'coverage'] // 使用的报告者（reporter）列表。
复制代码

此外还须要安装karma-coverage，并在plugins中配置。而后再运行karma-start，咱们会发现目录下多出了一个coverage文件夹，打开该文件夹下的index.html文件，咱们就在浏览器中看到生成的覆盖率报告。

结合Vue项目

利用Vue-CLI初始化项目时，可勾选unit test项，默承认选择mocha + chai组合。

生成项目后，在目录下可看到test/文件夹。其结构与上述Mocha编写单元测试相似。

// test/specs/vue.spec.js
import Vue from 'vue';
import HelloWorld from '@/HelloWorld';

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor().$mount()
    assert(vm.$el.querySelector('.hello h1').textContent === 'Welcome to Your Vue.js App')
  })

})
复制代码

其默认生成的测试用例为，测试HelloWorld组件中msg变量是否为指定值。再运行yarn test:unit命令后，可观察到终端输出：

WEBPACK  Compiled successfully in 3756ms

 MOCHA  Testing...

  HelloWorld.vue
    ✓ renders props.msg when passed

  1 passing (31ms)

 MOCHA  Tests completed successfully

✨  Done in 6.79s.
复制代码

总结

以前的工做中仅仅是基于框架，为基础组件库编写一些简单的单元测试，缺少对其系统的探索。这次的尝试算是对单元测试的一个入门实践。其中Karma还有更为强大丰富的配置，而且可将项目经过Github接入Travis CI，利用CI能力来完成构建与测试的工做，提升开发效率。