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