Next.js セットアップ + Jest

2024/11/09時点で最新のStable Version v15.0.3
Node.js18.18以上が必要 -> 21.5.0を利用

npx create-next-app@latest

✔ Would you like to use TypeScript? … -> Yes
✔ Would you like to use ESLint? … -> Yes
✔ Would you like to use Tailwind CSS? … -> Yes
✔ Would you like your code inside a src/ directory? … -> Yes
✔ Would you like to use App Router? (recommended) … -> Yes
✔ Would you like to use Turbopack for next dev? … -> Yes
✔ Would you like to customize the import alias (@/* by default)? … -> No

Turbopack とは

開発モードで起動 npm run dev -> localhost:3000
本番モードで起動 npm run start
本番用アプリケーションのビルド npm run build

テストの導入

設定ファイル新規作成

module.exports = {
  testEnvironment: 'node',
  testMatch: ['**/*.test.ts'],
  verbose: true
};

Jestインストール
npm install --save-dev jest @types/jest ts-jest

スクリプト追加

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

実行
npm test

react のバージョンが 19.0.0RCになっているので18に変える

"dependencies": {
    "next": "15.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
},

React18でカスタムフックのテストをするには、

@testing-library/react-hooks ではなく
@testing-library/react を使用する

とのこと

https://zenn.dev/k_kazukiiiiii/articles/9f48bdd20435d2

カスタムフックのテストをするにはさらにいろいろと必要

transformを追記（SyntaxError: Cannot use import statement outside a moduleの回避）

module.exports = {
  testEnvironment: 'node',
  testMatch: ['**/*.test.ts'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
};

jest-environment-jsdom のインストール

npm i -D jest-environment-jsdom

jsdom環境で実行するために*.test.tsの先頭に以下を記述

/**
 * @jest-environment jsdom
 */

型定義はどこでやるべきか
コンポーネントの中に置くか
別コンポーネントから参照したいケースもある