New rule to report selector option abuse

[zaicevas]

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

[Belco90]

Thanks for reporting @zaicevas!

This is a great suggestion indeed. A couple of clarifications:

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

The condition is fine, but we need to report all *ByText and *ByLabelText queries, including the *All variants and query*/find* kind. This should be easy to catch by using helpers.isQuery + checking if ends by *ByText or *ByLabelText

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.

I'd definitely skip this for now so we have a simple rule.

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

This one would apply to all frameworks actually: DOM, Angular, React, and Vue since reported queries are part of the core API.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.