testing-library / testing-library/dom-testing-library

Introduce ignoreHidden option for non-role queries (Support for React 19.2 <Activity>)

Open
#1,370 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
3.3k
Forks
474
PR merge metrics
No merged PRs in 30d

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.):

  1. 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."
  2. 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 role
  • ignore option: Passing ignore: '[style*="display: none"]' to getByText does 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 })

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the non-role query entry points named in the issue, especially getByText and the existing ignore option, then compare how hidden ancestors are handled. Done means an ignoreHidden option can exclude hidden elements and their descendants while preserving visible matches, with coverage for duplicate text in the Activity-style case.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
testing
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.