前言

上篇文章中介绍了Button组件的基本实现，除了样式需要自己配置，基本的功能可以实现，再次强调下，本组件库的目的是为开发者提供一个轻量级、灵活的组件库，所以涉及到的组件都是常用的且属性也是常用的属性。本篇文章将会进行对Button组件的测试。

Vitest

看标题，没错，本次测试用到的是Vitest，为什么选择Vitest而不是Jest，首先，如果看Vitest的文档是可以看到Vitest是兼容Jest的API，另外一个重要的原因就是，Vite和Vitest本来就可以看作一家人，只是分工不同，官方大大是这样说的:Vitest 旨在将自己定位为 Vite 项目的首选测试框架，即使对于不使用 Vite 的项目也是一个可靠的替代方案，具体Vitest与其他测试框架的对比，请移步官网查看 #与其他测试框架对比。

为什么要测试

别着急，先不说怎么测试，看到这里你可能会问，为什么要进行测试，其实我和你一样，在接触测试的时候也会问，这玩意儿这么复杂且难写，等于又要学一门新课了，测试组件我直接引入不就行了吗？测试工具函数我直接控制台打印不就行了吗？

是的没错，上一篇的Button组件定义属性不多，确实可以引入之后一个一个属性来测试，可是当你之后新增的属性越来越多呢？当你更新代码之后了呢？当后边的组件属性越来越多呢？这个时候再使用手动测试可能就显得稍微有点笨拙了。那么这个时候，测试的重要性就体现出来了。下边先来看看怎么进行测试吧

测试Button组件

下载Vitest

npm install -D vitest

我们这里使用的是Vue，所以还要下载基于Vue的测试工具，显然Vitest肯定不是只能测试基于Vite构建或使用Vue框架相关的项目

下载vue-test-utils

npm install -D @vue/test-utils

开始测试

// Button.test.ts
import { describe, test, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Button from '../Button.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import Icon from '../../Icon/Icon.vue'
describe('Button.vue', () => {
  // primary
  test('primary button', () => {
    const wrapper = mount(Button, {
      props: {
        type: 'primary'
      },
      slots: {
        default: 'button'
      }
    })
   // 检查是否有 yv-button--primary 这个className
    expect(wrapper.classes()).toContain('yv-button--primary')
    
    // 检查slot是否生效且内容为button
    expect(wrapper.get('button').text()).toBe('button')

    // 确保组件在某种情况下确实发出了 click 事件
    wrapper.get('button').trigger('click')
    console.log('emitted=>', wrapper.emitted())
    expect(wrapper.emitted()).toHaveProperty('click')
  })
})

启动测试，Button就是测试代码所在的文件名 => Button.test.ts

npx vitest Button

测试结果如下

可以看到生成了button节点且测试内容均生效

至于测试中使用到的函数及方法，这里简单介绍下：

describe:
- describe 是一个函数，用于对一组相关的测试用例进行分组。它接受一个字符串作为描述（通常描述这个测试组是关于什么功能的），以及一个回调函数，该回调函数包含与该描述相关的 test 函数。
- 使用 describe 可以使测试结构更清晰，特别是当你有大量的测试用例时。
test:
- test（有时也被称为 it，取决于测试框架，Vites兼容了Jest，所以写it也可以）是定义单个测试用例的函数。它接受一个字符串作为测试用例的描述，以及一个执行测试逻辑的回调函数。
- 在这个回调函数中，你会使用 expect 函数来断言某些条件是否满足，从而验证代码的正确性。
expect:
- expect 是一个函数，用于声明一个“期望”或“断言”。它接受一个值，并允许你链式调用各种“匹配器”（matchers）来检查该值是否满足某些条件。
- 例如，你可以使用 expect(someValue).toBe(anotherValue) 来检查 someValue 是否等于 anotherValue 。
mount:
- 函数是 @vue/test-utils 中的一个核心功能，它用于模拟 Vue 组件的挂载过程，并返回一个包装器对象（Wrapper），这个对象提供了一系列的方法和属性，用于访问和操作组件实例及其子组件。

测试的重要性

所以看到这里应该知道测试的重要性了：

自动化完成流程，保证代码的运行结果
更早发现 Bug
重构和升级更加容易和可靠

Button其他属性测试类似，不再一一测试

总结

通过以上内容，简单介绍了Vitest以及使用Vitest对Button组件进行测试，还有对测试的具体实现进行简单介绍。

另外，本人也是前端菜鸟一枚，以上内容仅供参考，甚至参考也算不上，如有失误的地方还希望大佬们评论指正。

Element Plus 组件库实现：1.1 Button——测试

前言

Vitest

为什么要测试

测试Button组件

开始测试

测试的重要性

总结