nextjs-vitest

Next.js プロジェクトに Vitest テスト環境をセットアップします。

手順

1. 必要なパッケージをインストールする

次のコマンドを実行します。

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths @testing-library/jest-dom @testing-library/user-event

2. vitest.config.mts を作成する

プロジェクトのルートに vitest.config.mts を作成します。

import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    environment: "jsdom",
    globals: true,
    clearMocks: true,
    setupFiles: ["./vitest.setup.ts"],
  },
});

3. vitest.setup.ts を作成する

プロジェクトのルートに vitest.setup.ts を作成します。

import "@testing-library/jest-dom/vitest";

4. 完了を確認する

すべてのファイルが正しく作成されたことを確認します。