← Back to miito.dev

Digital Garden

October 21
Garden HubAutomotiveTypeScriptTestingSVGSQLSecurityReactPerformanceNode.jsModdingJavaScriptGame DevDevOpsDesignCSSCommunication
miito.dev
© Brian Dinh (miito.dev)
✕
✕
§ GARDEN · TESTING · CLASS OPEN
NODE FILE · ENTRY

Testing React Components Without Mocking Everything

FILED UNDER · TESTING
①Read
②Meta

Testing Library's guiding principle: test the way users interact with your UI, not implementation details.

If your tests break every time you refactor a component's internals — rename a state variable, extract a helper, change the JSX structure — your tests are testing implementation, not behavior. Testing Library's philosophy: query the DOM the way a user would (by role, label, text), interact the way a user would (click, type), assert on what a user would see.

The Right Queries

Prefer getByRole over getByTestId. Accessible roles mirror how screen readers and users perceive the page. If you can't query by role, your component likely has an accessibility problem. Test IDs are a last resort — they create a parallel addressing system that drifts from the real UI.

DTNRWORKSHOP ARMAMENTSSN 2012.OTT.0176