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

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

https://nextjs.org/docs/pages/building-your-application/testing/jest
# 前提
**Node.js：v21.7.1**
**※本手順ではNode.jsをインストール済みの前提で進めていきます。
インストールがまだの方は下記手順を参考にしてください。**

https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b

**Next.js：14.2.4**
**※2024/7/10現在最新版**
# １．プロジェクト作成
**今回はVercelが開発したTurbopackという高速バンドラーを使用します。**
また、**Next.jsは最新版を指定**しました。
```
npx create-next-app@latest --example with-turbopack
```
https://zenn.dev/rem/articles/864a6fe32e666c

続いてプロジェクトのルートディレクトリに移動し、サーバーを起動してみましょう。
```
 npm run dev
 ```
 
下記のような画面が表示されたら成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675500/93a53394-4731-1adb-fb3a-1658341400bc.png)

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

https://nextjs.org/docs/pages/building-your-application/testing/jest#manual-setup

まず、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**を作成します。
公式ドキュメント内のサンプルコードをそのままコピー＆ペーストで問題ないです。
```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** に設定を追記します。
```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を作成します。
```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を作成します。
```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`でテスト実行できます。
下記の表示が出ていれば合格です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675500/6e77d9d3-5035-912d-b79c-b81f9a7b42bd.png)

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