Why testing Next.js matters - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the testing library for React in Next.js.

NextJS

import { render } from '[1]';

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

Areact-test-renderer

Bnext/testing

C@testing-library/react

Djest

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'jest' directly for rendering

Importing from 'next/testing' which doesn't exist

We use @testing-library/react to render components for testing in Next.js.

2fill in blank

medium

Complete the code to write a simple test that checks if a Next.js component renders text.

NextJS

test('renders welcome message', () => {
  const { getByText } = render(<HomePage />);
  expect(getByText('[1]')).toBeInTheDocument();
});

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

AWelcome to Next.js

BHello World

CClick me

DSubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated button text

Using generic greetings not in the component

The test checks if the text 'Welcome to Next.js' appears in the component.

3fill in blank

hard

Fix the error in the test by completing the missing import for the Next.js component.

NextJS

import [1] from '../pages/index';

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

AHomePage

BMain

CIndexPage

DApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'App' which is for _app.js

Using 'Main' or 'IndexPage' which are not standard names

The default export from ../pages/index is usually named HomePage in examples.

4fill in blank

hard

Fill both blanks to mock a Next.js router method in a test.

NextJS

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

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

Apush

Bpop

Creplace

DgoBack

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pop' or 'goBack' which are not Next.js router methods

We mock push and replace methods of Next.js router to test navigation.

5fill in blank

hard

Fill all three blanks to write a test that waits for data to load in a Next.js component.

NextJS

import { render, screen, [1] } from '@testing-library/react';

render(<DataComponent />);

const item = await [2](() => screen.getByText('[3]'));
expect(item).toBeInTheDocument();

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

AwaitFor

BfindByText

CLoading complete

Dwait

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'wait' which is not a function in testing-library

Using 'getByText' which is not async

We import waitFor to wait for async changes, use waitFor with screen.getByText to find text, and check for 'Loading complete' text.