• 0
  • 0
分享

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

什么是单元测试?

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

为什么要做单元测试?

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

测试框架

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

Jest是Facebook出品的通用测试框架

一个好用的JavaScript测试框架,开箱即用,无需配置 。

适用但不局限于使用以下技术的项目:Babel,Typescript,Node,React,Angular,Vue

整个工具放在一个地方,好书写好维护,非常方便

开始使用

  • 安装Jest

yarn add --dev jest 或npn install --save-dev jest
  • 配置package.json

1.png

  • 测试用例           

2.png

  • 运行结果

npm run test 开始运行,得到测试结果

当然这并不是上面例子的测试结果,只是找了张图片来给大家看一下测试结果是什么样子的。

3.png

单测的质量很重要,覆盖率一定程度上客观反应了单测的质量。

4.png

拓展

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


作者:前端卷心菜

原文链接:https://blog.csdn.net/m0_63588797/article/details/123373947

  • 【留下美好印记】
    赞赏支持
登录 后发表评论
+ 关注

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          • 自动化面试题记录整理(部分答案自己整理)1、selenium中如何判断元素是否存在?没有提供原生的方法判断元素是否存在,一般我们可以通过定位元素+异常捕获的方式判断2、selenium中hidden或者是display = none的元素是否可以定位到?不可以,想点击的话,可以用js去掉dispalay=none的属性3、selenium中如何保证操作元素的成功率?也就是说如何保证我点击的元素一定是可以点击的?首先通过封装find方法,实现wait_for_element_ispresent(WebDriverWait)在对页面进行click之前,先滚动到该元素(通过Js封装),避免在页面未加...
            14 13 5779
            分享
          • 12月19日消息,美国当地时间周日,推特宣布将禁止用户在其平台上免费推广其他社交媒体,违规者将被要求删除推文,严重者将被封禁账户。今年10月末,在埃隆·马斯克(Elon Musk)斥资440亿美元收购了推特后,许多用户在推特上分享他们的其他社交媒体账户。推特在周日的声明中表示:“我们认识到,我们的许多用户在其他社交媒体平台上都很活跃。然而,我们将不再允许某些社交媒体平台在推特上免费推广。”该公司继续称:“我们将删除仅仅为了推广其他社交平台而创建的账户,以及包含下列平台的链接或用户名的内容,Facebook、Instagram、Mastodon、Truth Social、Tribel、Nostr...
            0 0 1068
            分享
          •      视觉回归测试最常见的情况是使用基线图像进行测试。然而,视觉测试的不同方面也值得讨论。我们将介绍模板匹配(使用OpenCV)、布局测试(使用Galen)和OCR(使用Tesseract),并展示如何将这些工具无缝集成到现有的Appium和Selenium测试中。     我们使用Java(以及OpenCV和Tesseract的Java包装器),但类似的解决方案也可以通过其他技术堆栈实现。     这篇文章是2020年9月在新加坡的Taqelah和2020年Selenium会议期间(以较短的形式)发...
            0 0 2233
            分享
          • 在 Vue 3 的 Composition API 中,采用了 setup() 作为组件的入口函数。在结合了 TypeScript 的情况下,传统的 Vue.extend 等定义方法无法对此类组件给出正确的参数类型推断,这就需要引入 defineComponent() 组件包装函数,其在 rfc 文档中的说明为:https://composition-api.vuejs.org/api.html#setup interface Data {   [key: string]: unknown }   interface&nbs...
            0 0 1050
            分享
          •   随着软件系统的规模越来越庞大,对性能的需求越来越高,性能测试的要求也越来越高。但是仅仅做性能测试,已经很难满足当前软件系统对于性能的各种需求,所以需要做更多性能相关的工作。而对于这一系列性能相关的工作,我们称之为性能工程。  性能工程是发现和解决软件系统性能问题最主要的方法体系和技术手段,它一般包含以下几个部分:性能测试,性能轮廓,性能分析,性能优化和性能规划(容量规划)。  性能测试:通过不同类型的测试,获取系统在不同情况下的性能情况,包括各种外部性能指标,是否满足实际的性能需求等。  性能轮廓:通过特定的工具获取被测系统的各种内部性能指标,从而辅助性能分析工作。  性能分析:通过分析性...
            0 0 567
            分享
      • 51testing软件测试圈微信