What steps are involved in testing a nextjs endpoint with Jest?

Question

What steps are involved in testing a nextjs endpoint with Jest?

One of my challenges is an endpoint responsible for user sign up:

import { createToken } './token'; // Unable to mock
import { sendEmail } './email'; // Unable to mock

export default async function signUp(
  req: NextApiRequest,
  res: NextApiResponse
): Promise<any> {
  try {
    // Generate a verification token
    const token = await createToken(req.user);

    // Email the token
    await sendEmail(req.user, token);

    return res.status(200).send({ done: true });
  } catch (error: any) {
    console.error(error);
    return res.status(500).end(error.message);
  }
}

I am wondering how I can properly mock these dependencies in my Jest unit tests:

import signup from './signup';

describe('signup', () => {
  it('should return success', async () => {
    const req: IncomingMessage = {} as unknown as IncomingMessage;
    const res: ServerResponse = {
      end: jest.fn(),
    } as unknown as ServerResponse;

    const actual = await signup(req, res);

    ...
  });
});

Is it possible that nested dependencies cannot be mocked by Jest directly? Should I consider implementing a DI pattern in this endpoint? If so, what are some DI patterns that can support unit testing for Nextjs endpoints?

javascript jestjs next.js

Answer 1

Answer №1

Unfortunately, it appears that jest.mock cannot mock dependencies for imports that are external to the test file (such as .spec.ts and .test.ts). This is a problem I encountered when dealing with numerous dependencies in my Next API endpoint.

As a workaround, I decided to employ Nextjs's middleware pattern to assess the logic of my endpoint instead.

// A utility function used to ensure a middleware runs before proceeding
// It also handles errors that may occur within a middleware
function runMiddleware(req: NextApiRequest, res: NextApiResponse, fn: Function) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

The solution involves extracting the endpoint logic into a function and concentrating on testing solely this extracted function.

// Testing this function, rather than the entire endpoint
export function post(
  _createToken: Function,
  _sendEmail: Function,
) {
  return async function(req: NextApiRequest, res: NextApiResponse) {
    ...
  }
}

Below is an overview of how the testing can be structured. While my actual implementation uses classes instead of functions, the testing principles remain similar.

describe('signup', () => {
  let createToken: Function;
  let sendEmail: Function;

  beforeAll(() => {
    createToken = jest.fn();
    sendEmail = jest.fn();
  });

  it('should complete the happy path', async () => {
    const req: NextApiRequest = {} as unknown as NextApiRequest;
    const res: NextApiResponse = {} as unknown as NextApiResponse;

    await (
      await post(createToken, sendEmail)
    )(req, res);

    // expect
  });
});

Answer 2

Unfortunately, it appears that jest.mock cannot mock dependencies for imports that are external to the test file (such as .spec.ts and .test.ts). This is a problem I encountered when dealing with numerous dependencies in my Next API endpoint.

As a workaround, I decided to employ Nextjs's middleware pattern to assess the logic of my endpoint instead.

// A utility function used to ensure a middleware runs before proceeding
// It also handles errors that may occur within a middleware
function runMiddleware(req: NextApiRequest, res: NextApiResponse, fn: Function) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

The solution involves extracting the endpoint logic into a function and concentrating on testing solely this extracted function.

// Testing this function, rather than the entire endpoint
export function post(
  _createToken: Function,
  _sendEmail: Function,
) {
  return async function(req: NextApiRequest, res: NextApiResponse) {
    ...
  }
}

Below is an overview of how the testing can be structured. While my actual implementation uses classes instead of functions, the testing principles remain similar.

describe('signup', () => {
  let createToken: Function;
  let sendEmail: Function;

  beforeAll(() => {
    createToken = jest.fn();
    sendEmail = jest.fn();
  });

  it('should complete the happy path', async () => {
    const req: NextApiRequest = {} as unknown as NextApiRequest;
    const res: NextApiResponse = {} as unknown as NextApiResponse;

    await (
      await post(createToken, sendEmail)
    )(req, res);

    // expect
  });
});

What steps are involved in testing a nextjs endpoint with Jest?

Answer №1

Similar questions

Can a wasm file be registered in a similar way to a JavaScript file?

bind a class property dynamically in real-time

What is the best way to remove a particular element from an array stored in Local Storage?

Implementing auto-suggest functionality in a React-Bootstrap Select component

"Is there a way to extract a specific value from an XML file based on another element

Halt the program's process until the ajax request has finished

Subscriber client successfully activated and operational via the command line interface

Securing your Angular application with user authentication and route guarding ensures

Configuring .env files for both production and development environments in Node.js

Effortlessly sending multiple forms on a single page via POST in Express JS without the need for page refresh

Can anyone provide guidance on how to simulate a click on a JavaScript action for an iPhone?

"Learn how to easily format specific characters in JavaScript using the text plugin to create bold text strings with a unique

The references to the differential loading script in index.html vary between running ng serve versus ng build

How to show the raw image content-type using Vue.js

What are the best practices for managing user forms and uploading files?

What is the most creative way you can think of to create a CSS/JS animated

Ways to display a different landing page when navigating to the homepage of a website

Click on the link or tab to update the marker location on the Google Map

Transfer the local environment variable from .env.local to the Vercel project

Modifying the hue of Material UI tab label