Testing API route handlers function in Next.js with Jest

Here is a health check function that I am working with:

export default function handler(req, res) {
  res.status(200).json({ message: "Hello from Next.js!" });
}

Alongside this function, there is a test in place:

import handler from "./healthcheck"

describe("Healthcheck", () => {
  test("verifying the application is live and returning status 200", () => {
    const mockFn = jest.fn({
      status: jest.fn(),
      json: jest.fn()
    });

    expect(mockFn).toHaveBeenCalledWith();
    expect(mockFn.status).toBe(200);
  });
});

While testing, the main goal is to ensure that the function is being executed and the response status is set to 200. To achieve this, it is necessary to properly mock out the functions within the request and response objects.

Answer №1

In the function handler, there is a parameter called res that can be mocked and passed into the function when testing. By doing this, you are able to verify that the mocks were called correctly.

import handler from "./healthcheck"

describe("Healthcheck", () => {
    test("Ensuring the application is running with a status of 200", () => {
        const resMock = { status: jest.fn() }; // Creating a mock for `res`
        const resStatusMock = { json: jest.fn() }; // Mocking `res.status`
        resMock.status.mockReturnValue(resStatusMock); // Setting `res.status` return value as `resStatusMock`
        
        handler(undefined, resMock);

        expect(resMock.status).toHaveBeenCalledWith(200);
        expect(resStatusMock.json).toHaveBeenCalledWith({
            message: "Hello from Next.js!"
        });
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing w3-import-html with JavaScript

<div id="import" includeHTML="page.html"></div> function getInclude() { var x = document.getElementById("import").includeHTML; //returns 'undefined' alert(x); } function modInclude() { document.getElementById("import") ...

Make use of a unique custom CSS class that has been included in the MantineProvider theme's global

Struggling to integrate a new class into the Mantine theme globalStyles (check out the reference here: ). I have successfully added the style to the MantineProvider, but am facing challenges accessing it within my component! When I apply the class to a Tex ...

Is it possible to have the Target='_blank' attribute open the link in a new window instead of a new tab?

Is there a way to achieve this? When using Firefox, the link opens in a new tab, which I prefer to avoid users having to adjust settings in their browsers. I am looking for a solution where a pop-up contact form appears whenever a user clicks on 'co ...

What is the best way to extract a JSON string from the login PHP response?

I am working on creating a basic website along with an Android application that both retrieve data from the same database. While I have no issues in dealing with Android, I am facing difficulty in handling JSON strings in HTML. How can I fetch the JSON res ...

Vertical scrollbar in iframe unexpectedly appears immediately after the submit button is pressed

I have designed a contact form that is displayed in an iframe within an overlay div. I have carefully adjusted the dimensions of this div to ensure that there are no scrollbars visible when the form initially appears. However, after filling out the form an ...

Using jQuery to transfer data via POST method

I'm currently working on integrating a third-party tool into our website. The tool requires the use of a form with the post method to send data to their site. Is there a way for me to replicate this action without relying on the form tag? I am not ver ...

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

I've encountered an issue with a script that draws a canvas based on the background color of an image. The image is loaded dynamically from a database using PHP. The responsive functionality works fine on mobile Safari, but not on Chrome. When the re ...

Exploring the Methods to Filter JSON Data in Node.js

There have been significant changes in technologies over the past couple of years since I last checked answers to this question. Currently, I am dealing with JSON files that are being transmitted from a database to my server. My main concern is how to eff ...

Error encountered when trying to access children components in Typescript, even though React.FC is being

I am facing an issue with a child component that has the following structure: interface ChildProps extends AnotherInterface{ route: string, exitAction: ActionCreatorWithoutPayload, } const ChildComponent:FC<ChildProps> = ({title, shape, rout ...

Executing a function should be delayed until all necessary information is obtained from the REST Api

I want to create a chart showing data for each month over the course of 12 months. The data for each month will be retrieved from a REST API. Here is my approach: $.getJSON(link, function(data){ // store data in a variable } Repeat this process 12 t ...

Securing pages in Laravel and Vue JS: Restricting access to unauthorized users

I have some concerns about my project as it relies on local storage. What if someone figures out how to manipulate it and change roles and permissions set for the logged-in user? For example, if someone changed ['accounting'] to ['accounting ...

The geolocation navigator is not defined

Currently, I am in the process of developing an AngularJS application that I plan to convert into a mobile app using Cordova. My goal is to incorporate Cordova's geolocation plugin into the app, but I have encountered an issue where it returns undefin ...

Unveiling the secret to accessing properties using v-if within a custom component template relocation

I'm currently working on an application that reveals a hidden div when the text "Create Test" is clicked. Everything works well when the code isn't placed inside the template of a component. This seems strange to me, what could be causing this is ...

What could be causing my code to generate an error?

I'm encountering an error in module.js:339 where it throws an 'err' and I'm struggling to identify the exact cause or line of code that needs fixing. Any guidance on where to look would be greatly appreciated, as I seem to be searching ...

Use regular expressions and JavaScript to enclose a series of English letters within a wrapper

I am looking to enclose a series or cluster of consecutive English characters within a <span> tag. In simpler terms, I aim to alter the appearance of English language in my writing. Therefore, I need to identify English characters and surround them ...

Tips for receiving dual return values from an AJAX request

I am sending an array of table IDs to retrieve the table numbers associated with those IDs from the database. I need to add up all the default seats for each table ID and return the total. JAVASCRIPT : function showUser(str) { if ...

Let's leverage the power of Node.js and Express with the Jade templating

My goal is to iterate over an array within a jade layout file named lessons.jade: each lesson in myLessons ul.nav.pull-center: li.dropdown.nav.text-center .btn.btn-default.dropdown-toggle.btn-lg.btn-block(data-toggle="dropdown ...

What is the best way to incorporate a massive HTML string into a WebView using the LoadHTMLString technique?

I am struggling to display an HTML string on a UIWebView using the 'LoadHTMLString' method. Below is the code snippet I am using: [wv loadHTMLString:[NSString stringWithFormat:@"<!DOCTYPE html><html><head><meta name=\" ...

Arranging Angular Array-like Objects

I am in possession of an item: { "200737212": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "nice ...

Next.js endeavors to interpret MDX files as basic JavaScript code

Currently, I'm in the process of creating a website using Next.js and incorporating (local) MDX files for my content. However, I've encountered an issue where whenever I add a .MDX file to my source tree and attempt to navigate to it, Next.js thr ...