How to test dynamic API routes?

[dheeraj-p]

Hey Team,

I have dynamic API routes in my application.
For example /api/resource/[type]/[...path]
And inside my handler I am accessing request params using req.query.type and req.query.path. It's all convenient and works well.

I tried following approach for testing API routes and it works well with routes which don't deal with req.query. But I am not able to get this working with dynamic routes.
https://dev.to/metamas/testing-next-js-api-routes-55g3

import` http from "http"
import fetch from "isomorphic-unfetch"
import listen from "test-listen"
import { apiResolver } from "next-server/dist/server/api-utils"
import { handler } from "../home"

describe("/ handler", () => {
  test("responds 200 to authed GET", async () => {
    expect.assertions(1)
    let requestHandler = (req, res) => {
      res.user = { username: "scooby" }
      return apiResolver(req, res, undefined, handler)
    }
    let server = http.createServer(requestHandler)
    let url = await listen(server)
    let response = await fetch(url)
    expect(response.status).toBe(200)
    return server.close()
  })
})

Please help!

[dheeraj-p]

Got it. We can use URLSearchParams with the above approach to achieve it.

describe("/ handler", () => {
  test("responds 200 to authed GET", async () => {
    expect.assertions(1)
    let requestHandler = (req, res) => {
      return apiResolver(req, res, undefined, handler)
    }

    let server = http.createServer(requestHandler)
    const query = {
        type: 'any-value',
        path: ['some', 'dynamic', 'path'],
      };

    const response = await fetch(url + '?' + new URLSearchParams(query).toString());
    expect(response.status).toBe(200)
    return server.close()
  })
})

[rafinskipg]

This repo has great examples: https://github.com/willianantunes/nextjs-playground

[tettoffensive]

I keep seeing it written this way:

server = http.createServer((req, res) => apiResolver(req, res, undefined, handler));

But it does not match what is expected:

Expected 5-6 arguments, but got 4.ts(2554)
api-utils.d.ts(16, 114): An argument for 'apiContext' was not provided.

It's expecting a resolverModule and apiContext. I'm not really sure what these mean? Is the handler the resolverModule?

export declare function apiResolver(
req: IncomingMessage, 
res: ServerResponse, 
params: any, 
resolverModule: any, 
apiContext: __ApiPreviewProps, 
onError?: ({ err }: {

[Tymek]

filling it with blank type-matching value seems to work

return apiResolver(req, res, undefined, handler, {
  previewModeId: '',
  previewModeEncryptionKey: '',
  previewModeSigningKey: '',
}, false)

[danawoodman]

Passing undefined worked for me as well

[seanconnollydev]

The simplest solution I found was to use node-mocks-http. Full example here: https://seanconnolly.dev/unit-testing-nextjs-api-routes

import { createMocks } from 'node-mocks-http';

describe('api route', () => {
  test('returns a message', async () => {
    // Mocks req/res
    const { req, res } = createMocks({
      method: 'GET',
    });

    await handleRequest(req, res);

    expect(res._getStatusCode()).toBe(200);
  });
});

[Xunnamius]

After recycling route testing code from project to project for a while, I wrapped it up in a convenient package: next-test-api-route-handler. Maybe it'll be useful!

import * as endpoint from '../pages/api/endpoint'
import { testApiHandler } from 'next-test-api-route-handler'

import type { WithConfig } from '@ergodark/next-types'

// Import the handler under test from the pages/api directory and respect the
// Next.js config object if it's exported
const endpoint: WithConfig<typeof Endpoint.default> = Endpoint.default;
endpoint.config = Endpoint.config;

await testApiHandler({
  requestPatcher: req => req.headers = { key: SPECIAL_API_KEY },
  handler: endpoint,
  test: async ({ fetch }) => {
    expect(await fetch({ method: 'GET', body: 'data'  })).toStrictEqual({ json: 'response' });
  }
});