乐胖代购免代理版

はじめに

久しぶりに Jest でユニットテストを書こうと思ったものの、テスト実行のために必要なパッケージ何だっけ状態になったので、備忘のためのメモになります。

環境準備前の package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.2.15",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.15",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Next.js 環境で構築を進めていきます。

以下のコマンドで関連パッケージをインストール

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

npm install --save-dev @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/preset-typescript

package.json の script 定義に test を追加

"scripts": {
    ・・
    "test": "jest"
  },

jest の設定ファイルである jest.config.ts を作成

module.exports = {
  testEnvironment: "jest-environment-jsdom",
  transform: {
    "^.+\\.(ts|tsx|js|jsx)$": [
      "babel-jest",
      {
        presets: [
          "@babel/preset-env",
          ["@babel/preset-react", { runtime: "automatic" }], // JSXサポートを追加
          "@babel/preset-typescript",
        ],
        plugins: [
          // Babelのプラグインをここに直接指定
          "@babel/plugin-transform-runtime",
        ],
      },
    ], // TypeScript,JavaScriptファイルをトランスパイル
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"], // 拡張子を追加
  setupFilesAfterEnv: ["/setupTests.ts"],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
  extensionsToTreatAsEsm: [".ts", ".tsx"],
};

testEnvironment: "jest-environment-jsdom" -> ブラウザに近い環境でテスト実行に使われ、ReactのコンポーネントやDOM操作をテストする際に有用です
transform -> JSX や TypeScript をトランスパイルして Jest が認識できるよう変換するための定義を追加しています
各プリセットの意味（ChatGPTより）

@babel/preset-env

最新のJavaScript構文を古い環境でも実行できるようにトランスパイルします。

@babel/preset-react

ReactのJSXをJavaScriptに変換します。

{ runtime: "automatic" } により、Reactを直接インポートしなくてもJSXが使えます（React 17以降）。

@babel/preset-typescript

TypeScriptのコードをJavaScriptに変換します。

@babel/plugin-transform-runtime

重複するヘルパーコードを減らし、コンパイル結果を効率化します。

moduleFileExtensions -> Jest がテスト対象とするファイルの拡張子を指定しています
setupFilesAfterEnv -> テスト実行前の前処理で実行する用のファイルを指定しています。
moduleNameMapper -> Jest が CSS や SCSS などを扱えるようにするための指定になります
extensionsToTreatAsEsm -> Jest で ESModules を扱えるようにするための指定です

テストファイルから Jest 関連パッケージをインポートできるようにプロジェクトルートに下記を配置します。（ファイル名は任意）

setupTests.ts

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

以上で環境準備が完了したので、テストを実行してみます。

テスト対象コンポーネント

type HeaderProps = {
 title: string;
};

export const Header: React.FC<HeaderProps> = ({ title }) => {
 return (
 <header className="p-4 text-center">
 <h1 className="text-xl font-bold">{title}</h1>
 </header>
 );
};

テストコード

import { render, screen } from "@testing-library/react";
import { Header } from "../Header";

describe("Headerコンポーネントのテスト", () => {
 beforeEach(() => {
 render(<Header title="Jestテスト" />);
 });

 test("Headerタイトルが表示されること", () => {
 const headerElement = screen.getByRole("heading", { level: 1 });
 expect(headerElement).toHaveTextContent("Jestテスト");
 });
});

実行結果

npm run test

> frontend@0.1.0 test
> jest

PASS src/components/__tests__/Header.test.tsx
Headerコンポーネントのテスト
✓ Headerタイトルが表示されること (22 ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.706 s, estimated 1 s
Ran all test suites.

終わりに

久しぶりにやってみたら意外とやること多くてつまづきました。

もし何かエラーで困っている方の参考になれば嬉しいです。

lelelemon’s blog

カメの歩みでのんびり学んでいます。

【React】Jestでユニットテストを実施するための環境準備（Jest関連パッケージの追加など）