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.

Practice

1. What is the main purpose of using Jest in a Next.js project?

easy

A. To deploy the app to a server

B. To run automated tests and catch bugs early

C. To style components with CSS

D. To build the Next.js application for production

Solution

1. Step 1: Understand Jest's role

   Jest is a testing framework used to run automated tests on code.

2. Step 2: Identify Jest's purpose in Next.js

   In Next.js, Jest helps find bugs early by running tests on components and functions.

3. Final Answer:

   To run automated tests and catch bugs early -> Option B

4. Quick Check:

   Jest = Testing tool [OK]

Hint: Jest is for testing, not building or styling [OK]

Common Mistakes:

• Confusing Jest with build tools
• Thinking Jest styles components
• Assuming Jest deploys apps

2. Which file is commonly used to configure Jest in a Next.js project?

easy

A. jest.config.js

B. next.config.js

C. package.json

D. babel.config.js

Solution

1. Step 1: Identify Jest configuration file

   Jest uses a dedicated config file named jest.config.js to set options.

2. Step 2: Differentiate from other config files

   next.config.js is for Next.js settings, package.json can hold scripts but not full Jest config, and babel.config.js is for Babel.

3. Final Answer:

   jest.config.js -> Option A

4. Quick Check:

   Jest config = jest.config.js [OK]

Hint: Jest config file always named jest.config.js [OK]

Common Mistakes:

• Choosing next.config.js for Jest config
• Confusing Babel config with Jest config
• Thinking package.json holds full Jest config

3. Given this test code in a Next.js app using Jest and React Testing Library:

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

test('renders welcome message', () => {
  render(<Home />);
  const message = screen.getByText('Welcome to Next.js!');
  expect(message).toBeInTheDocument();
});

What will happen when this test runs if the Home component renders the text "Welcome to Next.js!"?

medium

A. The test will throw a syntax error

B. The test will fail because the text is missing

C. The test will timeout and never finish

D. The test will pass because the text is found

Solution

1. Step 1: Understand test behavior

   The test renders the Home component and looks for the text "Welcome to Next.js!" on screen.

2. Step 2: Check if text exists in component

   If the Home component actually renders that text, screen.getByText finds it and expect(...).toBeInTheDocument() passes.

3. Final Answer:

   The test will pass because the text is found -> Option D

4. Quick Check:

   Text found = test passes [OK]

Hint: If text exists in component, test passes [OK]

Common Mistakes:

• Assuming test fails if text is present
• Confusing syntax errors with test failures
• Thinking test times out without reason

4. You wrote this Jest test for a Next.js component:

test('shows button', () => {
  render(<MyButton />);
  const btn = screen.getByRole('button');
  expect(btn.textContent).toBe('Click me');
});

But the test fails with error: TypeError: screen.getByRole is not a function. What is the most likely cause?

medium

A. You forgot to import screen from '@testing-library/react'

B. The component does not render a button element

C. You used textContent instead of toHaveTextContent

D. Jest is not installed in the project

Solution

1. Step 1: Analyze the error message

   The error says screen.getByRole is not a function, meaning screen is undefined or missing that method.

2. Step 2: Check imports

   This usually happens if screen was not imported from '@testing-library/react', so it is undefined in the test file.

3. Final Answer:

   You forgot to import screen from '@testing-library/react' -> Option A

4. Quick Check:

   Missing import = screen undefined [OK]

Hint: Always import screen from testing-library/react [OK]

Common Mistakes:

• Assuming component missing button causes this error
• Confusing textContent usage with import errors
• Thinking Jest not installed causes this specific error

5. You want to add Jest testing to a new Next.js project. Which sequence of steps correctly sets up Jest and React Testing Library?

hard

A. Install babel, create babel.config.js, write tests in components folder

B. Install next, create next.config.js, write tests in pages folder

C. Install jest and @testing-library/react, create jest.config.js, write tests in __tests__ folder

D. Install react, create react.config.js, write tests in public folder

Solution

1. Step 1: Install testing dependencies

   You need to install jest and @testing-library/react to test Next.js components.

2. Step 2: Configure Jest

   Create a jest.config.js file to set Jest options for Next.js environment.

3. Step 3: Write tests in proper folder

   Tests are commonly placed in a __tests__ folder or alongside components, not in pages or public folders.

4. Final Answer:

   Install jest and @testing-library/react, create jest.config.js, write tests in __tests__ folder -> Option C

5. Quick Check:

   Correct setup steps = Install jest and @testing-library/react, create jest.config.js, write tests in __tests__ folder [OK]

Hint: Install jest + testing-library, config jest.config.js, write tests in __tests__ [OK]

Common Mistakes:

• Confusing next.config.js with jest.config.js
• Writing tests in public or pages folders
• Installing unrelated packages like babel or react only