2020-07-21 初稿 2021-06-26 系统化装修完善

Vue自动化测试:导读 - 图1

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 是最省心的,我单独拆一篇文章在这里。

更新:已经有了。

[wip]Vue3+Jest 单元测试

https://www.yuque.com/xinbao37/roadmap/vue3-jest

3 vue搞端对端测试

基于 cypress ,待补充。

4 接口测试

基于 postman/newman 完成接口测试。

辅助阅读材料

一些其他材料: