How would you unit test a React title component?

What's really being asked

This question evaluates whether you understand the core philosophy of React Testing Library: tests should simulate how a real user interacts with the UI rather than inspecting internal component state or implementation details. At the senior level, interviewers still care that you default to accessible queries and treat tests as a safety net for user behavior, not a validation of code structure. It also checks your familiarity with Jest as the runner and assertion library.

The full answer

A strong response walks through setup and four key actions in order. First, import render and screen from testing-library/react and import the component under test. Second, call render with a known title prop so the output is predictable. Third, query the rendered DOM for the h1 element using screen.getByRole with heading as the role and level one as the option, or alternatively screen.getByText with the exact title string. Fourth, assert that the element exists in the document using a matcher like toBeInTheDocument from jest-dom. A great candidate also notes that getByRole is preferred because it mirrors how assistive technologies navigate the page and enforces accessibility best practices.

The mistakes people make

Red flags include suggesting Enzyme shallow rendering or testing implementation details like component instances, props, or internal state. Another mistake is defaulting to data-testid as the primary query strategy when visible text or semantic role is available, since that ignores the library's user-centric principle. Candidates who suggest querying by CSS class or tag name alone also signal a misunderstanding of maintainable testing practices, because those selectors break during refactoring.

What usually comes next

The interviewer may ask how you would test user interactions if the component later included a button, which should lead to a discussion of userEvent over fireEvent. They might also ask how you handle asynchronous rendering or what you would do if the heading text were loaded asynchronously. Another common pivot is asking why you avoid shallow rendering and how that impacts test confidence during refactoring.

A concrete example

Imagine a component named PageHeader that accepts a title prop. The test file would import React, import render and screen from testing-library/react, and import PageHeader from its source file. Inside a Jest test block, you would write render with title set to Welcome. Then you would write const heading equals screen.getByRole with arguments heading and level one. Finally, you would assert expect heading toBeInTheDocument. If jest-dom is configured, the matcher is available directly; otherwise you might assert that heading is truthy, though the custom matcher is cleaner.