🎉

NEXT.JSのAppRouterで作ったAPIをE2Eテストする(Playwright)

2025/04/06に公開

Next.js

Playwright

tech

環境は以下の通り

"next": "^15.2.3",
"@playwright/test": "^1.51.1",

APIのテストを実施するためPalywrightを使います。今日は静的なレスポンスを返すAPIを作って、E2Eテストを動かすところまで試してみます。

こちらを参考にさせていただきました。

Playwrightの設定

デフォルトに開発環境の設定だけ反映します。

playwright.config.ts

export default defineConfig({
  testDir: './tests',
・・・
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

APIのロジック

試すために簡単なAPIを作成

/app/api/hello/route.ts

import { NextResponse } from "next/server";

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

テストコード

/tests/hello.spec.ts

import { test, expect } from '@playwright/test';

test('hello api', async ({ request }) => {
  const reponse = await request.get(`/api/hello`)
  expect(reponse.ok()).toBeTruthy()
  expect(await reponse.json()).toEqual({ message: 'Hello!!' })
});

APIは /api/hello にリクエストを送ると {message:Hello!!} を返すだけの単純なもの。これでテストを実施します。

$ npm run test              
> lifelog@0.1.0 test
> playwright test
Running 3 tests using 3 workers
  3 passed (7.3s)

想定通りテスト成功しました。次回はAuth.jsで認証を入れているAPIに対して認証NGのテスト(401)と、認証OKでレスポンスを受け取るテストを実施しようと思います。

Auth.jsでは認証情報をDBに保持する設定にして、テスト時に認証テーブルにデータを登録して、それを使うテストにする予定です。

Playwrightの設定

APIのロジック

テストコード

Discussion