• 0
  • 0
分享

  前言

  一款合格的开源项目是避免不了单元测试的,这也是这几年单元测试的热度居高不下的原因。而在今年的state of js 2022中,我们可以看见在代码库层级列表中,vitest飞升一跃,直接到了第二名,仅次于同门师兄弟vite,而element plus unocss等知名开源项目都采用了vitest进行单元测试。

2-1.jpg

  不仅仅是在满意度上拔得头筹,vitest相比jest来说,你几乎无需做任何的配置:

  ·开箱即用的 TypeScript / JSX 支持

  · 支持测试 Vue、React、Lit 等框架中的组件

  · jest友好(兼容jest的快照测试)

  这对于新人来学习单元测试来说无疑是非常友好的,并且vitest与 Vite 通用的配置、转换器、解析器和插件,对vite生态支持十分友好,这对于一些日常使用vite的人来说就更爽了。

  Vitest 旨在将自己定位为 Vite 项目的首选测试框架,即使对于不使用 Vite 的项目也是一个可靠的替代方案。

  安装并配置

  这里我还是选择我心目中最好的包管理器了吧:

  pnpm add -D vitest

  由于vitest和vite是统一的配置,所以你无需再另写一个文件,直接在vite.congi.ts中进行配置即可:

  /// <reference types="vitest" />
  import { defineConfig } from "vitest/config";
  export default defineConfig({
   test: {
    // ...
    },
  });

  注意,这里由于我们是要进行配置vite本身,所以需要在顶端加上三斜线命令。

  再向package.json中加上如下命令即可开启我们的单元测试之旅:

  {
   "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
    }
  }

  简单感受一下单元测试的魅力:

  对于没怎么接触过单元测试的同学,我们可以用个简短的例子来进行演示,首先让我们定义一个sum.ts:

  export default function sum(...numbers:number[]){
    return numbers.reduce((total,number)=>total+number,0)
  }

  在写完这个函数后,我们再定义一个测试文件,命名为sum.test.ts:

  import sum from './sum'
  import {describe,expect,it} from "vitest"
  
  describe("#sum",()=>{
    it("returns 0 with no numbers",()=>{
      expect(sum()).toBe(0)
     })
  })

  ·describe 描述, decribe会形成一个作用域

  · it 定义了一组关于测试期望的方法,它接收测试名称和一个含有测试期望的函数

  · expect用来创建断言

  · toBe 可用于断言基础对象是否相等

  运行pnpm run test便可得到如下结果:

2-2.jpg

  那如果我们将sum.ts的结果从0改为1时,它便会立刻报错,并且提醒我们Expected和Received之前的区别,让我们能够快速定位原代码的错误位置。

2-3.jpg

  实战演示

  注册组件

  接下来我们进行实战演示,看看在实际的项目开发中vitest又应该如何使用,这里就拿测试组件库来当做例子吧,举个例子,我注册了一个Link组件:

  import { defineComponent, PropType, ref } from "vue";
  import "uno.css";
  
  export type IType = 'default' | 'primary' | 'success' | 'warning' | 'danger'| 'info'
  export type IColor = 'black' | 'blue' | 'green' | 'yellow'| 'red' | 'gray'
  export const props = {
   type: {
    type: String as PropType<IType>,
    default: "default",
    },
   color: {
    type: String as PropType<IColor>,
    default: "black",
    },
   plain: {
    type: Boolean,
    default: true,
    },
   href: {
    type: String,
    required: true,
    },
  } as const;
  
  export default defineComponent({
   name: "CLink",
   props,
   setup(props, { slots }) {
      return () => (
     <a
     class={`
      text-${props.plain  props.color + "-500" : "white"}
      hover:text-${props.color}-400
      cursor-pointer
      text-lg
      hover:text-white
      transition duration-300 ease-in-out transform hover:scale-105
      mx-1
      decoration-none
      `}
     href={props.href}   
    >
      {slots.default  slots.default() : 'Link'}
    </a>
     );  
    },
  });

  这时候我想要对该组件进行单元测试应该怎么做?这时候我们应该明白自己应该测试什么,才在vitest文档中找寻对应的API;比如这时候我想要知道我的组件是否成功渲染上了,这时候就可以去文档查询,这里我们还是选择expect来进行判断,看看是否将Link组件成功的渲染上了。

  引入Vue Test Utils

  但这个时候我们不能直接就进行组件的单元测试,vitest本身是不支持单元组件测试的,需要安装Vue Test Utils配合vitest才可进行,我们安装一下:

  pnpm add @vue/test-utils -D

  shallowMount方法是Vue Test Utils库中的一个方法,它可以在测试环境中挂载一个Vue组件,并返回一个包装器对象,该对象可以用于访问组件的一些属性和方法,并且由于它是浅渲染,意味着它只会渲染当前组件,而不会渲染它的子组件。这对于单元测试来说很有用,因为它允许您专注于当前组件的行为,并避免与子组件的行为产生干扰。

  搭配shallowMount方法对组件进行一个挂载,将Link组件挂载到测试环境中。

  测试组件是否渲染成功

  我们引入组件后,再导入describe expect test方法,对是否渲染成功进行判断,由于原组件当中我们对link组件定义了不同的颜色,这里我们直接判断默认颜色是否为黑色即可。

  import Link from '../src/link/Link'
  import { shallowMount } from '@vue/test-utils'
  import { describe, expect, test } from 'vitest'
  
  //使用shallowMount()方法挂载组件,并使用expect断言方法来检验组件的渲染是否正确
  describe('Link', () => {
    test("mount @vue/test-utils", () => {
      const wrapper = shallowMount(Link, {
        slots: {
          default: 'Link'
         }
       });
  
      //断言
      expect(wrapper.text()).toBe("Link")
     })
  })
  
  //对组件颜色进行测试,测试默认link颜色
  describe("Link", () => {
    test("default color is black", () => {
      // 使用 shallowMount 方法挂载组件
      const wrapper = shallowMount(Link);
  
      // 断言组件默认颜色是否是 black
      expect(wrapper.props().color).toBe("black");
     });
  });

  运行测试:

2-4.jpg

  组件渲染成功,我们成功完成了一个组件的基本测试。

  总结

  vitest无疑是一款优秀的单元测试框架,他所拥有的的不仅仅是和vite一样的快,还有简单易上手的特色,他还有着庞大的vue生态在背后做着支撑,而现在单元测试热度越来越高,选择vitest当做自己的入门框架,是再合适不过了,如果你想查看更多的单元测试在组件库上的应用。


作者:八岁小孩学编程    

来源:http://www.51testing.com/html/11/n-7794911.html

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

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          • 入门自动化测试必读自动化测试概念自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程。通常,在设计了测试用例并通过评审之后,由测试人员根据测试用例中描述的规程一步步执行测试,得到实际结果与期望结果的比较。在此过程中,为了节省人力、时间或硬件资源,提高测试效率,便引入了自动化测试的概念。好处自动化测试可以替代大量的手工机械重复性操作,测试工程师可以把更多的时间花在更全面的用例设计和新功能的测试上;自动化测试可以大幅提升回归测试的效率;自动化测试适合在非工作时间执行测试,工作时间分析失败用例;自动化测试可以高效地实现某些手工测试无法完成或者代价巨大的测试类型,比如关键业务 7×24...
            0 0 1199
            分享
          • 一、问答题1、自动化代码中,用到了哪些设计模式?答:自动化代码用到过的设计模式:①单例设计模式;②工厂模式;③PO设计模式;④数据驱动模式;⑤面向接口编程设计模式。2、什么是Selenium答:Selenium是一个开源的web自动化测试框架,支持多种编程语言开发自动化测试脚本,支持跨浏览器平台进行测试。3、TestNG中注解有哪些?答:@Test,@BeforeSuite,@AfterSuite,@BeforeTest,@AfterTest,@BeforeClass,@AfterClass,@BeforeMethod,@AfterMethod,@DataProvider。4、什么是断言?答:...
            0 0 1480
            分享
          •   近几年来随着人工智能、物联网、大数据、云计算等IT新产业快速发展,各行业对软件产品质量要求越来越高。互联网行业快速发展以及技术快速迭代的需求下,期望通过IT培训“借风起火”的人群愈加庞大。BAT、美团、字节跳动、动因等企业纷纷打出高薪招聘软件测试人才。  科技信息时代,万物瞬息而变,而IT行业作为其核心支柱,必然需要不断创新。与此同时企业对测试人才也提出了新的需求,如何应对未来的技术变革,是每个测试人员值得深思的问题。  很多人刚从事软件测试这个行业的时候意气风发,对未来充满无限憧憬。但是摸爬滚打几年以后,渐渐的发现这个行业不像当初了解的那么美好。比起网上很多鼓吹自动化、性能测试多么有前途...
            0 0 1399
            分享
          •   测试工作五年后一般怎样了?  五年测试生涯对身体上的摧残就不说了,来讲讲一般会有怎样的状态吧!  优秀的一般是这样:有着明确的职业目标与规划,热爱技术,五年的工作沉淀,技术能力得到了飞速提升,每天依然激情满满,潜心专研学习技术,是身边同事羡慕的对象,是老板眼中的优秀员工,也是我眼中的技术大佬,薪资嘛自然也是水涨船高。  普通的一般是这样:也许跳槽了多次,薪资也在稳步的上涨中,但也多了些许空虚与迷茫,意识到自已只是茫茫程序员中普通的那一个,每天按部就班地工作、学习、生活,憧憬着有朝一日成为技术牛人。  差劲的一般是这样:工作只是为了生活,对技术缺乏热爱,虽也保持着学习的节奏,但质跟量都不太行...
            1 1 1252
            分享
          •   由于面试官还要摸鱼刷沸点,不想花那么多时间一个个面,所以采用群面的方式,就出现了这样的场景。  交锋  面试官:方便说下离职原因吗?  网友1:不方便  网友2:在前公司长期工作量有些太大了,我自己身体上也出现了一些信号,有段时间都完全睡不着觉,所以需要切换一个相对来讲工作量符合我个人要求的,比如说周末可以双休这样一个情况,这个对我现在的选择来讲还蛮重要的。  网友3:本来已经定好的前端负责人(组长),被关系户顶掉了,我需要一个相对公平的竞争环境,所以打算换个公司。  网友4:实不相瞒,一年前我投过咱们公司(或者面试过但没过),一年了,你知道我这一年是怎么过的吗,因为当时几轮面试都很顺利的...
            0 0 1162
            分享
      • 51testing软件测试圈微信