Testing API routes in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the testing library for Next.js API routes.

NextJS

import { [1] } from 'next-test-api-route-handler';

Drag options to blanks, or click blank then click option'

AtestApiHandler

BuseRouter

Crender

DgetServerSideProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using render which is for React components, not API routes.

Using useRouter which is for client-side routing.

Using getServerSideProps which is for server-side rendering.

The function testApiHandler is used to test Next.js API routes by simulating requests and responses.

2fill in blank

medium

Complete the code to define a test that checks the API route returns status 200.

NextJS

test('returns status 200', async () => {
  await testApiHandler({
    handler: apiRoute,
    test: async ({ fetch }) => {
      const res = await fetch();
      expect(res.status).toBe([1]);
    },
  });
});

Drag options to blanks, or click blank then click option'

A404

B200

C500

D302

Attempts:

3 left

💡 Hint

Common Mistakes

Using 404 which means the route was not found.

Using 500 which means server error.

Using 302 which means redirect.

A successful API response usually returns status code 200.

3fill in blank

hard

Fix the error in the test by completing the code to import the API route correctly.

NextJS

import [1] from '../../pages/api/hello';

Drag options to blanks, or click blank then click option'

AapiRoute

Bhandler

CapiHandler

DhelloApi

Attempts:

3 left

💡 Hint

Common Mistakes

Using a name that does not match the default export.

Using a named import instead of default import.

The API route is usually exported as a default function named apiRoute or similar; here we use apiRoute as the import name.

4fill in blank

hard

Fill both blanks to test the API route returns JSON with a message property.

NextJS

test('returns JSON with message', async () => {
  await testApiHandler({
    handler: apiRoute,
    test: async ({ fetch }) => {
      const res = await fetch();
      const data = await res.[1]();
      expect(data).toHaveProperty([2]);
    },
  });
});

Drag options to blanks, or click blank then click option'

Ajson

B'message'

C'status'

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.text() instead of res.json().

Checking for a wrong property like 'status'.

The response is parsed as JSON using res.json(), and we check that the data has a 'message' property.

5fill in blank

hard

Fill all three blanks to test the API route handles POST requests with JSON body.

NextJS

test('handles POST request', async () => {
  await testApiHandler({
    handler: apiRoute,
    test: async ({ fetch }) => {
      const res = await fetch('', {
        method: [1],
        headers: { 'Content-Type': [2] },
        body: JSON.stringify({ name: 'Next.js' }),
      });
      const data = await res.json();
      expect(data).toHaveProperty([3]);
    },
  });
});

Drag options to blanks, or click blank then click option'

A'POST'

B'application/json'

C'name'

D'GET'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' method instead of 'POST'.

Missing or wrong Content-Type header.

Checking for wrong property in response.

To send JSON data, method must be 'POST', content type header 'application/json', and we check the response has property 'name'.

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