使用vitest测试vue组件中的axios

1.安装Vitest

参考官网

yarn add -D vitest

如果没有安装vue-test-utils

yarn add -D @vue/test-utils

2.使用

在测试用例中，假设组件挂起就会向/api/v1/test发起post请求

import { test, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import Components from '@/components/Components.vue'

// 模拟请求的结果，假数据
const result = { message: 'data取得成功' }

test('test', async (): Promise => {
    // 设置axios监视，并把假数据绑定
    const spyPost = await vi.spyOn(axios, 'post').mockResolvedValue(result)
    // 挂载你的vue组件
    const wrapper = await mount(Components）
    // 模拟请求的参数                           
    const params = { id: '1'}
    // 模拟post请求并验证
    expect(axios.post).toHaveBeenCalledWith('/api/v1/test', params)
    // 模拟请求并验证结果
    expect(await axios.post().then(res => res)).toBe(result)
    // 清除axios监视
    spyPost.mockRestore()
})