Next.jsのプロジェクトでテストが難しくなってきたのでJestを使用してみたくなったので入門してみました。

パッケージのインストールと初期化・設定

まずは必要なパッケージをインストールします。

npm install -D ts-node ts-jest @types/jest

インストール出来たらJestの初期化コマンドで必要なファイルを作成します

npm init jest@latest

jest.config.tsが作成できたら自分の環境用に編集します。

typescriptの利用と、自己署名でも通信可能なように変更します。

また、Jestの設定を管理できるファイルの読み込みを行います。

import type { Config } from 'jest';

const config: Config = {
	coverageProvider: "v8",
	moduleFileExtensions: [
		"js",
		"mjs",
		"cjs",
		"jsx",
		"ts",
		"mts",
		"cts",
		"tsx",
		"json",
		"node"
	 ],
	 setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
	 transform: {
	    '^.+\\.(ts|tsx)$': 'ts-jest',
	    '^.+\\.(js|jsx)$': 'babel-jest',
	 },
}

export default config;

次にJestの設定ファイルjest.setup.tsを作成します。

中身はaxiosで自己署名のURLでも通信できるようにする設定です。

この設定はどのテストファイルでも共通で読み込まれます。

import https from 'https';
import axios from 'axios';

// 自己署名証明書を許可
axios.defaults.httpsAgent = new https.Agent({
    rejectUnauthorized: false
});

テストファイルを作成する

今回はプロジェクト内の製品情報取得APIのテストを行ってみます。

APIの実際のファイルはsrc/app/api/getProductList/route.tsです。

試しにテストファイルを作成してみます。

import axios from 'axios';

describe('api/getProductList', () => {

    it('正常系:商品リストの取得', async() => {

        // axiosを使用してAPIを呼び出す

        const response = await axios.get('https://localhost:3000/api/getProductList');

        const data = response.data;

        expect(data).toEqual({
            status: true,
            message: '商品リストを取得しました',
            products: expect.any(Array)
        });
    });
})

ローカルでプロジェクトを立ち上げてテストを実行してみます。

npm run dev
npm run test test.ts

 PASS  ./test.ts
  api/getProductList
    √ 正常系:商品リストの取得 (605 ms)                                                                                               
                                                                                                                                     
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.937 s, estimated 2 s
Ran all test suites matching .\test.ts.

実行できました！