bulletproof-reactアーキテクチャ+TS+vite+vitestでAPIをモックしてテスト

はじめに

bulletproof-reactに従ってwebアプリを作ったのですが、vitestでテストを書くのに死ぬほど苦労したので後続の方のために記事を残します
ためになったらハート下さい（乞食）

vitestのインストール

まずは vitest をインストールします。

npm install -D vitest

vitestの設定

続いて色々設定します（参考）

vite.config.ts

+ /// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
+  test: {
+    globals: true
+  }
})

tsconfig.json

{
  "compilerOptions": {
+    "types": ["vitest/globals"]
  },
}

モック定義

vi.mockを使ってaxiosをモックします
vi.mockは、テストコード＆テストされるコード内で、第一引数に渡した文字列でimportされるすべての関数をモック関数に変えるっぽいです

bulletproof-reactではaxiosをaxios.interceptors.response.use()してから使うので、vi.mock("axios")だけではエラーが出てしまいます
よって、手動でモック関数を仕込みます

import axios from "axios"
import {vi} from "vitest"

vi.mock("axios", () => {
  return {
    default: {
      post: vi.fn(), get: vi.fn(), delete: vi.fn(), put: vi.fn(),
      create: vi.fn().mockReturnThis(),
      interceptors: {
        request: {use: vi.fn(), eject: vi.fn()},
        response: {use: vi.fn(), eject: vi.fn()},
      },
    },
  }
})
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const mockedAxios = axios as jest.Mocked<typeof axios>

テスト実装

最後にテストを実装します

describe("test", () => {
  beforeEach(() => {
    vi.resetAllMocks()
  }
  
  it("test", () => {
  }
}

最後に

jestの古臭すぎる所が嫌でvitestを使ってみたのですが、新しすぎるが故にChatGPTが使い物にならなかったりして大変でした
皆でvitestを盛り上げよう！！！！！！！！！！！！！！！！！！！！！！！！