2020-07-21 初稿 2021-06-26 系统化装修完善
Photo by Gilberto Olimpio on Unsplash https://unsplash.com/photos/1F1OPsnXAO4
0 按
按:
最近几次改动前端bug,连带出了其他问题,比较吓人。要预防此类问题:
- 一方面是加强研发自测、测试组测试,沟通好影响的范围。
- 另一方面是引入 自动化测试 ,尤其是单元测试和集成测试,方便规避已知的风险点。
基于vue3项目,本文尝试梳理前端测试。
1 测试不可怕
程序员书写的代码是有逻辑的,也是可以被测试的。前端js不自带断言(但node.js 内置断言模块),很多前端从基础上就缺少对测试的认知。加上各种从实际情况得出的结论,比如时间紧,比如门槛高,进一步让很多人减少了对前端测试的投入程度。
其实测试不要怕:概念不可怕、操作不复杂、成本不是那么高,但收益却那么高:
辛苦一天,幸福半年。
这里略过一些基础概念的探讨,包括:
- 黑盒测试、白盒测试
- 单元测试、集成测试、端对端测试
- TDD test driven development 测试驱动开发基本概念
- BDD behavior driven development 行为驱动开发基本概念
- jest、mocha/expect/chai 的 基础概念
这些概念太多口水话,你可以自行搜索。
2 vue搞单元测试不麻烦
如果是新建项目,会有 unit test 的选项,目前提供两套测试组件:
- jest
- mocha/chai
其中利弊和具体使用用法,可以单独拆一篇文章,用于技术选型。从实际经验来看 jest 是最省心的,我单独拆一篇文章在这里。
更新:已经有了。
https://www.yuque.com/xinbao37/roadmap/vue3-jest
3 vue搞端对端测试
基于 cypress ,待补充。
4 接口测试
基于 postman/newman 完成接口测试。
辅助阅读材料
- Vue官方单元测试工具集 vue-test-utils
一些其他材料: