关于前端:使用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<void> => {
    // 设置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()
})