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.