[React](/courses/reactjs) Testing Library helps test components through the DOM in a way that resembles how users interact with the application. Instead of concentrating on internal component state or methods, a component test usually asks questions such as: ```text What can the user see? What can the user click? What can the user type? What changes after that interaction? ``` ### Basic Component ```jsx import { useState } from "react"; export function Counter() { const [count, setCount] = useState(0); return (

Count: {count}

); } ``` ### Component Test ```jsx import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { expect, it } from "vitest"; import { Counter } from "./Counter"; it("increments the count when the user clicks the button", async () => { const user = userEvent.setup(); render(); expect( screen.getByText("Count: 0") ).toBeInTheDocument(); await user.click( screen.getByRole("button", { name: /increment/i }) ); expect( screen.getByText("Count: 1") ).toBeInTheDocument(); }); ``` ### What Is render()? ```jsx render(); ``` renders the component into a testing DOM environment so the test can interact with it. ### What Is screen? `screen` provides queries for finding elements in the rendered page. For example: ```javascript screen.getByRole("button", { name: /increment/i }); ``` finds a button whose accessible name matches `Increment`. ### Why getByRole Is Valuable Instead of finding a button through an implementation-specific class: ```javascript document.querySelector(".increment-btn"); ``` use what a user or assistive technology can understand: ```javascript screen.getByRole("button", { name: /increment/i }); ``` If the [CSS](/courses/css) class changes, the user behavior is still the same and the test does not need to change. ### Testing Props ```jsx function Greeting({ name }) { return

Hello, {name}

; } ``` Test: ```jsx it("displays the supplied name", () => { render(); expect( screen.getByRole("heading", { name: /hello, asif/i }) ).toBeInTheDocument(); }); ``` ### Testing Forms ```jsx function LoginForm() { const [email, setEmail] = useState(""); return ( ); } ``` Test: ```jsx it("lets the user enter an email", async () => { const user = userEvent.setup(); render(); const input = screen.getByRole("textbox", { name: /email/i }); await user.type(input, "asif@example.com"); expect(input).toHaveValue("asif@example.com"); }); ``` ### Test Observable Behavior Prefer testing: ```text Button appears User clicks button Dialog opens Form shows validation message API result appears ``` rather than: ```text Internal state variable equals true Specific private function was called Component used exactly two useState calls ``` The first group describes application behavior. The second group ties tests to implementation details. ### Interview-Ready Answer [React](/courses/reactjs) Testing Library tests components through their rendered DOM and user-visible behavior. A typical test renders the component, finds elements using accessible queries such as `getByRole`, performs realistic interactions with `userEvent`, and asserts the resulting UI. This approach makes tests more resilient to internal refactoring.