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

Mikael Lirbank Mikael Lirbank · Accepted Answer · 2021-06-02T18:20:21

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" });
  });
});

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

1 Answers