概要

Next.jsのAPIルートは、サーバーサイドで処理を行うエンドポイントを構築できる強力な機能です。APIルートのテストは、サーバーとクライアントの間で正しいデータの送受信を確認するために重要です。本記事では、APIルートのテスト方法、特にJestとSupertestを活用した効率的なテスト戦略を紹介します。

APIルートの基本的なテスト

Next.jsのAPIルートは、pages/apiディレクトリに配置されたファイルがエンドポイントとして機能します。これらのエンドポイントに対してテストを行うには、JestとSupertestを使用するのが一般的です。これにより、HTTPリクエストをシミュレートし、APIが正しく機能しているかを確認できます。

テスト環境のセットアップ

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

npm install --save-dev jest supertest

jest.config.jsファイルを作成し、以下の設定を追加します。

module.exports = {
  testEnvironment: 'node',
};

これで、Node.jsの環境下でAPIルートのテストを実行できるようになります。

基本的なGETリクエストのテスト

次に、APIエンドポイントに対するテストを実装します。例えば、/api/helloに対するGETリクエストのテストは以下のように書けます。

import request from 'supertest';
import handler from '../pages/api/hello';
describe('API Route /api/hello', () => {
  it('responds with a message', async () => {
    const res = await request(handler).get('/api/hello');
    expect(res.status).toBe(200);
    expect(res.body.message).toBe('Hello from `Next.js`!');
  });
});

ここでは、Supertestを使ってGETリクエストを送り、ステータスコードとレスポンスのメッセージを確認しています。

POSTリクエストのテスト

POSTリクエストも同様にテストできます。以下は、POSTリクエストでデータを送信し、サーバーがそのデータを処理する例です。

import request from 'supertest';
import handler from '../pages/api/data';
describe('API Route /api/data', () => {
  it('handles POST requests', async () => {
    const res = await request(handler)
      .post('/api/data')
      .send({ name: 'John', email: 'john@example.com' });
    expect(res.status).toBe(200);
    expect(res.body.message).toBe('Data received');
    expect(res.body.data).toEqual({ name: 'John', email: 'john@example.com' });
  });
});

ここでは、send()メソッドでPOSTリクエストのボディを送信し、その内容が正しく処理されることを確認しています。

Dynamic API Routesのテスト

動的なAPIルート（Dynamic API Routes）は、エンドポイントにパラメータを含むURLを使用します。これをテストするには、リクエストに動的パラメータを組み込みます。

import request from 'supertest';
import handler from '../pages/api/users/[id]';
describe('Dynamic API Route /api/users/[id]', () => {
  it('returns user data for a given ID', async () => {
    const res = await request(handler).get('/api/users/123');
    expect(res.status).toBe(200);
    expect(res.body.userId).toBe('123');
  });
});

この例では、動的なIDを含むAPIルート/api/users/[id]に対してGETリクエストを送り、そのIDに応じたデータが正しく返されるかを確認しています。

APIルートのテストを簡略化するライブラリ

手動でサーバーを設定するのが面倒な場合は、next-test-api-route-handlerを使うとテストがシンプルになります。このライブラリを使用することで、手動でサーバーを立ち上げることなくAPIテストが可能です。

import { testApiHandler } from 'next-test-api-route-handler';
import handler from '../pages/api/test';
describe('Test API with next-test-api-route-handler', () => {
  it('tests the API handler', async () => {
    await testApiHandler({
      handler,
      test: async ({ fetch }) => {
        const res = await fetch({ method: 'GET' });
        expect(res.status).toBe(200);
      },
    });
  });
});

これにより、APIルートのテストがさらにシンプルになります。

結論

Next.jsのAPIルートは、サーバーサイド処理を簡単に統合できる便利な機能です。そのAPIルートが正しく動作するかを確認するために、JestとSupertestを使って効率的にテストを行いましょう。Dynamic API RoutesやPOSTリクエストのテストもカバーし、さらにnext-test-api-route-handlerを使用することで、テストの手間を軽減できます。