共计 7314 个字符，预计需要花费 19 分钟才能阅读完成。
对于没有接触过单元测试的前端人员来说，想要系统的了解它，可能会比较困难，因为东西比较零散，会毫无头绪。所以，我理了一下单元测试要用到的工具和需要知道的概念，帮助系统的理解。
什么是单元测试
单元测试（unit testing），顾名思义，是指对软件中的最小的可测试单元进行检查和验证。一个 function、一个模块都是一个单元。一般来说，一个单元测试是用于判断某个特定条件（或者场景）下某个特定函数的行为，所以倡导大家学会函数式编程。
为什么要做单元测试
单元测试从短期来看可能是很浪费时间，增加程序员负担的事，但是从长期来看，可以提高代码质量，减少维护成本，使代码得到了很好的回归，降低重构难度。首先，我们可以保证代码的正确性，为上线做保障；其次，可以做到自动化，一次编码，多次运行。比如，我们在项目中写了一个 function，这个 function 在 10 个地方都被用到了，那么我们就不用在去 10 个地方都测试一遍，我们只要在单元测试的时候测试这个 function 就可以了；然后，可阅读性强，一个项目由多人维护的时候，可以帮助后来维护的人快速看懂前一个人写的代码要实现什么功能；还有，可以驱动开发，编写一个测试，它就定义了一个函数或一个函数的改进，开发人员就可以清楚地了解该特性的规范和要求。最后，保证重构，随着互联网越来越快速的迭代，项目的重构也是很有必要的。对象、类、模块、变量和方法名应该清楚地表示它们当前的用途，因为添加了额外的功能，会导致很难去分辨命名的意义。
什么是 TDD
上述有提到单元测试可以驱动开发，这就是 TDD 的功能。TDD，即 Test-driven Development，翻译过来是测试驱动开发，就是在开发前，先编写单元测试用例，用于指导软件开发，使开发人员在编写代码之前关注需求。
断言
编写单元测试需要用到 node.js 的断言，这里就只列一下测试常用的，想要了解更多可以查看 node.js 文档。
首先要引入 node.js 自带的断言 assert：
const assert = require(‘assert’);
1. assert.ok(value[, message])
value <any>message <string> | <Error>
测试值是否为真，如果值不真实，则引发断言错误，并将消息属性设置为等于消息参数的值。如果消息参数未定义，则会分配默认错误消息。如果消息参数是一个错误的实例，那么它将被抛出，而不是断言错误。如果没有任何参数传入，则消息将被设置为字符串：没有值参数传递给 assert.ok()。
assert.ok(true);
// OK
assert.ok(1);
// OK
assert.ok();
// AssertionError: No value argument passed to `assert.ok()`
assert.ok(false, ‘it\’s false’);
// AssertionError: it’s false
2. assert.equal(actual, expected[, message])
actual <any>expected <any>message <string> | <Error>
测试实际参数和预期参数是否相等，这里的相等是 ==，不是 ===，会做隐式转换，如果传入 message，报错内容为 message 里的内容
assert.equal(1, 1);
// OK, 1 == 1
assert.equal(1, ‘1’);
// OK, 1 == ‘1’
assert.equal(1, 2);
// AssertionError: 1 == 2
assert.equal(1, 2, ‘1 should not equal 2’);
// AssertionError [ERR_ASSERTION]: 1 should not equal 2
这里要注意的是引用类型的相等，equal 判断的是指针地址是否相同，不会判断里面的值，从下面的例子可以看到
assert.equal({a: { b: 1} }, {a: { b: 1} });
// AssertionError: {a: { b: 1} } == {a: { b: 1} }
// 空对象的引用地址不同，必不会相等
assert.equal({}, {})
// AssertionError [ERR_ASSERTION]: {} == {}
3. assert.strictEqual(actual, expected[, message])
actual <any>expected <any>message <string> | <Error>
测试实际参数和预期参数之间是否严格相等，与 equal 不同的是，strictEqual 是 === 全等
assert.strictEqual(1, 1);
// OK
assert.strictEqual(1, 2);
// AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:
// 1 !== 2
assert.strictEqual(1, ‘1’);
// AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:
// 1 !== ‘1’
assert.strictEqual(1, ‘1’, ‘1 should not equal \’1\”);
// AssertionError [ERR_ASSERTION]: 1 should not equal ‘1’
4. assert.deepEqual(actual, expected[, message])
actual <any>expected <any>message <string> | <Error>
测试实际参数和预期参数之间的深度相等性，用 == 进行比较。与 assert.equal()比较，assert.deepequal()可以实现不测试对象的 [[原型]] 或可枚举的自己的符号属性，即可以判断引用类型的值是否相等
const obj1 = {
a: {
b: 1
}
};
const obj2 = {
a: {
b: 2
}
};
const obj3 = {
a: {
b: 1
}
};
const obj4 = Object.create(obj1);
assert.deepEqual(obj1, obj1);
// OK
// Values of b are different:
assert.deepEqual(obj1, obj2);
// AssertionError: {a: { b: 1} } deepEqual {a: { b: 2} }
assert.deepEqual(obj1, obj3);
// OK
// Prototypes are ignored:
assert.deepEqual(obj1, obj4);
// AssertionError: {a: { b: 1} } deepEqual {}
5. assert.deepStrictEqual(actual, expected[, message])
actual <any>expected <any>message <string> | <Error>
assert.deepStrictEqual()就很明显是判断引用类型的值是否全等
assert.deepStrictEqual(NaN, NaN);
// OK, because of the SameValue comparison
// Different unwrapped numbers:
assert.deepStrictEqual(new Number(1), new Number(2));
// AssertionError: Input A expected to strictly deep-equal input B:
// + expected – actual
// – [Number: 1]
// + [Number: 2]
assert.deepStrictEqual(new String(‘foo’), Object(‘foo’));
// OK because the object and the string are identical when unwrapped.
assert.deepStrictEqual(-0, -0);
// OK
// Different zeros using the SameValue Comparison:
assert.deepStrictEqual(0, -0);
// AssertionError: Input A expected to strictly deep-equal input B:
// + expected – actual
// – 0
// + -0
6. asser.throws(fn, error)
fn <Function>error <RegExp> | <Function> | <Object> | <Error>message <string>
捕获函数 fn 引发的错误并抛出。如果指定 error，错误可以是类、regexp、验证函数、验证对象（其中每个属性都将测试严格的深度相等），或者错误实例（其中每个属性都将测试严格的深度相等，包括不可枚举的消息和名称属性）。当使用对象时，还可以使用正则表达式来验证字符串属性。如果指定 message，那么如果 fn 调用未能抛出或错误验证失败，message 将附加到错误消息中。
// Error 函数
assert.throws(
() => {
throw new Error(‘Wrong value’);
},
Error
);
// 正则表达式
assert.throws(
() => {
throw new Error(‘Wrong value’);
},
/^Error: Wrong value$/
);
const err = new TypeError(‘Wrong value’);
err.code = 404;
err.foo = ‘bar’;
err.info = {
nested: true,
baz: ‘text’
};
err.reg = /abc/i;
assert.throws(
() => {
throw err;
},
{
name: ‘TypeError’,
message: ‘Wrong value’,
info: {
nested: true,
baz: ‘text’
}
}
);
// Using regular expressions to validate error properties:
assert.throws(
() => {
throw err;
},
{
name: /^TypeError$/,
message: /Wrong/,
foo: ‘bar’,
info: {
nested: true,
baz: ‘text’
},
reg: /abc/i
}
);
// Fails due to the different `message` and `name` properties:
assert.throws(
() => {
const otherErr = new Error(‘Not found’);
otherErr.code = 404;
throw otherErr;
},
err
);
mocha 测试框架
mocha 是 JavaScript 的一种单元测试框架，可以在 node.js 环境下运行，也可以在浏览器环境运行。使用 mocha，我们就只需要专注于编写单元测试本身，然后让 mocha 去自动运行所有的测试，并给出测试结果。mocha 可以测试简单的 JavaScript 函数，也可以测试异步代码。
安装
npm install mocha -g
GET STARTED
编写代码：
const assert = require(‘assert’);
describe(‘Array’, function() {
describe(‘#indexOf()’, function() {
it(‘should return -1 when the value is not present’, function() {
assert.equal(-1, [1, 2, 3].indexOf(0))
})
})
})
在终端运行：
$ mocha
Array
#indexOf()
✓ should return -1 when the value is not present
1 passing (9ms)
也可以在 package.json 里配置：
“scripts”: {
“test”: “mocha”
}
然后在终端运行：
$ npm test
可以支持 before、after、beforEach、afterEach 来编码，通过给后面的匿名函数传入 done 参数来实现异步代码测试：
describe(‘should able to trigger an event’, function () {
var ele
before(function () {
ele = document.createElement(‘button’)
document.body.appendChild(ele)
})
it(‘should able trigger an event’, function (done) {
$(ele).on(‘click’, function () {
done()
}).trigger(‘click’)
})
after(function () {
document.body.removeChild(ele)
ele = null
})
})
karma
karma 是基础 node.js 的测试工具，主要测试于主流浏览器中，它可以监控文件的变化，然后自行执行，通过 console.log 显示测试结果。
安装
$ npm install karma-cli -g
$ npm install karma –save-dev
安装依赖（这里以 mocha 和 chrome 为例，如果要用 firefox 启动，就安装 karma-firefox-launcher，要在浏览器中运行，所以要安装打开浏览器的插件）：
$ npm install karma-chrome-launcher karma-mocha mocha –save-dev
初始化测试：
$ karma init
1. Which testing framework do you want to use ? (mocha)
2. Do you want to use Require.js ? (no)
3. Do you want to capture any browsers automatically ? (Chrome)
4. What is the location of your source and test files ? (test/**.js)
5. Should any of the files included by the previous patterns be excluded ? ()
6. Do you want Karma to watch all the files and run the tests on change ? (yes)
init 后得到 karma.conf.js 文件：
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: ”,
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: [‘mocha’],
// list of files / patterns to load in the browser
files: [
‘test/*.js’
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: ‘dots’, ‘progress’
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: [‘progress’],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [‘Chrome’],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
files 表示要引用到的文件，如果有文件相互引用，不能用 modules.exports 暴露和 require 引入，会报错，只要把文件写入 files 就可以了。port 是启动 karma 后，运行的端口，默认为 9876。singleRun 表示是否只运行一次，如果值为 true，会默认执行一次后自动关闭浏览器，这样的话就不能做到实时监控文件了。
启动 karma：
$ karma start
浏览器自动打开，还可以进行 debug：