前端单元测试之小试牛刀

   两年前观摩大神短短几十行代码代替了原本几百行的冗余代码，惊讶的心情到现在记忆犹新，大神说是因为使用了单元测试。我当时真是弱的很，看了半天也没有看懂大神的代码，更遑论理解单元测试的应用，心里暗暗地对单元测试产生了一些想法，后经周转一直没有机会实施。现在，终于有点点空档，找到相关教程，跃跃欲试。

  我的参考文档详见https://www.w3ctech.com/topic/2172。

  首先需要安装相关依赖：

• NodeJS - 正常前端项目应该都有用到，所以大家应该都有
• Jest - 是我学习的教程里使用的单元测试库

  以上依赖安装流程大家自行百度。

  在确保node版本 》= 6.x之后新建一个测试项目目录，比如my-first-test-projsect。接着初始化该项目：npm init --yes，最后安装Jest。

  准备工作做好了，可以开始编写自己的第一个单元测试了。

  定义一个简单的函数作为要测试的代码

  教程中定义的sum.js如下：

module.export = function sum (a, b) {
    return a + b;
}

可是我实际操作测试时报错TypeError: sum is not a function，改为如下则能正确测试，这又是另外一个值得思考的问题了，有兴趣可以自行查阅相关原因，相信作者是笔误。

module.exports = function sum (a, b) {
    return a + b;
}

编写测试文件

现在要进入正题了，准备编写测试Spec文件。通常写在要测试的代码文件旁，如sum.spec.js。

（Jest和其他测试框架将测试组织到测试用例中，为了简单管理和记录，每个测试用例包含多个单独的测试）。

sum.spec.js编写如下：

const sum = require('./sum.js');
describe('sum suite', function() {
  test('should add 2 positive numbers together and return the result', function() {
    expect(sum(1, 2)).toBe(3);
  })
})

第一行const sum = require('./sum.js');很好理解，就是引入了sum.js。后面的语句相对生涩，找几个不太懂的词语比如describe/test/expect/toBe。

Jest作为全局变量，提供了 describe 、test 、 expect 和一些其他函数，因此你无需导入他们

describe即定义了测试单元，test(...)即是我们添加的第一个单元测试。

expect(sum(1,2)).toBe(3)是单元测试的构建块，被称为“断言（assertion）”

toBe 被称作为“匹配器（matcher）”。在 Jest 里有很多的匹配器，每一个匹配器都有助于验证一个特定的方面：比如测试对象是否相等等。

运行单元测试

更改package.json里面的内容，从而使用npm脚本运行测试

"scripts": {
    "test": "jest"
 }

运行 npm run test，你将会看到成功的输出。第一个单元测试就OK啦