
Testing Library Has a Free API That Tests Components the Way Users Actually Use Them
Testing Library is the testing utility that encourages you to test behavior, not implementation. Query by role, text, label — the way users find elements. The Query Priority import { render , screen } from " @testing-library/react " ; import userEvent from " @testing-library/user-event " ; // 1. getByRole — accessible name (BEST) screen . getByRole ( " button " , { name : " Submit " }); screen . getByRole ( " heading " , { level : 2 }); screen . getByRole ( " textbox " , { name : " Email " }); screen . getByRole ( " checkbox " , { name : " Accept terms " }); // 2. getByLabelText — form elements screen . getByLabelText ( " Email address " ); // 3. getByText — non-interactive elements screen . getByText ( " Welcome back! " ); screen . getByText ( /no products found/i ); // 4. getByTestId — LAST RESORT screen . getByTestId ( " custom-component " ); User Events: Real Interactions const user = userEvent . setup (); test ( " form submission " , async () => { render ( < SignUpForm /> ); await
Continue reading on Dev.to React
Opens in a new tab



