导语
最近在写前端单元测试，基本的测试很容易就测试完成，也总结了部分，不过编写起来，尤其是针对chart库这块的测试，不是很轻松。故，把前端常用的测试框架了解、比对，记录一下，加深下了解。
如果个人理解有误，欢迎评论区，评论留言~
E2E test (End To End test)
Unit Test - 单元测试框架
Mocha、Jasmine、Karma 份额
Mocha、Jasmine、Karma 比较
| Test Framework | 特性 | 学习成本 |
|---|---|---|
| Mocha | 社区很强大 、鲁棒性、前后端语法一致 | 学习曲线低、复杂度高 |
| Jasmine | 易用、内置断言功能 | 学习曲线低 |
| Karma | 可靠、易上手 | 运行挺耗时间 |
前端框架选择的单元测试框架情况
我们可以看到，
- Angularjs 选择 Karma,Jasmine 居多。
- 从Angularjs升级过来的Angular项目，也是保持这样选择的。利用Jasmine语法编写测试用例，交给Karma 在Command line中执行，得到测试结果，最后得到测试报告文件。
- React 选择 Mocha 居多
拓展
Jasmine语法
| 方法 | 描述 |
|---|---|
| toBe | 值的比较 |
| toEqual | 对象比较 |
| toMatch | 正则比较 |
| toBeDefined | 返回值有定义 |
| toBeUndefined | 返回没有定义 |
| toBeNull | 检测是否null |
| toBeTruthy | 检测是否true |
| toBeFalsy | 检测是否false |
| toContain | 检测是否包含特定的值 |
| toBeLessThan | 检测是否小于 |
| toBeGreaterThan | 检测是否大于 |
| toBeCloseTo | 关于浮点数进行精确比较 |
| toThrow | 检测是否抛出异常了 |
| toHaveBeenCalled | 检测方法是否被调用了 |
| toHaveBeenCalledWith | 检测是否使用特定的参数调用了 |
不容忽视的Jest
- 安装简单
# npm
npm install -D jest
#yarn
yarn add -D jest
- 运行速度
-
并行运行
-
运行慢的，优先执行
-
- mock 变简单了
-
继承了Jasmine优点，内置的断言
-
强大的mock库支持
-
理解了为何angular 项目使用jest进行mock了
-
- 生成测试报告
jest --coverage
总结
我们了解E2E测试框架之间的区别；同时也了解了单元测试框架之间的区别。但是是不是把单元测试做好就行了？ 其实不然！ 有时候，单元测试不能保证集成测试没有问题，仅仅是某项功能ok，不保证集成到一起输入输出都是符合之前单元测试预期的。所以，不能一味的追求单元测试code coverage 100% 。但是单元测试做好，提前把错误找出来，有助于提升集成测试，减少问题定位成本。
