Jest setup for Next.js - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the testing library in a Next.js test file.

NextJS

import { render, screen } from '[1]';

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

Areact-test-renderer

Bjest

C@testing-library/react

Dnext/testing

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'jest' directly instead of '@testing-library/react'.

Using 'next/testing' which does not exist.

We use @testing-library/react to render components and query the DOM in Next.js tests.

2fill in blank

medium

Complete the Jest configuration file to specify the test environment for Next.js.

NextJS

module.exports = {
  testEnvironment: '[1]'
};

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

Ajsdom

Bnext

Cnode

Dbrowser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'node' environment which lacks DOM APIs.

Using 'next' which is not a valid Jest environment.

Jest uses jsdom as the test environment to simulate a browser for Next.js component tests.

3fill in blank

hard

Fix the error in the Jest setup file to properly import the Next.js testing utilities.

NextJS

import '[1]';

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

Anext/testing-library

Bnext/test-utils

Cjest/next

Dnext/jest

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or non-existent package names.

Trying to import from 'jest/next' or similar.

The correct import for Next.js Jest setup is next/jest.

4fill in blank

hard

Fill both blanks to create a Jest config that uses Next.js custom Jest config and sets up the test environment.

NextJS

const nextJest = require('[1]');
const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  testEnvironment: '[2]',
};

module.exports = createJestConfig(customJestConfig);

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

Anext/jest

Bnode

Cjsdom

Djest

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'node' as test environment which lacks DOM.

Incorrect package name in require.

We require next/jest to create the Jest config and set jsdom as the test environment for browser-like testing.

5fill in blank

hard

Fill all three blanks to write a simple test that renders a Next.js component and checks for text content.

NextJS

import { render, screen } from '[1]';
import Home from '[2]';

test('renders welcome message', () => {
  render(<Home />);
  const text = screen.getByText('[3]');
  expect(text).toBeInTheDocument();
});

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

A@testing-library/react

B@/pages/index

CWelcome to Next.js!

D@/components/Home

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Home from wrong path.

Looking for incorrect text in the test.

We import @testing-library/react to render and query. The Home component is from pages/index. The test looks for the welcome text.