关于前端:使用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()})