-
Notifications
You must be signed in to change notification settings - Fork 467
Open
Description
Introduce ignoreHidden option for non-role queries (Support for React 19.2 <Activity>)
Is your feature request related to a problem? Please describe.
With the adoption of React 19.2's <Activity>, keeping components in the DOM hidden via display: none rather than unmounting them is a standard feature supported out of box in React.
However, this creates a significant conflict with Testing Library's non-role queries (getByText, getByLabelText, getByPlaceholderText, etc.):
- The Conflict: These queries return elements that are technically in the DOM but invisible to the user. This breaks the guiding philosophy of "testing from the user's perspective."
- Ambiguity Errors: In a Wizard flow where "Step 1" is hidden (via Activity) and "Step 2" is visible, querying for a shared element (e.g.,
getByText('Next')) causes a "Multiple elements found" error.
Why current workarounds fail
getByRole: That would be ideal, but many elements won't have a defined roleignoreoption: Passingignore: '[style*="display: none"]'togetByTextdoes not work because it acts as a filter on the node itself, not its ancestors. It fails to filter out children of the hidden container.toBeVisible()assertions: This helps assert state, but it does not help select the correct element when duplicates exist in the DOM (one hidden, one visible).- Mocking/Wrapping: Forcing
<Activity>to unmount in only tests lowers test confidence by creating parity in test/prod envs
Describe the solution you'd like
I would like to request way to filter out hidden elements in non-role queries to support the display: none pattern used by React <Activity>.
Proposed API:
Extend the options for getByText (and others) to support a visibility check:
// Ignores elements that are hidden (or have hidden ancestors)
screen.getByText('Next', { ignoreHidden: true })Metadata
Metadata
Assignees
Labels
No labels