getClosestBy*

[mlrawlings]

Describe the feature you'd like:

I'd like to introduce getClosestBy* as a way to find an element that is the known element or some ancestor of it that matches one of they testing-library queries.

For example, given the following markup, I'd like to be able to get the button by its text.

<button>
  <span>A</span>
</button>
<button>
  <span>B</span>
</button>

getClosestByRole(getByText("B"), "button")

Suggested implementation:

Recursively walk up from the node and find the first node that matches.

Describe alternatives you've considered:

Use native closest:

getByText("B").closest("button");

Walk the tree myself:

getByText("B").parentNode

Get by a known index:

getAllByRole('button')[1]

Abuse a TextMatcher:

getByRole((role, element) => role === 'button' && element.textContent === "B")

Teachability, Documentation, Adoption, Migration Strategy:

getClosestBy* would be togetBy* as closest is to querySelector.

[alexkrolick]

There's been some discussion of this idea and its trade-offs in a few threads already: #204 (comment)

Can you describe what this API would allow you do to that you can't do already? Is it testing attributes on the parent nodes?

[adamduncan]

Understand that specifying tags/attributes in queries is testing implementation details, but there are some cases where this might be the most sane way inferring behaviour? As you say, testing attributes on parent nodes.

E.g. Ensuring a button with nested span is disabled:

<button disabled><span>Do thing</span></button>

// findByText(/Do thing/).should('have.attr', 'disabled') fails
// findByText(/Do thing/).closest('button').should('have.attr', 'disabled') would work but adds another implementation detail?

@kentcdodds had mentioned a hypothetical solution in #204, suggesting a closestInteractiveElement option, but didn't sound too keen on it. Would there be something along those lines be worth exploring in future?

[eps1lon]

E.g. Ensuring a button with nested span is disabled:

This particular instance will be covered by #408. When this lands you'll be able to query the button with getByRole('button', { name: 'Do thing' })

[kentcdodds]

Yup, closing this in favor of #408. Thanks!