New rule to report selector option abuse

Name for new rule

no-empty-text

Description of the new rule

The goal of this rule is to report overly-abusive usage of selector option in Text and LabelText queries.

Example:

<div data-icon-name="x">
    <svg>
      <path />
   </svg>
</div>

can be queried with screen.getByText('', { selector: "[data-icon-name='x']" }).

However, that goes against RTL principle (The more your tests resemble the way your software is used, the more confidence they can give you) and leads to tests that depend on implementational details.

My suggestion is to report whenever getByText and getByLabelText are called with an empty string AND have selector option.

Additionally, we could think of another rule that checks whether selector is too complex. For instance, only selector: 'input' (or any other plain tag) would NOT be reported.

Testing Library feature

Text, LabelText queries + selector option https://testing-library.com/docs/queries/bylabeltext/#selector

Testing Library framework(s)

Definitely React, but I suppose it should also be related to Angular and Vue

What category of rule is this?

Suggests an alternate way of doing something

Optional: other category of rule

No response

Code examples

screen.getByLabelText('', { selector: 'input' })
screen.getByText('', { selector: 'label' })
screen.queryByLabelText('', { selector: 'input' })
screen.queryByText('', { selector: 'label' })

Anything else?

I might take this at some point, but feel free to work on this in the meantime.

Do you want to submit a pull request to make the new rule?

No

Start by locating the existing rules and tests for Text and LabelText queries in the ESLint plugin, then compare how selector options and empty query strings are handled. Define the intended scope for the optional complex-selector check with maintainers; done means the named examples are reported by the new no-empty-text rule and covered by tests.