Zenn
🦾

Jest環境構築（Next.js✖️TypeScript）

2023/12/10に公開
Next.js
React
TypeScript
Jest
JavaScript
tech

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

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

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

📓 必要なライブラリ

package.json
{
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.5",
    "@testing-library/react": "^14.1.2",
    "esbuild-jest": "^0.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest-environment-jsdom": "^29.7.0",
    "user-event": "^4.0.0"
  }
}
ライブラリ 説明
@testing-library/jest-dom JestでDOM要素をテストするためのユーティリティが含まれており、　　　　　テスト中にDOM要素の状態や属性を簡単に検証できるようになる。
@testing-library/react Reactコンポーネントのテストを効果的に行うためのReact向け拡張で、　　　　コンポーネントの描画やユーザーアクションに対するテストを容易に行うことができるため、コンポーネントが期待通りに動作しているかの検証に使用する。
esbuild-jest Jestプロジェクトでesbuildを使用するためのプラグインで、　　　　　　　　　高速なJavaScriptバンドラおよびコンパイラであり、　　　　　　　　　　　　ビルドパフォーマンスを向上させるために使用する。
identity-obj-proxy Jestテスト中に、オブジェクトのプロパティアクセスに対してプロキシを提供。主にCSSモジュールなど、オブジェクトのキーがクラス名として　　　　　　　使用される場合、Jestテスト中でこれをモックするために使用する。
jest-environment-jsdom JestでJavaScriptの環境を構築するためのjsdom環境を提供する。　　　　jsdomはブラウザの簡略版で、Jestテスト中に仮想DOMを提供する。
user-event ユーザーアクション（クリック、タイプなど）をシミュレートするための　　ユーティリティで、フォームやボタンなどのUIコンポーネントのテスト中に、ユーザーが期待通りのアクションを実行したときの挙動のテストに使用する。

⚙️ 必要な設定

以下のファイルをルートディレクトリ直下に作成。

jest.setup.ts
import "@testing-library/jest-dom";
import React from "react";

global.React = React;
jest.config.ts
module.exports = {
  testEnvironment: "jest-environment-jsdom",
  setupFilesAfterEnv: ["./jest.setup.ts"],
  transform: {
    "\\.(ts|tsx)$": "esbuild-jest",
  },
  moduleNameMapper: {
    "\\.(css|scss)$": "identity-obj-proxy",
  },
};
設定項目 説明 効果
testEnvironment テストの実行環境を　指定する。 ここではJestがDOM環境でテストを実行するように設定している。これは通常、Reactなどの　　　　　UIライブラリをテストする際に使用する。
setupFilesAfterEnv テスト実行前に　　　　　　セットアップするためのファイルを指定。 jest.setup.tsファイルは、カスタムの　　　　　セットアップコードでテスト実行前に実行する。
transform ファイルの変換設定を行う。 ここでは、esbuild-jestと呼ばれる　　　　　　トランスパイラを使用している。　　　　　esbuildは高速で効率的なJavaScript/TypeScript　トランスパイラです。
moduleNameMapper モジュール名の　　　エイリアスを設定。 ここでは.cssおよび.scssファイルに対して、identity-obj-proxyが使用されるように　　　なっている。これは通常、モジュールを　　　　　　スタブ化するために使われ、　　　　　　　　　CSSモジュールの取り扱いに関連している。

📚 レビュー

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

Discussion