Testing API routes in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js API route test?

Given this Next.js API route test using the built-in test runner, what will be the test result?

NextJS

import { test, expect } from '@playwright/test';
import handler from '../../pages/api/hello';
import { createMocks } from 'node-mocks-http';

test('GET /api/hello returns status 200 and message', async () => {
  const { req, res } = createMocks({ method: 'GET' });
  await handler(req, res);
  expect(res._getStatusCode()).toBe(200);
  const data = JSON.parse(res._getData());
  expect(data.message).toBe('Hello from Next.js!');
});

A The test fails because the handler function is not asynchronous.

B The test passes because the API returns status 200 and the correct message.

C The test fails because the response data is not JSON parsable.

D The test fails because the API returns status 404 instead of 200.

💡 Hint

Check the status code and response message returned by the handler.

The handler returns status 200 with a JSON message 'Hello from Next.js!'. The test correctly mocks the request and response, so it passes.

📝 Syntax

intermediate

Which option correctly mocks a POST request to a Next.js API route?

You want to test a POST request with JSON body to a Next.js API route handler. Which code snippet correctly mocks the request and response?

A const { req, res } = createMocks({ method: 'POST', body: { name: 'Alice' } });

B const { req, res } = createMocks({ method: 'POST', json: { name: 'Alice' } });

C const { req, res } = createMocks({ method: 'POST', data: JSON.stringify({ name: 'Alice' }) });

D const { req, res } = createMocks({ method: 'POST', body: JSON.stringify({ name: 'Alice' }) });

💡 Hint

The body property should be a plain object, not a JSON string.

The createMocks function expects the body as a plain object for JSON requests. Passing JSON string or other keys like 'json' or 'data' will not work.

🔧 Debug

advanced

Why does this Next.js API route test fail with TypeError?

Consider this test code snippet: import handler from '../../pages/api/user'; import { createMocks } from 'node-mocks-http'; test('GET /api/user returns user data', async () => { const { req, res } = createMocks({ method: 'GET' }); const result = await handler(req, res); expect(res._getStatusCode()).toBe(200); }); The test fails with TypeError: handler is not a function. Why?

A The API route exports an object with multiple handlers, not a default function.

B The createMocks function is not imported correctly.

C The test file is missing the async keyword on the test function.

D The handler function is asynchronous but called without await.

💡 Hint

Check how the API route exports its handler function.

If the API route exports multiple named handlers or an object, importing default will not give a function, causing TypeError.

❓ state_output

advanced

What is the response status after this Next.js API route test?

Given this API route handler and test, what status code will the test observe? // API route handler export default function handler(req, res) { if (req.method === 'POST') { res.status(201).json({ success: true }); } else { res.status(405).json({ error: 'Method Not Allowed' }); } } // Test snippet const { req, res } = createMocks({ method: 'GET' }); await handler(req, res); const status = res._getStatusCode();

A 201

B 200

C 405

D 500

💡 Hint

Check how the handler responds to GET requests.

The handler returns 405 for any method other than POST. Since the test uses GET, status is 405.

🧠 Conceptual

expert

Which testing approach best isolates Next.js API route logic from network dependencies?

You want to test your Next.js API route logic without making real HTTP requests or relying on external services. Which approach is best?

A Deploy the API route to a staging environment and test it with real network calls.

B Use a test HTTP client like axios to send requests to a running Next.js server instance.

C Use end-to-end testing tools like Playwright to test the API route through the browser.

D Use createMocks to mock req and res objects and call the handler function directly.

💡 Hint

Think about isolating the handler logic from network and external dependencies.

Mocking req and res with createMocks lets you test the handler function directly, isolating logic and avoiding network overhead.

Practice

1. What is the main purpose of testing API routes in a Next.js application?

easy

A. To verify that the backend API responds correctly to requests

B. To style the API responses with CSS

C. To improve the frontend UI components

D. To deploy the API to production servers

Solution

1. Step 1: Understand API route role

   API routes handle backend logic and respond to client requests in Next.js.

2. Step 2: Purpose of testing API routes

   Testing ensures these routes respond correctly and handle inputs as expected.

3. Final Answer:

   To verify that the backend API responds correctly to requests -> Option A

4. Quick Check:

   API route testing = verify backend response [OK]

Hint: API route tests check backend responses, not frontend styles [OK]

Common Mistakes:

• Confusing API testing with frontend UI testing
• Thinking testing deploys the API
• Assuming API testing styles responses

2. Which of the following is the correct way to import the Next.js API route handler for testing with Jest?

easy

A. import handler from '../pages/api/hello';

B. require('../pages/api/hello');

C. import { handler } from '../pages/api/hello';

D. import * as handler from '../pages/api/hello';

Solution

1. Step 1: Identify default export usage

   Next.js API routes usually export a default function as handler.

2. Step 2: Correct import syntax for default export

   Use import handler from 'path' to import default export correctly.

3. Final Answer:

   import handler from '../pages/api/hello'; -> Option A

4. Quick Check:

   Default export import = import handler from [OK]

Hint: Use default import syntax for API route handlers [OK]

Common Mistakes:

• Using require() in ES module context
• Trying to destructure default export
• Importing all as an object unnecessarily

3. Given this test snippet for a Next.js API route handler, what will be the response status code if the handler returns res.status(200).json({ message: 'OK' })?

import handler from '../pages/api/hello';
import { createMocks } from 'node-mocks-http';

test('returns 200 status', async () => {
  const { req, res } = createMocks({ method: 'GET' });
  await handler(req, res);
  expect(res._getStatusCode()).toBe(200);
});

medium

A. 404

B. 200

C. 500

D. 400

Solution

1. Step 1: Understand handler response

   The handler sets status 200 and sends JSON with message 'OK'.

2. Step 2: Test checks status code

   The test expects status code 200, matching the handler's response.

3. Final Answer:

   200 -> Option B

4. Quick Check:

   Handler returns 200 status code [OK]

Hint: Match expected status with handler's res.status call [OK]

Common Mistakes:

• Assuming default status is 404
• Confusing JSON response with status code
• Not awaiting async handler

4. Identify the error in this test code for a Next.js API route:

import handler from '../pages/api/hello';
import { createMocks } from 'node-mocks-http';

test('returns 200 status', () => {
  const { req, res } = createMocks({ method: 'GET' });
  handler(req, res);
  expect(res._getStatusCode()).toBe(200);
});

medium

A. Using _getStatusCode instead of statusCode property

B. Incorrect import path for handler

C. Wrong method used in createMocks

D. Missing async/await for the handler call

Solution

1. Step 1: Check handler invocation

   API route handlers are async functions and must be awaited in tests.

2. Step 2: Identify missing async/await

   The test function is not async and does not await handler, causing test to run before response is set.

3. Final Answer:

   Missing async/await for the handler call -> Option D

4. Quick Check:

   Async handler needs await in test [OK]

Hint: Always await async API handlers in tests [OK]

Common Mistakes:

• Forgetting async keyword on test function
• Not awaiting the handler call
• Assuming synchronous execution

5. You want to test a Next.js API route that handles both GET and POST methods differently. Which approach correctly tests both methods in one test file?

hard

A. Use a single createMocks call with method 'GET,POST' to test both

B. Call handler once with method 'GET' and reuse the same response object for 'POST'

C. Create separate tests using createMocks with method set to 'GET' and 'POST', then call handler for each

D. Test only the GET method since POST is similar

Solution

1. Step 1: Understand method-specific testing

   Each HTTP method requires a separate mock request to simulate different behaviors.

2. Step 2: Use separate mocks for GET and POST

   CreateMocks should be called twice with method set to 'GET' and 'POST' respectively, calling handler each time.

3. Final Answer:

   Create separate tests using createMocks with method set to 'GET' and 'POST', then call handler for each -> Option C

4. Quick Check:

   Separate mocks per method = correct testing [OK]

Hint: Test each HTTP method separately with fresh mocks [OK]

Common Mistakes:

• Reusing response object across methods
• Testing only one method and ignoring others
• Trying to combine methods in one mock