Testing client components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the testing library for React components.

NextJS

import { render } from '[1]';

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

Ajest-dom

Breact-testing-library

C@testing-library/react

Denzyme

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'enzyme' which is outdated for Next.js 14+

Using 'jest-dom' which is for assertions, not rendering

The @testing-library/react package is the standard for testing React components in Next.js.

2fill in blank

medium

Complete the code to simulate a user clicking a button in a client component test.

NextJS

import userEvent from '[1]';

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

Auser-event-library

Breact-user-event

Ctesting-library/user-event

D@testing-library/user-event

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect package names that don't exist

Confusing with 'react-testing-library' import

The @testing-library/user-event package provides utilities to simulate user interactions like clicks.

3fill in blank

hard

Fix the error in the test by completing the render call with the correct component import.

NextJS

import [1] from '@/components/SubmitButton';

render(<SubmitButton />);

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

ASubmitButton

BsubmitButton

Csubmit_button

DButtonSubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or snake_case names for components

Mismatching import name and usage

Component names must match exactly and start with a capital letter in React.

4fill in blank

hard

Fill both blanks to wait for the button to appear and then click it in the test.

NextJS

const button = await screen.[1]('button', { name: 'Submit' });
await userEvent.[2](button);

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

AfindByRole

Bclick

CgetByText

Dhover

Attempts:

3 left

💡 Hint

Common Mistakes

Using synchronous queries that fail if element is not immediately present

Using wrong userEvent methods like 'hover' instead of 'click'

Use findByRole to wait for the button asynchronously, then click to simulate the user click.

5fill in blank

hard

Fill all three blanks to mock a fetch call, render a component, and check the displayed text.

NextJS

global.fetch = jest.fn(() => Promise.resolve({
  json: () => Promise.resolve({ message: [1] })
}));

render(<MessageDisplay />);

expect(await screen.findByText([2])).toBeInTheDocument();
expect(global.fetch).toHaveBeenCalledWith([3]);

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

A'Hello World'

C'/api/message'

D'/api/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching strings in mock and expect calls

Using wrong API endpoint in fetch call check

We mock fetch to return a message 'Hello World', check that text is displayed, and verify fetch was called with '/api/message'.