【Next.js】プロジェクト作成～Jest導入手順

はじめに

これまでReactを中心に学習をしてきましたが、ついにNext.jsデビューしました。
公式ドキュメントに書いてある手順をそのまま実行すればいいだけなのですが、つまずいた点も踏まえて簡単にまとめていきます。

前提

Node.js：v21.7.1
※本手順ではNode.jsをインストール済みの前提で進めていきます。
インストールがまだの方は下記手順を参考にしてください。

Next.js：14.2.4
※2024/7/10現在最新版

１．プロジェクト作成

今回はVercelが開発したTurbopackという高速バンドラーを使用します。
また、Next.jsは最新版を指定しました。

npx create-next-app@latest --example with-turbopack

続いてプロジェクトのルートディレクトリに移動し、サーバーを起動してみましょう。

 npm run dev

下記のような画面が表示されたら成功です。

2.　Jest導入

ここからは公式ドキュメントとほぼ同じ流れですが、まとめとして流れを書いていきます。
※今回Babelは使用しないので、ドキュメント内の "Setting up Jest (with Babel)" は行いません。

まず、Jestのインストールと関連ファイルの作成を行います。

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

npm init jest@latest

上記のコマンドを実行すると、いくつか質問が出てくるので回答していきます。
今回は下記のように回答しました。

１．"Choose the test environment that will be used for testing"

回答: node
サーバーサイドコードをテストする場合や、ブラウザ固有の機能を必要としない場合は node を選択します。クライアントサイドのテストを行う場合は jsdom を選択します。

２．"Do you want Jest to add coverage reports?"

回答: yes
yesを選択すると、テストのカバレッジレポートを生成する機能が有効になります。

３．"Which provider should be used to instrument code for coverage?"

回答: v8
v8 は Node.js 環境でのテストに適しています。
もう一つの選択肢である babel は、特定の要件がある場合に使用します。

４．"Automatically clear mock calls, instances, contexts and results before every test?"

回答: yes
yesを選択すると、各テストが他のテストの状態に依存しないようになります。

---

続いて、プロジェクトのルートディレクトリにjest.config.tsを作成します。
公式ドキュメント内のサンプルコードをそのままコピー＆ペーストで問題ないです。

jest.config.ts

import type { Config } from "jest";
import nextJest from "next/jest.js";

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

// Add any custom config to be passed to Jest
const config: Config = {
  coverageProvider: "v8",
  testEnvironment: "jsdom",
  // Add more setup options before each test is run
  //setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config);

---

最後にpackage.json に設定を追記します。

package.json

  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "test": "jest",               //追記
    "test:watch": "jest --watch" //追記
  },

以上です！お疲れさまでした。

おまけ：Jestの動作確認

実際にJestが正常に動くかどうか、簡単なテストを書いて実行してみましょう。
今回はタイトルコンポーネントを作成して、テストを実施します。

src/app/components配下にTitle.tsxを作成します。

Title.tsx

import React from "react";

const Title = () => {
  return <h1 data-testid="title">Hello Jest</h1>;
};

export default Title;

続いてテストファイルを作成します。
src/__tests__配下にTitle.test.tsxを作成します。

Title.test.tsx

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import Title from "@/app/components/Title";

describe("Title component", () => {
  it("タイトルがあること", () => {
    render(<Title />);
    const title = screen.getByTestId("title");
    expect(title).toHaveTextContent("Hello Jest");
  });
});

npm run testでテスト実行できます。
下記の表示が出ていれば合格です。

おわりに

これまでReactの学習しかしてこなかったのもあり、Next.jsのキャッチアップには苦戦していますが、地道に手を動かしていきます。