React Testing Library integration in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the render function from React Testing Library.

NextJS

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

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

Amount

BfireEvent

Cshallow

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using mount or shallow which are from Enzyme, not React Testing Library.

Importing fireEvent instead of render.

The render function is used to render React components in tests.

2fill in blank

medium

Complete the code to query a button element by its role.

NextJS

const { getByRole } = render(<button>Click me</button>);
const button = getByRole([1]);

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

A"link"

B"button"

C"textbox"

D"checkbox"

Attempts:

3 left

💡 Hint

Common Mistakes

Using roles like "link" or "textbox" which do not match a button.

Forgetting to put the role string in quotes.

The role for a button element is "button". This helps find the button in the test.

3fill in blank

hard

Fix the error in the test by completing the assertion to check if the button is in the document.

NextJS

expect(button).[1]();

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

AtoHaveTextContent

BtoBeNull

CtoBeInTheDocument

DtoBeVisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using toBeNull() which checks for absence.

Using toHaveTextContent() which checks text, not presence.

The matcher toBeInTheDocument() checks if the element exists in the rendered output.

4fill in blank

hard

Fill both blanks to simulate a user click event on the button.

NextJS

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

const { getByRole } = render(<button>Click me</button>);
[2].fireEvent.click(getByRole('button'));

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

AfireEvent

BuserEvent

Cclick

Dsimulate

Attempts:

3 left

💡 Hint

Common Mistakes

Using userEvent without importing it properly.

Using simulate which is from Enzyme, not React Testing Library.

fireEvent is imported and used to simulate events like clicks in React Testing Library.

5fill in blank

hard

Fill all three blanks to write a test that renders a component, finds a button by role, and checks if it is enabled.

NextJS

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

const { [2] } = [3](<button>Submit</button>);
expect(getByRole('button')).toBeEnabled();

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

Arender

BgetByRole

Dscreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using screen without importing or destructuring properly.

Confusing getByRole as a function to import directly.

We import render, destructure getByRole from the render result, and call render to render the component.