前端单元测试实现教程 mocha + mochawesome + istanbul + sinon + chai

84344790

2019-06-26

关注关注

为什么要写单元测试

减少bug
提高代码质量，保证你的代码是可测试的
放心重构

当你每个方法都写了单元测试的时候，你每一个改动都会影响相应的单元测试，这样你不用费尽心思的考虑哪里会有影响，特别是复杂项目或非核心功能(不易被测试到)，从而导致bug的产生。

当你的代码不可测试的时候，就得考虑你的代码是否需要重构的。好的代码应该是职责分明且单一，颗粒度小且易于测试。

当你重构时，特别是大范围的重构，你就有勇气和信心了。

那么单元测试需要有那些要素呢

测试框架
测试报表
测试覆盖率
断言
mock

测试框架选用 mocha 官方文档

安装

npm install mocha

package.json

"scripts": {
        "test": "mocha --recursive --require babel-core/register tests/Js/test"
    }

mocha默认会找到项目的根目录下的 test目录，但是很多人项目目录中单元测试目录并不是test，而是在/tests/Js/test中，在scripts中，后面加上单元测试路径，就可以修改默认地址

recursive参数代表查找目录的所有子目录下的单元测试,否则只会查找当前目录下的单元测试

node中并不支持某些es6语法，需要通过babel编译，所以需要添加 --require babel-core/register

同时需要在项目根目录添加.babelrc文件

{
  "presets": [ "es2015" ]
}

现在在 tests/Js/test目录下创建一个文件 test.js

var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1,2,3].indexOf(4), -1);
    });
  });
});

命令行中执行 npm run test 结果如下
前端单元测试实现教程 mocha + mochawesome + istanbul + sinon + chai

以上我们知道了如何引入前端测试框架，es6语法问题，执行路径问题

有时候命令行的结果看着不明了，想要输出测试报告呢
这时候可以使用 mochawesome
安装

npm install --save-dev mochawesome

package.json

"scripts": {
        "test": "mocha --recursive --reporter mochawesome --require babel-core/register tests/Js/test"
    }

在scripts命令中，添加 --reporter mochawesome
执行命令

npm run test

结果如图,将会生成 html文件和json文件
前端单元测试实现教程 mocha + mochawesome + istanbul + sinon + chai

"代码覆盖率"（code coverage）。它有四个测量维度。

行覆盖率（line coverage）：是否每一行都执行了
函数覆盖率（function coverage）：是否每个函数都调用了
分支覆盖率（branch coverage）：是否每个if代码块都执行了
语句覆盖率（statement coverage）：是否每个语句都执行了

那么如何知道每个js的覆盖率呢
这时候用到了 istanbul 和 babel-istanbul
安装

npm install istanbul
npm install babel-istanbul

package.json

"scripts": {
     "test:cover": "babel-node ./node_modules/.bin/babel-istanbul cover _mocha -- tests/Js/* -R spec --recursive
    }

istanbul他也是不支持一些es6语法的，所以也需要babel转译
使用cover参数结合mocha，--代表后面参数传递给mocha

执行命令

npm run test:cover

结果如图
前端单元测试实现教程 mocha + mochawesome + istanbul + sinon + chai

Mocha本身不带断言库，所以必须先引入断言库。
我们这里使用 chai

npm install chai

chaijs有三种断言风格，详细查看官网

jquery作为大部分都在使用的库，那么如何对这类的代码进行单元测试呢
比如以下代码
hide-element.js

export const hideElement = ($element) => {
  $element.on('click', '.hide', function() {
    $(this).hide();
  });
};

首先node环境和浏览器环境是不一样的，所以我们跑这类的单元测试就需要模拟出浏览器环境
我们需要安装 jsdom

npm install jsdom

test.js 如下

const assert = require('chai').assert;
const { hideElement } = require('xxxx/hide-element.js');
describe('test:hide-element.js', function(done) {
  before(function() {
    let { JSDOM } = require('jsdom');
    let dom = new JSDOM(`<!DOCTYPE html><html><body><div class="hide"></div></body></html>`,{
    url: 'http://127.0.0.1/',
    referrer: 'http://127.0.0.1/',
    contentType: 'text/html',
    userAgent: 'Mellblomenator/9000',
    includeNodeLocations: true,
  });
    global.window = dom.window;
    global.$ = require('jquery');
    
    hideElement($('body'));
  });
  it('click event', function() {
    $('body').find('.hide').trigger('click');
    assert.equal($('.hide').css('display'), 'none');
  });
});

mocha 由 describe，it基本元素组成
mocha 有四个钩子函数 before，after，beforeEach，afterEach
因为node中引入依赖时会缓存模块，初始化jsdom环境时，最好在before中，防止污染jsdom环境，导致不同的单元测试之间互相影响

需要测试的代码中依赖了其他的模块时，为了测试需要测试的代码，而不去关心依赖的模块，这时候我们需要 sinon 去mock掉相关依赖

demo.js

import api from 'api';
export const demo = (arg) => {
    if (arg == 1) {
      return api.get({
        params: params
      });
    }
    
    return 'ok';
};

test.js

import { demo } from 'xx/demo.js';
const assert = require('chai').assert;
const sinon = require('sinon');
import api from 'api';

describe('demo', function() {
  it('demo(1)', function() {
    //mock api的get方法，并且指定返回值为 'N'
    let apiGet = sinon.stub(api, 'get').returns('N');
    let expectedParams = {params: 'yes'};
    let res = demo(1);
    //automate clean-up,防止影响其他单元测试
    apiGet.restore();
    //断言调用api.get 是传入的参数为 {params: 'yes'}
    sinon.assert.calledWith(apiGet, expectedParams);
    
    assert.equal(res, 'N');
  });
});

单元测试 test mocha