文章是我边学习,边写的,有任何错误或者补充,评论加以改正
目录
上一篇文章介绍了一些测试的基本概念,本文我们来看我们前端的几大类测试工具,和我们经常碰到的场景,最后做一个个人的使用分享
测试工具总览
相信每个和我一样的前端小白,刚接触前端测试都会懵逼,但是有了上文的基本概念后,我们再来看这些工具,再从这些工具中选择适合我们的,我们就可以开始我们的测试之旅了
我们先总览一下
我们以stateofjs, 2022年的js关于测试的工具数据统计来看一下。(ps:23年还没有出来,没办法啦)
首先我们看使用度这个角度,也就是我们说的谁用的人多呢?(人嘛,总是从众的心里)
有几个重点关注的
- jest依旧是老大,但是2022年使用率下降了,但是依然稳居第一
- Mocha、Puppeteer 都处于平稳或者下降趋势
- vitest,Playwright 都呈现上升趋势
- Cypress 保持稳定
好,我们再从另一个角度看,那就是满意度呢?那些工具更加的先进,更加的让开发者,测试编写体检更好,更满意呢?
- vitest 居于榜首,并且高达97%的满意度
- Playwright 上升趋势,Cypress 下降趋势
- Testing Library 稳定
- Jest 下降趋势
看了这两张图,大家心里大概就有个大致的范围了
工具里面:
- jest 和 cypress 还是老大哥,市场份额刚刚的
- vitest Playwright 是新来搅局的小弟,但是他们很明显,已经获取了一部分人的信任,上升势头明显
- 测试库 Testing Library 还是稳定
日常的测试场景
上面看了这些图,这些测试工具能力都很强大,jest可以进行单侧,也可以配合测试库进行组件测试,cypress可以e2e测试,也可以进行单侧和组件测试。可以说现代的测试工具,配合一些相关周边类库,你总能去做你想的测试
但是,写测试是一件不简单的事情,不同的场景,也许选择不同的测试工具会大大降低你写测试的难度
场景1 纯函数的单元测试
代码中,总会有很多的utils的函数,或者helper的函数,一些重要的函数选择进行测试时有必要的,这种场景下选啥呢?
个人感觉用jest进行测试时最快的,尤其是对于存函数的场景
场景2 组件的测试
前端开发很大一部分工作,都是在进行组件的设计与开发,那么组件的测试呢?
- jest也可以,jest结合jsdom 结合 框架提供的测试库,或者Testing Library可以进行组件的测试
- cypress 也可以
有啥区别吗,其实没啥区别,但是cypress的测试体验更好,更符合我们的测试场景 cypress它内置了浏览器,有着真实的各类浏览器api,你几乎能写的很爽。并且cypres现在支持单独的组件测试模式,简单配置一下就好。
而选择jest,你就有着大量的mock工作,这也是网络上超级多mock技巧的文章来源,jsdom只是模拟,举个小例子,jsdom 缺少相当数量的特性,诸如 window.navigation 或者布局引擎( offsetTop 等), 那么我就要mock这个浏览器的api,或者使用第三方的类库,在测试的前置钩子中进行添加。这总是有些麻烦的
场景3 e2e测试
到了e2e测试呢,你要模拟整个用户的端到端的操作流程,这些毫无疑问,cypress和playwright 是你的不二之选
场景4 性能测试和其他测试
这里我对其他测试的场景了解的也不多,以后补充吧,有经验的也可以留言评论
测试工具的选择
写测试并不是那么简单,所以我会尽可能用让我能方便快捷写测试的工具
这里给出几个场景我的选择
- 纯函数的单元测试,我选择jest
- 一些场景,写的一些类库,封装的一些纯函数工具的小项目,我在这些项目中会选择jest,方便快捷,简单配置即可使用
- 如果是使用vite脚手架,我会选择vitest,它天然和vite集成,是vite 官方推荐的测试工具
- 组件的测试,我选择cypress
- 有时候我们要开发组件,往往我们自己有独立的组件仓库,这种情况下,我会在组件项目选择cypress,因为cypress的测试体验更好,无需让我去mock一些浏览器api,快速让我去写对应的组件测试代码
- e2e测试,我选择cypress
- e2e测试,比如我们部署上线的工程项目,有时候要模拟一些用户登陆流程,用户报销流程,这一类的我会在工程中集成cypress进行端到端的测试
最后,也是我也才接触过jest,cypress这些,其他的不熟呀,不过我接触的原则就是,参考文档多,官方资料齐全,这也是我没有选择playwright的原因,playwright的文档和资料确实不如cypress和jest丰富
后续,我们就会进入jest、cypress、vitest,真正进入动手学习前端测试的篇章啦
总结
- 现代化的测试框架能力都很强大,但是场景不同,不一定一套测试框架就能解决所有问题
- 对应场景对应测试框架,会降低了写测试代码的难度
- 对于非组件场景,工具函数级别相关的测试 我会选择jest或者 vitest
- 组件测试和e2e测试,我会选择cypress