Vitest環境構築（Vite ✖️ React ✖️ TypeScript）

🌐 必要最低限のVitest環境構築

🔥 この記事を読むとできるようになること

1. Vitestテスティングフレームワークの環境構築ができる

📓 必要なライブラリ

package.json

{
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.5",
    "@testing-library/react": "^14.1.2",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "jsdom": "^23.0.1",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vitest": "^1.1.0"
  }
}

⚙️ 必要な設定

ルートディレクトリ直下のvite.config.tsを編集。

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
  },
});

📚 レビュー

1. Vitestテスティングフレームワークの環境構築ができるようになったか