dom-testing-library icon indicating copy to clipboard operation
dom-testing-library copied to clipboard

Add option to *ByText to search by innerText

Open steinybot opened this issue 2 years ago • 2 comments

Describe the feature you'd like:

I'd like to have an includeDescendents option to *ByText which would effectively be the same as searching by innerText (but it's not that simple since it needs to respect the ignore option).

I'm new to testing-library and have more familiarity with Cypress. I was hoping to find similar behaviour to cy.contains.

Suggested implementation:

Describe alternatives you've considered:

cy.contains but this is always an { exact: false} match which is usually less than ideal.

Teachability, Documentation, Adoption, Migration Strategy:

Given this:

      <p>
        Refer to the
        <a
          href="https://testing-library.com/docs/dom-testing-library/api-custom-queries"
          >Custom Queries</a
        >
        section for more details.
      </p>

Then this:

findByText('Refer to the Custom Queries section for more details.', { includeDescendents: true })

Should match the p node.

steinybot avatar Feb 02 '23 03:02 steinybot

As a general idea, the getBy* queries can accept a function that will be called for every element you're rendering and let you query the way you want. You can have a look at this solution that searches for textContent and gives you the direct parent that has the content you're looking for. Hope it will help :)

MatanBobi avatar Feb 17 '23 21:02 MatanBobi