This content originally appeared on DEV Community and was authored by Kazutora Hattori
Introduction
When writing tests using React Testing Library, I encountered some difficulty locating elements, so I'll organize the necessary points here.
1. getByText
screen.getByText(“Hello”);
Use getByText when searching for elements that match specific text.
It's useful when you know that text “definitely exists” on the screen.
For example, use it when you want to verify simple text like fixed text displayed in headings or buttons.
2. getByRole
screen.getByRole(“button”, { name: /Submit/i });
getByRole is a method for locating elements by specifying their “role” (e.g., button, link, heading).
3. getByLabelText
screen.getByLabelText(“Username”);
getByLabelText is used to find input forms based on their labels.
Summary
Find by text → getByText
Find by role → getByRole
Find forms by label → getByLabelText
This content originally appeared on DEV Community and was authored by Kazutora Hattori
Kazutora Hattori | Sciencx (2025-09-16T07:59:12+00:00) A Summary of Element Search Methods in React Testing Library (getByText / getByRole / getByLabelText). Retrieved from https://www.scien.cx/2025/09/16/a-summary-of-element-search-methods-in-react-testing-library-getbytext-getbyrole-getbylabeltext/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.