Testing Library patterns for React component testing — queries, user events,
99
99%
Does it follow best practices?
Impact
100%
1.03xAverage score across 8 eval scenarios
Passed
No known issues
User event interactions
userEvent import
100%
100%
userEvent.setup() call
100%
100%
No fireEvent usage
100%
100%
Async user actions
100%
100%
getByRole or getByLabelText for inputs
100%
100%
getByRole for buttons
100%
100%
No CSS selectors
100%
100%
No implementation detail assertions
100%
100%
render and screen imports
100%
100%
jest-dom matchers
100%
100%
Async content and error states
findBy* for async data
86%
100%
Loading state assertion
100%
100%
Loading state gone after data
100%
100%
queryBy* for absent elements
100%
100%
Error state tested
100%
100%
Error state uses findBy* or waitFor
100%
100%
No implementation detail assertions
100%
100%
No container.innerHTML
100%
100%
Accessible queries used
100%
100%
render and screen imports
100%
100%
Query priority and accessibility
getByRole preferred
100%
100%
getByLabelText for form fields
100%
100%
No querySelector usage
100%
100%
No wrapper.find component selectors
100%
100%
No container.innerHTML assertion
100%
100%
getByTestId only as last resort
100%
100%
No implementation detail assertions
100%
100%
jest-dom matchers used
100%
100%
Regex matchers for text
0%
100%
render and screen imports
100%
100%
within() scoped queries
within() import
100%
100%
within() on nav
100%
100%
within() on footer
100%
100%
within() on table row
100%
100%
No ambiguous screen queries for duplicates
100%
100%
getByRole for navigation container
100%
100%
getByRole for links
100%
100%
getByRole for buttons
100%
100%
Regex name matchers
0%
100%
No querySelector usage
100%
100%
toBeVisible vs toBeInTheDocument
toBeVisible() for visible dialog
100%
100%
not.toBeVisible() for hidden dialog
100%
100%
toBeVisible() for tooltip
100%
100%
not.toBeVisible() for hidden tooltip
100%
100%
No toBeInTheDocument() for visibility checks
100%
100%
getByRole for dialog
100%
100%
getByRole for tooltip
100%
100%
userEvent.setup() before render
100%
100%
Awaited user actions
100%
100%
No fireEvent usage
100%
100%
Custom render wrapper for providers
test-utils.tsx created
100%
100%
customRender wraps with providers
100%
100%
Re-exports from @testing-library/react
100%
100%
customRender exported as render
100%
100%
Test imports from test-utils
100%
100%
No direct @testing-library/react render import in test
100%
100%
AllProviders wrapper component
100%
100%
getByRole used in tests
100%
100%
Regex name matchers in tests
100%
100%
No implementation detail assertions
100%
100%
Regex matchers and query selection
getByLabelText for text input
100%
100%
getByRole for checkboxes
100%
100%
getByRole for combobox/select
100%
100%
getByRole for submit button
100%
100%
Regex for input name
100%
100%
Regex for checkbox name
100%
100%
Regex for button name
100%
100%
No getByTestId usage
100%
100%
No querySelector usage
100%
100%
userEvent.setup() before render
100%
100%
Awaited user actions
100%
100%
No fireEvent usage
100%
100%
queryBy* for absence and waitFor assertions
queryBy* for dismissed notification
100%
100%
not.toBeInTheDocument() after dismiss
100%
100%
queryBy* for empty state check
100%
100%
No getBy* for absence
100%
100%
waitFor assertions only
100%
100%
userEvent.setup() before render
100%
100%
Awaited user actions
100%
100%
getByRole for buttons
100%
100%
Regex for query names
0%
100%
No querySelector usage
100%
100%