Testing API Routes

[ebeigarts]

I spent couple of hours figuring out how to test API routes until I found out https://github.com/ljosberinn/personal-react-boilerplate/blob/master/testUtils/api.ts.

I think it would be nice if:

• Blitz included some testing utilities for API - import { createApiRequestMock, createApiResponseMock } from "blitz/test/api/utils"
• Blitz API routes page included a test case

Example:

app/api/hello.ts:

import { BlitzApiHandler } from "blitz"

const handler: BlitzApiHandler = async (req, res) => {
  res.status(200).json({ name: "John Doe" })
}

export default handler

app/api/hello.test.js:

import { createApiRequestMock, createApiResponseMock } from "test/api/utils"
import handler from "./hello"

test("returns JSON", async () => {
  const req = createApiRequestMock({ method: "GET" })
  const res = createApiResponseMock({
    status: jest.fn().mockReturnThis(),
    json: jest.fn(),
  })
  await handler(req, res)

  expect(res.json).toHaveBeenCalledWith({
    name: "John Doe",
  })
  expect(res.status).toHaveBeenCalledWith(200)
})

test/utils/api.ts:

import { IncomingMessage, ServerResponse } from "http"
import { Socket } from "net"
import type { BlitzApiRequest, BlitzApiResponse } from "next"

export class BlitzApiResponseMock extends ServerResponse implements BlitzApiResponse {
  public send = jest.fn()
  public json = jest.fn()
  public redirect = jest.fn()
  public setPreviewData = jest.fn()
  public clearPreviewData = jest.fn()

  public status(code: number): this {
    this.statusCode = code
    return this
  }
}

export class BlitzApiRequestMock extends IncomingMessage implements BlitzApiRequest {
  public body = {}
  public env = {}
  public query = {}
  public cookies = {}
  public req = createIncomingMessageMock()

  public constructor(req: IncomingMessage) {
    super(req.socket)
  }
}

export const createApiRequestMock = (req: Partial<BlitzApiRequest> = {}): BlitzApiRequest => {
  const request = new BlitzApiRequestMock(createIncomingMessageMock(req))

  Object.entries(req).forEach(([key, value]) => {
    Object.defineProperty(request, key, { value })
  })

  return request
}

export const createIncomingMessageMock = (req: Partial<IncomingMessage> = {}): IncomingMessage => {
  const request = new IncomingMessage(new Socket())

  Object.entries(req).forEach(([key, value]) => {
    Object.defineProperty(request, key, { value })
  })

  return request
}

export const createApiResponseMock = (res: Partial<BlitzApiResponse> = {}): BlitzApiResponse => {
  const apiResponseMock = new BlitzApiResponseMock(new IncomingMessage(new Socket()))

  Object.entries(res).forEach(([key, value]) => {
    Object.defineProperty(apiResponseMock, key, { value })
  })

  return apiResponseMock
}

[beerose]

Hey @ebeigarts! Thanks for this and thanks for describing the APIs! It looks good — could you open a PR for that?

One thing we could change is removing the Api from the name: createApiResponseMock -> createResponseMock.
Things to do:

1. Put the code in nextjs/packages/next/test-utils/index.ts.
2. Add a new entry point called test-utils to the next package: https://github.com/blitz-js/blitz/blob/canary/nextjs/packages/next/ (You can take a look at stdlib as an example).
   1. Create a new test-utils.js file with export.
   2. Create a new test-utils.d.ts file with declaration exports.
   3. Add those files to the package.json to the files array.
   4. Add test-utils to taskfile.js — you can find mentions of stdlib and do the same for test-utils.

If you need any help, let us know!