
Testing Library Has a Free Philosophy That Makes Your Tests Actually Useful
Most component tests break when you refactor. Testing Library tests survive because they test behavior , not implementation. The Problem with Traditional Testing // Enzyme style — tests implementation details const wrapper = shallow ( < Counter /> ); expect ( wrapper . state ( " count " )). toBe ( 0 ); wrapper . find ( " .increment-btn " ). simulate ( " click " ); expect ( wrapper . state ( " count " )). toBe ( 1 ); Rename the CSS class? Test breaks. Change state shape? Test breaks. Switch to hooks? Test breaks. But the component still works. Testing Library Approach import { render , screen } from " @testing-library/react " ; import userEvent from " @testing-library/user-event " ; test ( " increments counter when button is clicked " , async () => { render ( < Counter /> ); expect ( screen . getByText ( " Count: 0 " )). toBeInTheDocument (); await userEvent . click ( screen . getByRole ( " button " , { name : /increment/i })); expect ( screen . getByText ( " Count: 1 " )). toBeInTheDoc
Continue reading on Dev.to React
Opens in a new tab



