Jest setup for Next.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Jest test output when run in a Next.js project?

Consider this simple React component and its Jest test in a Next.js environment.

What will the test output when executed?

NextJS

import { render, screen } from '@testing-library/react';
import Home from '../pages/index';

test('renders welcome message', () => {
  render(<Home />);
  const heading = screen.getByRole('heading', { name: /welcome to next\.js!/i });
  expect(heading).toBeInTheDocument();
});

A Test fails with timeout error due to missing async handling.

B Test fails with error: Cannot find role 'heading'.

C Test passes because the heading with text 'Welcome to Next.js!' is found.

D Test fails because the component Home is not imported correctly.

💡 Hint

Check if the component renders a heading with the expected text and if the test queries it correctly.

The test renders the Home component and looks for a heading with the text 'Welcome to Next.js!'. If the component contains this heading, the test passes.

📝 Syntax

intermediate

Which Jest configuration snippet correctly sets up Next.js testing environment?

You want to configure Jest for a Next.js project. Which of these jest.config.js snippets is correct to support Next.js features?

A module.exports = { preset: 'next/jest', testEnvironment: 'jsdom' };

B module.exports = { preset: 'ts-jest', testEnvironment: 'node' };

C module.exports = { preset: 'next/babel', testEnvironment: 'jsdom' };

D module.exports = { preset: 'react', testEnvironment: 'node' };

💡 Hint

Next.js provides a Jest preset to handle its features properly.

The correct preset for Jest in Next.js projects is 'next/jest' which configures Jest to work with Next.js features and uses 'jsdom' as the test environment for browser-like testing.

🔧 Debug

advanced

Why does this Jest test fail with a SyntaxError in a Next.js project?

Given this test file in a Next.js project, why does Jest throw a SyntaxError when running it?

NextJS

import { render } from '@testing-library/react';
import Component from '../components/Component';

test('renders component', () => {
  render(<Component />);
});

A Jest is not configured to transform ESModules and JSX, causing SyntaxError.

B The Component import path is incorrect, causing a module not found error.

C The render function is used incorrectly without a container.

D The test is missing an assertion, causing Jest to fail.

💡 Hint

Check if Jest can understand JSX and ESModules without proper transformers.

Jest needs to transform JSX and ESModules syntax. Without proper configuration (like using 'next/jest' preset), Jest throws SyntaxError on JSX code.

❓ state_output

advanced

What is the output of this Jest test with mocked Next.js router?

This test mocks Next.js useRouter hook. What will be the console output when running this test?

NextJS

import { render, screen } from '@testing-library/react';
import { useRouter } from 'next/router';
import Component from '../components/Component';

jest.mock('next/router', () => ({
  useRouter: jest.fn(),
}));

test('shows current path', () => {
  useRouter.mockReturnValue({ pathname: '/test-path' });
  render(<Component />);
  console.log(screen.getByText(/current path:/i).textContent);
});

A Error: useRouter.mockReturnValue is not a function

B Current path: /test-path

C Current path: /

D Error: Cannot find text 'current path:'

💡 Hint

Mocking useRouter returns the pathname used by the component.

The mock sets useRouter to return pathname '/test-path'. The component renders text containing 'Current path: /test-path'. The console.log outputs this text.

🧠 Conceptual

expert

Which statement best explains why Jest needs a custom setup for Next.js projects?

Next.js uses features like dynamic imports, CSS modules, and image imports. Why does Jest require special configuration to test Next.js apps?

A Because Jest only supports React apps created with Create React App and not Next.js.

B Because Next.js uses non-standard JavaScript syntax that Jest does not support by default.

C Because Jest cannot run tests on server-side code, so Next.js needs client-only mocks.

D Because Next.js features require Jest to transform files and mock assets properly to avoid errors.

💡 Hint

Think about how Jest handles imports like CSS and images in Next.js.

Next.js uses features like CSS modules and image imports that Jest cannot handle without transformation or mocks. The custom setup ensures Jest can process these files and avoid errors.