How can I test express server with supertest in next.js?

Question

I have built my portfolio webpage with next.js now I need to test it. to test the express server I use supertest. But the problem is I need to refactor express to use it. Because supertest need to access to app() before listening.

I started the way how I used to implement in node.js app. Put the express code in app.js and call it in index.js.

const express = require("express");
const server = express();
const authService = require("./services/auth");
const bodyParser = require("body-parser");
//put all the middlewares here

module.exports = server;

and then in index.js

const server = require("express")();
// const { parse } = require("url");
const next = require("next");
const routes = require("../routes");

const path = require("path");
require("./mongodb");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
// const handle = app.getRequestHandler(); //this is built in next route handler
const handle = routes.getRequestHandler(app);


app
  .prepare()
  .then(() => {
     const server = require("./app");
     //I required this outside too but it did not solve the issue


    server.listen(3000, (err) => {
      if (err) throw err;
      console.log("> Ready on http://localhost:3000");
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

with this set up, express is listening, I am able connect to mongodb, during the start up there is no issue.

When i request to localhost:3000, there is no response from localhost, it is spinning till timeout

Answer 1

Create a test client:

// test-client.ts

import { createServer, RequestListener } from "http";
import { NextApiHandler } from "next";
import { apiResolver } from "next/dist/next-server/server/api-utils";
import request from "supertest";

export const testClient = (handler: NextApiHandler) => {
  const listener: RequestListener = (req, res) => {
    return apiResolver(
      req,
      res,
      undefined,
      handler,
      {
        previewModeEncryptionKey: "",
        previewModeId: "",
        previewModeSigningKey: "",
      },
      false
    );
  };

  return request(createServer(listener));
};

Test your APIs with:

// user.test.ts

import viewerApiHandler from "../api/user";
import { testClient } from "../utils/test-client";

const request = testClient(viewerApiHandler);

describe("/user", () => {
  it("should return current user", async () => {
    const res = await request.get("/user");
    expect(res.status).toBe(200);
    expect(res.body).toStrictEqual({ name: "Jane Doe" });
  });
});

Answer 2

For those who want to add query parameters, here's the answer:

import { createServer, RequestListener } from 'http'
import { NextApiHandler } from 'next'
import { apiResolver } from 'next/dist/server/api-utils/node'
import request from 'supertest'

export const handlerRequester = (handler: NextApiHandler) => {
  const listener: RequestListener = (req, res) => {
    let query = {}
    let queryUrl = req.url.split('?')[1]
    if (queryUrl) {
      queryUrl
        .split('&')
        .map((p) => [p.split('=')[0], p.split('=')[1]])
        .forEach((k) => {
          query[k[0]] = k[1]
        })
    }
    return apiResolver(
      req,
      res,
      query,
      handler,
      {
        previewModeEncryptionKey: '',
        previewModeId: '',
        previewModeSigningKey: '',
      },
      false
    )
  }
  const server = createServer(listener)
  return [request(server), server]
}

Answer 3

I've just released a new npm package which handle this case here: https://www.npmjs.com/package/nextjs-http-supertest

Feel free to test it and give me feedback !