51Testing软件测试论坛

标题: 浅谈单元测试框架vitest [打印本页]
作者: lsekfe    时间: 2023-2-7 13:12
标题: 浅谈单元测试框架vitest
前言
　　一款合格的开源项目是避免不了单元测试的，这也是这几年单元测试的热度居高不下的原因。而在今年的state of js 2022中，我们可以看见在代码库层级列表中，vitest飞升一跃，直接到了第二名，仅次于同门师兄弟vite，而element plus unocss等知名开源项目都采用了vitest进行单元测试。

　　不仅仅是在满意度上拔得头筹，vitest相比jest来说，你几乎无需做任何的配置：
　　·开箱即用的 TypeScript / JSX 支持
　　· 支持测试 Vue、React、Lit 等框架中的组件
　　· jest友好(兼容jest的快照测试)
　　这对于新人来学习单元测试来说无疑是非常友好的，并且vitest与 Vite 通用的配置、转换器、解析器和插件，对vite生态支持十分友好，这对于一些日常使用vite的人来说就更爽了。
　　Vitest 旨在将自己定位为 Vite 项目的首选测试框架，即使对于不使用 Vite 的项目也是一个可靠的替代方案。
　　安装并配置
　　这里我还是选择我心目中最好的包管理器了吧：
  1. 　　pnpm add -D vitest
复制代码


由于vitest和vite是统一的配置，所以你无需再另写一个文件，直接在vite.congi.ts中进行配置即可：
  1. /// <reference types="vitest" />
  2. 　　import { defineConfig } from "vitest/config";
  3. 　　export default defineConfig({
  4. 　　 test: {
  5. 　　  // ...
  6. 　　  },
  7. 　　});
复制代码


注意，这里由于我们是要进行配置vite本身，所以需要在顶端加上三斜线命令。
　　再向package.json中加上如下命令即可开启我们的单元测试之旅：
  1. 　{
  2. 　　 "scripts": {
  3. 　　  "test": "vitest",
  4. 　　  "coverage": "vitest run --coverage"
  5. 　　  }
  6. 　　}
复制代码


简单感受一下单元测试的魅力：
　　对于没怎么接触过单元测试的同学，我们可以用个简短的例子来进行演示，首先让我们定义一个sum.ts:
  1. export default function sum(...numbers:number[]){
  2. 　　  return numbers.reduce((total,number)=>total+number,0)
  3. 　　}
复制代码


在写完这个函数后，我们再定义一个测试文件，命名为sum.test.ts:
  1. import sum from './sum'
  2. 　　import {describe,expect,it} from "vitest"
  3. 　　
  4. 　　describe("#sum",()=>{
  5. 　　  it("returns 0 with no numbers",()=>{
  6. 　　    expect(sum()).toBe(0)
  7. 　　   })
  8. 　　})
复制代码


·describe 描述, decribe会形成一个作用域
　　· it 定义了一组关于测试期望的方法,它接收测试名称和一个含有测试期望的函数
　　· expect用来创建断言
　　· toBe 可用于断言基础对象是否相等
　　运行pnpm run test便可得到如下结果：

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

　　实战演示
　　注册组件
　　接下来我们进行实战演示，看看在实际的项目开发中vitest又应该如何使用，这里就拿测试组件库来当做例子吧，举个例子，我注册了一个Link组件：
  1. import { defineComponent, PropType, ref } from "vue";
  2. 　　import "uno.css";
  3. 　　
  4. 　　export type IType = 'default' | 'primary' | 'success' | 'warning' | 'danger'| 'info'
  5. 　　export type IColor = 'black' | 'blue' | 'green' | 'yellow'| 'red' | 'gray'
  6. 　　export const props = {
  7. 　　 type: {
  8. 　　  type: String as PropType<IType>,
  9. 　　  default: "default",
  10. 　　  },
  11. 　　 color: {
  12. 　　  type: String as PropType<IColor>,
  13. 　　  default: "black",
  14. 　　  },
  15. 　　 plain: {
  16. 　　  type: Boolean,
  17. 　　  default: true,
  18. 　　  },
  19. 　　 href: {
  20. 　　  type: String,
  21. 　　  required: true,
  22. 　　  },
  23. 　　} as const;
  24. 　　
  25. 　　export default defineComponent({
  26. 　　 name: "CLink",
  27. 　　 props,
  28. 　　 setup(props, { slots }) {
  29. 　　    return () => (
  30. 　　   <a
  31. 　　   class={`
  32. 　　    text-${props.plain  props.color + "-500" : "white"}
  33. 　　    hover:text-${props.color}-400
  34. 　　    cursor-pointer
  35. 　　    text-lg
  36. 　　    hover:text-white
  37. 　　    transition duration-300 ease-in-out transform hover:scale-105
  38. 　　    mx-1
  39. 　　    decoration-none
  40. 　　    `}
  41. 　　   href={props.href}   
  42. 　　  >
  43. 　　    {slots.default  slots.default() : 'Link'}
  44. 　　  </a>
  45. 　　   );  
  46. 　　  },
  47. 　　});
复制代码


这时候我想要对该组件进行单元测试应该怎么做？这时候我们应该明白自己应该测试什么，才在vitest文档中找寻对应的API；比如这时候我想要知道我的组件是否成功渲染上了，这时候就可以去文档查询，这里我们还是选择expect来进行判断，看看是否将Link组件成功的渲染上了。
　　引入Vue Test Utils
　　但这个时候我们不能直接就进行组件的单元测试，vitest本身是不支持单元组件测试的，需要安装Vue Test Utils配合vitest才可进行，我们安装一下：
  1. 　　pnpm add @vue/test-utils -D
复制代码


shallowMount方法是Vue Test Utils库中的一个方法，它可以在测试环境中挂载一个Vue组件，并返回一个包装器对象，该对象可以用于访问组件的一些属性和方法，并且由于它是浅渲染，意味着它只会渲染当前组件，而不会渲染它的子组件。这对于单元测试来说很有用，因为它允许您专注于当前组件的行为，并避免与子组件的行为产生干扰。
　　搭配shallowMount方法对组件进行一个挂载，将Link组件挂载到测试环境中。
　　测试组件是否渲染成功
　　我们引入组件后，再导入describe expect test方法，对是否渲染成功进行判断，由于原组件当中我们对link组件定义了不同的颜色，这里我们直接判断默认颜色是否为黑色即可。
  1. import Link from '../src/link/Link'
  2. 　　import { shallowMount } from '@vue/test-utils'
  3. 　　import { describe, expect, test } from 'vitest'
  4. 　　
  5. 　　//使用shallowMount()方法挂载组件，并使用expect断言方法来检验组件的渲染是否正确
  6. 　　describe('Link', () => {
  7. 　　  test("mount @vue/test-utils", () => {
  8. 　　    const wrapper = shallowMount(Link, {
  9. 　　      slots: {
  10. 　　        default: 'Link'
  11. 　　       }
  12. 　　     });
  13. 　　
  14. 　　    //断言
  15. 　　    expect(wrapper.text()).toBe("Link")
  16. 　　   })
  17. 　　})
  18. 　　
  19. 　　//对组件颜色进行测试，测试默认link颜色
  20. 　　describe("Link", () => {
  21. 　　  test("default color is black", () => {
  22. 　　    // 使用 shallowMount 方法挂载组件
  23. 　　    const wrapper = shallowMount(Link);
  24. 　　
  25. 　　    // 断言组件默认颜色是否是 black
  26. 　　    expect(wrapper.props().color).toBe("black");
  27. 　　   });
  28. 　　});
复制代码


　运行测试：

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











欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2