vitest基础用法

安装启动

可以使用npm进行安装：

npm install -D vitest
# 测试vue组件一般还会用到 jsdom、@vue/test-utils
npm install --save-dev jsdom @vue/test-utils

修改package.json在scripts中配置启动脚本

"test": "vitest"

在根目录新建test文件夹，在里面写所需的测试

基础使用

下面是我测试表格配置弹窗组件的测试示例，需要注意的点有：

1、vitest测试vue组件需要jsdom、@vue/test-utils等配置

2、vitest导入element-plus

3、async、await在vitest的使用时机

首先是vitest的配置，推荐写在vite.config.js中

...
test: {
    globals: true,
    environment: 'jsdom'

    // browser: {
    //   enabled: true,
    //   name: 'chrome'
    // }
  }
...

表格配置弹窗组件:

import { mount } from '@vue/test-utils'
import ElementPlus from 'element-plus'

import TableFormat from '../src/components/TableFormat/TableFormat.vue'

describe('TableFormat 组件测试', () => {
  it('组件挂载', async () => {
    const wrapper = await mount(TableFormat, {
      global: {
        plugins: [ElementPlus]
      },
      props: {
        modelValue: true, // 渲染出来需要耗时，vitest无法准确感知
        tableOption: [
          { field: 'title', cname: '标题', cshow: true, align: 'center', showname: '标题', clock: false, width: 180 },
          { field: 'author', cname: '作者名', cshow: true, align: 'center', showname: '作者名', clock: false, width: 100 }
        ]
      }
    })

    // 防止 modelValue 未渲染，赋值做等待使用
    await wrapper.setProps({
      tableOption: [
        { field: 'title', cname: '标题', cshow: true, align: 'center', showname: '标题', clock: false, width: 180 },
        { field: 'author', cname: '作者名', cshow: true, align: 'center', showname: '作者名', clock: false, width: 100 }
      ]
    })

    expect(wrapper.text()).toContain('格式')
    expect(wrapper.get('.format-row').text()).toContain('确定', '重置')
    expect(wrapper.text()).toContain('标题')
  })

  it('确定方法', async () => {
    const wrapper = await mount(TableFormat, {
      global: {
        plugins: [ElementPlus]
      },
      props: {
        modelValue: true,
        tableOption: [
          { field: 'title', cname: '标题', cshow: true, align: 'center', showname: '标题', clock: false, width: 180 },
          { field: 'author', cname: '作者名', cshow: true, align: 'center', showname: '作者名', clock: false, width: 100 }
        ]
      }
    })

    // 模拟点击确定按钮
    await wrapper.get('.format-row button:nth-child(1)').trigger('click')

    // 检查是否触发了setTableOption事件
    const setTableOption = wrapper.emitted('setTableOption')
    expect(setTableOption).toBeTruthy()
    // setTableOption 第一次触发 的 第一个返回值
    expect(setTableOption[0][0]).toEqual([
      { field: 'title', cname: '标题', cshow: true, align: 'center', showname: '标题', clock: false, width: 180 },
      { field: 'author', cname: '作者名', cshow: true, align: 'center', showname: '作者名', clock: false, width: 100 }
    ])

    // 检查是否触发了update:modelValue事件
    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
  })

  it('重置方法', async () => {
    const wrapper = await mount(TableFormat, {
      global: {
        plugins: [ElementPlus]
      },
      props: {
        modelValue: true,
        tableOption: [
          { field: 'title', cname: '标题', cshow: true, align: 'center', showname: '标题', clock: false, width: 180 },
          { field: 'author', cname: '作者名', cshow: true, align: 'center', showname: '作者名', clock: false, width: 100 }
        ]
      }
    })

    // 防止 modelValue 未渲染，赋值做等待使用
    await wrapper.setProps({
      tableOption: [
        { field: 'title', cname: '标题', cshow: true, align: 'center', showname: '标题', clock: false, width: 180 },
        { field: 'author', cname: '作者名', cshow: true, align: 'center', showname: '作者名', clock: false, width: 100 }
      ]
    })

    await wrapper.get('.el-table__row').trigger('click')

    await wrapper.get('.format-row > button:nth-child(5)').trigger('click')

    expect(wrapper.vm.tableData.map(e => e.cname)).toEqual(['作者名', '标题'])

    // 模拟点击重置按钮
    await wrapper.get('.format-row button:nth-child(2)').trigger('click')

    // 检查数据是否重置成功
    expect(wrapper.vm.tableData.map(e => e.cname)).toEqual(['标题', '作者名'])
  })
})

总结

vitest很快，比较适用于测试关键的方法或者组件测试，建议先学jest；目前中文教程有点少，@vue/test-utils这个工具的官方文档也是挺重要但暂没有v3中文版本。