AppRouterのAPIでテストコードを書く方法

以下のようなAPIがあるとする

/src/app/api/hello/route.ts

import { NextResponse } from "next/server";

export async function GET() {
    return NextResponse.json({
        message: "Hello!!"
    })
}

next-test-api-route-handlerをインストールしてテストコードを書く

/src/test/helle.test.ts

import * as appHandler from "@/app/api/hello/route";
import { testApiHandler } from "next-test-api-route-handler";
describe("HelloAPIのテスト", () => {
  test("Helloが返ってくるか", async () => {
    await testApiHandler({
      appHandler,
      async test({ fetch }) {
        const res = await fetch({
          method: "GET",
        });
        expect(await res.json()).toStrictEqual({
          message: "Hello!!"
        });
      },
    });
  });
});

import * as appHandler from "@/app/api/hello/route";の書き方で、GET関数をappHandlerの中に入れる感じでインポートして、testApiHandlerにつっこんでいる。

POSTやパラメータを渡して送信する際はこう

/src/app/api/send/route.ts

import * as appHandler from "@/app/api/send/route";
import { testApiHandler } from 'next-test-api-route-handler'; 

describe("Send APIのテスト", () => {
  test("sendで送信されるか", async () => {
    await testApiHandler({
      appHandler,
      async test({ fetch }) {
        const res = await fetch({ method: 'POST', body: JSON.stringify({
          name: "John Doe", email: "[e-mail]", content: "Hello World."
        }) });
        expect(await res.json()).toStrictEqual({ message: "送信に成功しました。" });
      }
    });
  });
});

test関数の引数のオブジェクト内にあるfetch関数がブラウザなどで使うfetch関数と似たような実装になっている。

あとはファイルのインポートのパスが@/*から始まっているので、jest.config.tsでその設定などを忘れずにしたら動く。