React Testing Library integration in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this test check for?

Given this React component and test, what behavior does the test verify?

NextJS

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

test('renders button with correct label', () => {
  render(<Button label="Click me" />);
  const buttonElement = screen.getByRole('button');
  expect(buttonElement).toHaveTextContent('Click me');
});

A The test checks if the button has a specific CSS class.

B The test checks if the button is disabled by default.

C The test checks if clicking the button triggers an alert.

D The test checks if the button renders with the label 'Click me'.

💡 Hint

Look at what the expect statement is verifying.

The test renders the Button component with label 'Click me' and verifies the button's text content matches that label.

❓ state_output

intermediate

What is the output of this test after clicking?

Consider this component and test. What will the test output be after simulating a click?

NextJS

import { render, screen, fireEvent } from '@testing-library/react';
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

test('increments count on click', () => {
  render(<Counter />);
  const button = screen.getByRole('button');
  fireEvent.click(button);
  expect(button).toHaveTextContent('Count: 1');
});

A The test fails because the button text remains 'Count: 0' after click.

B The test passes because the button text updates to 'Count: 1' after click.

C The test throws an error because fireEvent.click is not defined.

D The test fails because the button is disabled and cannot be clicked.

💡 Hint

Check how the state changes on click and what the test expects.

The Counter component increments count state on click, so the button text updates to 'Count: 1'. The test expects this updated text and passes.

📝 Syntax

advanced

Which test code snippet correctly waits for async content?

You want to test a component that fetches data and shows it after loading. Which test snippet correctly waits for the data to appear?

A await screen.findByText('Data loaded');

B screen.getByText('Data loaded');

C await screen.queryByText('Data loaded');

D screen.findByText('Data loaded');

💡 Hint

Remember which query returns a promise and waits for the element.

findByText returns a promise and waits for the element to appear, so awaiting it correctly handles async content.

🔧 Debug

advanced

Why does this test fail with 'Unable to find role' error?

This test fails with an error saying it cannot find a button role. What is the cause?

NextJS

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

test('finds submit button', () => {
  render(<button type="submit">Send</button>);
  const btn = screen.getByRole('button', { name: 'Submit' });
  expect(btn).toBeInTheDocument();
});

A The button's visible text is 'Send', but the test looks for name 'Submit'.

B The button element is not rendered because render is missing a wrapper.

C getByRole cannot find buttons with type 'submit'.

D The test is missing an async wait for the button to appear.

💡 Hint

Check the button's label text and the name option in getByRole.

getByRole with name option matches accessible name, which is the button's visible text. The button text is 'Send', but the test looks for 'Submit', so it fails.

🧠 Conceptual

expert

What is the main benefit of using React Testing Library over Enzyme?

Choose the best explanation for why React Testing Library is preferred for testing React components compared to Enzyme.

A React Testing Library requires less setup because it mocks all network requests automatically.

B React Testing Library allows shallow rendering which Enzyme does not support.

C React Testing Library encourages testing components like users interact with them, focusing on accessibility and behavior rather than implementation details.

D React Testing Library uses snapshot testing exclusively, which Enzyme cannot do.

💡 Hint

Think about how tests should reflect user experience.

React Testing Library promotes testing from the user's perspective by querying DOM elements as users would, improving test reliability and accessibility focus. Enzyme focuses more on component internals.