Jestのインストール

🧪 Jestのインストールとセットアップ

Jestは、特にReact環境で広く使われるJavaScriptのテストフレームワークです。ViteやNext.jsなどの環境では、トランスパイル設定が異なるため、それぞれの環境に合わせた追加設定が必要です。

1. Jestのコアライブラリをインストールする 📦

まず、jestと、テスト中にDOMをシミュレートするためのjsdomを開発用依存関係としてインストールします。

npm install --save-dev jest jest-environment-jsdom

2. package.jsonにテストスクリプトを追加する ⚙️

テストを簡単に実行できるように、package.jsonファイルに”test”スクリプトを追加します。

"scripts": {
  "test": "jest"
}

これで、ターミナルでnpm testと入力するだけでJestを実行できます。

⚡ ViteでのJestセットアップ

ViteはESモジュール（ESM）をネイティブにサポートしていますが、Jestは通常CommonJS環境で動作します。そのため、JestにESMを扱えるように設定する必要があります。

1. 依存ライブラリのインストール 🧩

ESMとJSX（React）をサポートするために、以下のライブラリをインストールします。

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

• @babel/core: JavaScriptのトランスパイルに必要です。
• @babel/preset-env: 最新のJavaScript構文をJestが理解できる古い構文に変換します。
• @babel/preset-react: JSXをJavaScriptに変換します。

2. Babelの設定ファイルを作成する 📝

プロジェクトのルートに.babelrcファイルを作成し、先ほどインストールしたプリセットを設定します。これにより、JestはReactコンポーネントを正しく処理できるようになります。

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

3. Jestの設定ファイルを更新する 🛠️

jest.config.jsファイルを作成し、テストファイルがどこにあるか、どのような環境で実行するかなどを設定します。Vite環境では、特にESMをトランスパイルする設定が重要です。

jest.config.js

module.exports = {
  // テスト環境をjsdomに設定
  testEnvironment: 'jest-environment-jsdom',
  // テストファイルの検索パターン
  testMatch: ["**/__tests__/**/*.js?(x)", "**/?(*.)+(spec|test).js?(x)"],
  // ESモジュールをCommonJSに変換
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest",
  },
  // テスト対象外のディレクトリ
  transformIgnorePatterns: [
    "/node_modules/",
  ],
  // モジュール解決エイリアスの設定（Viteの設定と一致させる）
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

これで、ViteプロジェクトでJestが動作するようになります。

⚛️ Next.jsでのJestセットアップ

Next.jsには、組み込みのBabel設定があるため、Jestの設定が比較的シンプルです。next/jestパッケージがJestとNext.jsの連携を自動的に処理してくれます。

1. 依存ライブラリのインストール 🧩

Next.js環境でJestを動かすために、以下のライブラリをインストールします。

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

• @testing-library/react: コンポーネントのテストをより簡単にします。
• @testing-library/jest-dom: Jestに便利なDOMマッチャーを追加します。

2. Jest設定ファイルを生成する 📝

Next.jsプロジェクトのルートで以下のコマンドを実行します。これにより、Jestの設定ファイルが自動的に生成されます。

npx jest --init

3. 設定ファイルを調整する 🛠️

生成されたjest.config.jsを編集し、next/jestパッケージを使ってNext.jsの機能をJestで有効にします。

jest.config.js

const nextJest = require('next/jest');

// next.config.jsから設定を読み込む
const createJestConfig = nextJest({
  dir: './',
});

// Jestの設定を追加
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
};

module.exports = createJestConfig(customJestConfig);

4. jest.setup.jsファイルを作成する 📄

@testing-library/jest-domの機能を有効にするために、ルートにjest.setup.jsファイルを作成します。

jest.setup.js

import '@testing-library/jest-dom/extend-expect';

これにより、JestはNext.jsの環境でシームレスに動作し、Reactコンポーネントを簡単にテストできるようになります。