0
点赞
收藏
分享

微信扫一扫

浅谈一下前端单元测试

秦瑟读书 2022-03-22 阅读 160

关于单元测试这个概念,我想很多前端的小伙伴都知道,但是却并不一定能描述清楚。由于我开始接触单元测试还是在四个月前,当时也只是做了一些纯函数的单元测试。所以在这里只能说浅谈一下前端单元测试。

什么是单元测试?

我理解的单元测试就是用于测试一个模块能否到达预期效果。通过代码来定义一个可用的横梁标准,并且可以快速检验。

为什么要做单元测试?

随着前端的快速发展,各类框架层出不穷,前端实现的业务逻辑也越来越复杂,这时单元测试的作用就凸显出来了。其实目前为止还是有很多代码是缺少单测的,只是现在单测的重视程度越来越高了而已。单测的好处不言而喻,首先可以提高代码的正确性,在上线前做到心里有底。其次当代码需要重构时,有测试用例做后盾,就可以大胆进行重构。然后从学习曲线来看,单元测试比较容易上手,覆盖的范围比较全面。

测试框架

目前的测试框架很多,今天咱们单拎出来Jest来说一下。

Jest是Facebook出品的通用测试框架                      一个好用的JavaScript测试框架,开箱即用,无需配置 。                                                                          适用但不局限于使用以下技术的项目: Babel,Typescript,Node,React,Angular,Vue                  整个工具放在一个地方,好书写好维护,非常方便

开始使用

  • 安装Jest                                                                     yarn add --dev jest 或npn install --save-dev jest
  • 配置package.json                                                        watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5Y235b-D6I-c,size_20,color_FFFFFF,t_70,g_se,x_16
  • 测试用例           watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5Y235b-D6I-c,size_20,color_FFFFFF,t_70,g_se,x_16
  • 运行结果                                                                     npm run test 开始运行,得到测试结果

当然这并不是上面例子的测试结果,只是找了张图片来给大家看一下测试结果是什么样子的。watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5Y235b-D6I-c,size_17,color_FFFFFF,t_70,g_se,x_16

单测的质量很重要,覆盖率一定程度上客观反应了单测的质量。watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5Y235b-D6I-c,size_18,color_FFFFFF,t_70,g_se,x_16

拓展

这一期我们只是浅谈了一下前端的单元测试和Jeat,而且我们是在node里做测试,如果要在浏览器里做单测应该怎么办,这里就需要去更加深入了解关于Ui Jest的知识了。

 

 

举报

相关推荐

0 条评论