🤖

Vitest環境構築（Vite+React+TypeScript）

に公開
Next.js
React
TypeScript
Vite
Vitest
tech

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

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

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

📓 必要なライブラリ

package.json
{
  "devDependencies": {
    "@eslint/js": "^9.19.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@testing-library/user-event": "^14.6.1",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "@vitest/coverage-v8": "^3.0.6",
    "eslint": "^9.19.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.18",
    "globals": "^15.14.0",
    "happy-dom": "^17.1.3",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.22.0",
    "vite": "^6.1.0",
    "vitest": "^3.0.6"
  }
}

⚙️ 必要な設定

ルートディレクトリ直下にvite.config.ts, tsconfig.json, vitest.setup.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: "happy-dom",
    setupFiles: 'vitest.setup.ts'
  }
})
tsconfig.json
{
  "compilerOptions": {
    "types": [
      "vitest/globals",
      "@testing-library/jest-dom"
    ]
  }
}
vitest.setup.ts
import '@testing-library/jest-dom'

📚 レビュー

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

Discussion