前端单元测试

在这里我们使用 mocha 工具来进行单元测试

mocha是一个功能丰富的javascript测试框架，运行在node.js和浏览器中，并且使异步测试变的非常简单。

安装mocha

$ yarn add mocha --dev

V6.0.0 版本以上的 mocha 需要安装V6.0.0 版本以上的nodeJS。

项目目录

├─src
│ ├─js
└─test

（1）在JS目录下面写一个被测试的脚本

//one.js
function add(x, y) {
  return x+y;
}

module.exports = add;

（2）在test目录下面写一个测试脚本

注意：mocha 默认是读取test目录下的测试文件。如果你想修改mocha读取的测试目录，需要修改配置文件里路径配置。

//one_test.js
var add = require('../src/js/one');
var assert = require('assert');

describe('add function test',function () {
  it('1+1=2',function () {
	  assert.strictEqual(add(1,1),2);
  });

  it('1-1=0',function () {
	  assert.strictEqual(add(1,-1),0);
  })
})

通常情况下测试脚本的命名是在源码脚本名字后加 ‘_test’ 或 ‘_spec’。

• describe块称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称，第二个参数是一个实际执行的函数。.
• it块称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称，第二个参数是一个实际执行的函数。

断言库

上面 one_test.js 里面有一句断言。

assert.strictEqual(add(1,1),2);

所谓"断言"，就是判断源码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误。上面这句断言的意思是，调用add(1, 1)，结果应该等于2。

断言库有很多种，Mocha并不限制使用哪一种，上面我们用了nodeJS自带的assert断言库。

Mocha的运行

有了上面的测试脚本以后就可以让 Mocha 运行了。

在 package.json 中配置下列命令，这两种方法在Windows环境中都可以运行 mocha。

"scripts": {
    "test": "mocha",
    "mocha": "node node_modules/mocha/bin/mocha --reporter mochawesome"
  },

在命令行中执行 yarn test 或者 yarn mocha 都可以运行 mocha。

至此一个小小的 Mocha demo 已经运行完毕。

Mocha 基本配置

在项目根目录新建一个 .mocharc.js 配置文件。

'use strict';
module.exports = {
	diff: true,
	extension: ['js'],
    spec:['./test/*.js'],
	package: './package.json',
	reporter: 'spec',
	slow: 75,
	timeout: 2000,
	ui: 'bdd'
};

• reporter ：用来指定测试报告的格式，默认是spec格式。我们还可以使用nyan、tap、landing、progress、markdown等等官方指定测试报告格式。
• spec：用来指定测试文件路径，默认是test目录下的测试文件。
• timeout：测试运行演示时间。
• slow ： 高亮显示超过 75ms 的例子。
• compilers ：指定测试脚本的转码器。参数后面紧跟一个用冒号分隔的字符串，冒号左边是文件的后缀名，右边是用来处理这一类文件的模块名。
• diff：显示不同断言库特征。
• ui：指定用户界面。

异步测试

Mocha默认每个测试用例最多执行2000毫秒，如果到时没有得到结果，就报错。对于异步操作事件往往不够，我们需要修改timeout参数指定超时门槛。

先修改 .mocharc.js文件里 timeout参数为5000。

it('测试应该5000毫秒后结束', function(done) {
		var x = false;
		var f = function() {
			x = true;
			assert.strictEqual(x, true);
			done(); // 通知Mocha测试结束
		};
		setTimeout(f, 4000);
	});

上面的测试用例里面，有一个done函数。it块执行的时候，传入一个done参数，当测试结束的时候，必须显式调用done函数，告诉Mocha测试结束了。否则，Mocha就无法知道，测试是否结束，会一直等到超时报错。

测试用例的钩子

Mocha在describe块之中，提供测试用例的四个钩子：before()、after()、beforeEach()和afterEach()。它们会在指定时间执行。

describe('hooks', function() {

  before(function() {
    // 在本区块的所有测试用例之前执行
  });

  after(function() {
    // 在本区块的所有测试用例之后执行
  });

  beforeEach(function() {
    // 在本区块的每个测试用例之前执行
  });

  afterEach(function() {
    // 在本区块的每个测试用例之后执行
  });

  // test cases
});

//test_one.js
describe('Array',function () {
  describe('#indexof()',function () {
    it('should return -1 when the value is not present',function () {
      assert.equal([1,2,4].indexOf(3),-1);
      assert.equal([1,2,4].indexOf(5),-1);
    })
  })
})

beforeEach(function() {
  console.log('before every test in every file');
});

describe('Array', function() {
  describe('#indexOf()', function() {
    it.only('should return -1 unless present', function() {
      assert.equal([1,2,4].indexOf(3),-1);
      assert.equal([1,2,4].indexOf(23),-1);
    });

    it.only('should console', function() {
      console.log(123456);
    });

    it('should return the index when present', function() {
      // ...
      console.log(123);
    });
  });

  describe.only('#sai()', function() {
    it('should console 321', function() {
      // this test will be run
      this.skip();
      console.log(321);
    });

    it('should console 654', function() {
      // this test will also be run
      console.log(654);
    });
  });
});

function add() {
  return Array.prototype.slice.call(arguments).reduce(function(prev, curr) {
    return prev + curr;
  }, 0);
}

describe('add()', function() {
  var tests = [
    {args: [1, 2], expected: 3},
    {args: [1, 2, 3], expected: 3},
    {args: [1, 2, 3, 4], expected: 3}
  ];

  tests.forEach(function(test) {
    it('correctly adds ' + test.args.length + ' args', function() {
      var res = add.apply(null, test.args);
      assert.equal(res, test.expected);
    });
  });
});

only 方法

有时，我们希望只运行其中的几个，这时可以用only方法。

it.only('1 加 1 应该等于 2', function() {
  expect(add(1, 1)).to.be.equal(2);
});

skip 方法

skip方法，表示跳过指定的测试套件或测试用例。

it.skip('任何数加0应该等于自身', function() {
  expect(add(1, 0)).to.be.equal(1);
});

mochawesome 可以生产一份漂亮的测试报告

$ yarn add mochawesome --dev

重新配置package.json 文件

"scripts": {
    "mocha": "node node_modules/mocha/bin/mocha --reporter mochawesome"
  },

运行 mocha 会在根目录生产 mochawesome-report 文件，用浏览器打开mochawesome.html 文件。

Mocha
大史不说话
segmentfault
ruanyifeng