VitestによってVueコンポーネント中のAxiosをテスト

1.Vitestをインストール

公式サイトに参照

yarn add -D vitest

vue-test-utilsをインストールしなければ、インストール

yarn add -D @vue/test-utils

2.使用

テストファイルにて
例えば、テストしたいVueコンポーネントをmountedすると/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()
})