Скачать или смотреть How to Test API Route Handler Functions in Next.js Using Jest

Learn how to effectively test API route handler functions in Next.js using Jest, ensuring your application responds correctly with a status of 200 and the expected JSON output.
---
This video is based on the question https://stackoverflow.com/q/72261108/ asked by the user 'Ben Bagley' ( https://stackoverflow.com/u/12370067/ ) and on the answer https://stackoverflow.com/a/72266530/ provided by the user 'juliomalves' ( https://stackoverflow.com/u/1870780/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Test API route handler function in Next.js using Jest

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Test API Route Handler Functions in Next.js Using Jest

Unit testing is an essential part of application development, ensuring that your code behaves as expected. If you’re developing an application using Next.js, you might find yourself needing to test API route handler functions to verify their behavior under different conditions. In this guide, we’ll explore how to test a simple health check route using Jest.

The Problem: Testing an API Route Handler

Let's say you have a basic health check function defined as follows:

[[See Video to Reveal this Text or Code Snippet]]

Your goal is to ensure that this handler correctly responds with a status code of 200 and the expected JSON response. The challenge arises when mocking the request and response functions within your Jest tests.

The Solution: Mocking the Response Object

To test the handler function effectively, you need to simulate the res object while invoking the handler. Here’s a step-by-step guide on how to achieve that.

Step 1: Setting Up Your Test

Start by importing the handler function into your test file:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Describing the Test Suite

Use describe to create a test suite for your health check:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Writing the Test Case

Inside the test suite, you will create a test case that verifies if the status code is set to 200 and the correct JSON message is being sent back. The test block looks like this:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Mocking the Response Object

Here’s how to mock the response object:

[[See Video to Reveal this Text or Code Snippet]]

Here, we create resMock to represent the response object and resStatusMock to mock the json method. The line mockReturnValue sets up the expected behavior for the status method.

Step 5: Invoking the Handler

Call the handler function with undefined for the request object and your mocked response object:

[[See Video to Reveal this Text or Code Snippet]]

Step 6: Asserting the Expectations

Next, use Jest's expect function to check if the status and JSON methods have been called correctly:

[[See Video to Reveal this Text or Code Snippet]]

Full Test Code Example

Putting it all together, your complete test file should look like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By implementing these steps, you can easily test API route handler functions in Next.js using Jest. Mocking the request and response objects allows for a controlled testing environment where you can verify that your functions return the expected results. Happy testing!