Zenn
🔥

Next.jsプロジェクトにJestをセットアップする方法

2022/09/10に公開
Next.js
TypeScript
Jest
tech

こんにちは。shootaceanです。

create-next-app で Next.jsプロジェクトを作成した際でも、ユニットテストツールはセットアップされていません。
何度も思い出しながらセットアップしてきたので、メモとして残しておきます。

よく使うものがインストール済みNext.jsボイラープレートをつくったので、よければ使ってください！
( Jest, React Testing Library, Playwright, Prettier, ESLint, Husky )
shootacean/next.js-boilerplate

はじめに

Next.js公式ドキュメントにテストツールについても紹介されていますが、

  • TypeScriptではなくJavaScript前提になっている
  • React Testing Libraryとセットになっている

ため、Jest単体で導入したい、TypeScriptを使いたい、場合は公式ドキュメントの手順にプラスαが必要になります。
この記事ではそのプラスαを補う部分を紹介します。

Testing | Next.js

ざっくりとした手順

  • Jestをインストールする
  • Jestの設定ファイルを作成する
  • テスト実行用のnpmスクリプトを追加する
  • テストコードを書く
  • テストを実行する
  • おわり！

前提

  • create-next-appした状態
    • 例) pnpm create next-app -- --ts
  • Next.js 12
  • TypeScript
  • SWC
    • Babelを使用する場合は、公式ドキュメントを参考にしてください。
    • Testing | Next.js

Jestをインストールする

今回はTypeScript環境なのでts-jestと@types/jestもインストールする必要があります。

$ pnpm i -D jest ts-jest @types/jest

Jestの設定ファイルを作成する

設定ファイルの雛形として、公式ドキュメントの内容が利用できます。
Testing | Next.js

追加・変更している部分にコメントをしていますので、まるっとコピペするか、コメント部分を適宜取り込んでください。
( といっても、1行しか差分なかったです… )

jest.config.js
// jest.config.js
const nextJest = require('next/jest')

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
/** @type {import('jest').Config} */
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  // ↓1行を変更しています: React Testing Libraryはまだ利用しないのでコメントアウト
  // testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

テスト実行用のnpmスクリプトを追加する

テスト実行のnpmスクリプトは未定義なので追加します。

package.json
  "scripts": {
    ...
    "test": "jest --watch",
    "test:ci": "jest",
    ...
  }

ソースコードを srcディレクトリ に移動する(任意手順)

必須の手順ではないです。
個人的には管理しやすいのでsrcディレクトリを追加することが多いです。

$ cd your-nextjs-project
$ mkdir ./src
$ mv pages ./src/
$ mv styles ./src/

テストコードを書く

足し算ができるかをチェックするテストコードと、足し算の処理をサンプルとして書きます。

$ mkdir ./src/libs
$ touch ./src/libs/sample.test.ts
$ touch ./src/libs/sample.ts
./src/libs/sample.test.ts
import { add } from './sample';

describe('Sample unit test.', () => {
  test('1 + 2 = 3', () => {
    expect(add(1, 2)).toBe(3);
  });
});
./src/libs/sample.ts
export const add = (a: number, b: number): number => a + b;

テストを実行する

npm run test か npm run test:ci を実行して正常に終了すればJestのセットアップは完了です！

$ npm run test:ci # or npm run test
> your-nextjs-project@0.1.0 test:ci ~/your-nextjs-project
> jest

info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
 PASS  src/libs/sample.test.ts

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

おわり！

お疲れさまでした！
スモールなプロジェクトを複数立ち上げる際などは頻繁にJestのセットアップをすると思います。
その際の手順書として利用していただければ幸いです。

本記事の手順でうまくいかなかった場合は、コメントいただけると助かります…！

Discussion