Hi @maryfsc, thanks for opening this issue!

This could be an interesting idea to report usages of ByTestId queries. However, I'm not really sure about how to suggest from ByTestId argument which other query to use instead + what pass to it.

The example you shared is really direct, but what would you suggest if you have something like this?

const item = screen.getByTestId('user-panel-data')

I'd go just for a no-test-id-queries rule which complains if you use a ByTestId query, without suggesting how to fix it and just saying something like "Using data-testid attributes do not resemble how your software is used and should be avoided if possible".

Hey @Belco90 I think that's a pretty good idea 😄 👍

Nice. Would you like to give this a try? I recommend to do this on v4 since new rules implementation is much easier there (and it should be released soon).

Yes, I'd like to try! So I'll wait for v4 to release 😉 Thank you!

That's awesome! We had other people implementing new rules directly on v4 branch, so you could do that if you want to. However, I have to tell you that the doc around new rules creator is not added yet, guidelines weren't updated properly, and new internal mechanisms introduced in v4 could still change (although it's pretty stable already). So up to you!

Hi again! Since v4 is finished, I hope I can spend time on this soon. It's a really interesting rule for encouraging people to use semantic and accessible queries rather than querying by id.

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.

I still want to implement this one!

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.

Note that, as of now, role queries are incredibly slow for larger DOM trees (see testing-library/dom-testing-library#552). Test ids is one of the ways to mitigate this. In my experience, certain tests are almost 1 second (!) faster with test ids, as opposed to with role queries.

@zaicevas that's a good point, definitely something to mention in this rule's doc when implemented. I think the plugin should at least provide some rule to prevent or mitigate the usage of ByTestId queries, then it's up to each dev/team to enable it or not.

Upvote on the simple rule that either warns or errors if a test id query is used. I'm happy to collab on this, and maybe open a PR if it's simple enough.

Upvote on the simple rule that either warns or errors if a test id query is used. I'm happy to collab on this, and maybe open a PR if it's simple enough.

It would be great if you could open a PR! It should be fairly easy by using some of the internal helpers, you can find more indo in the contributing doc.

Meanwhile this can be achieved thx to no-restricted-properties and react/forbid-dom-props:

// .eslintrc.js

const noDataTestIdMessage =
  'Tests should resemble how the user interacts with the application and should not rely on technical details, see https://testing-library.com/docs/queries/about/#priority';

...

reportUnusedDisableDirectives: true,

rules: {
  'no-restricted-properties': [
    'error',
    // FIXME https://github.com/testing-library/eslint-plugin-testing-library/issues/279
    { object: 'screen', property: 'getByTestId', message: noDataTestIdMessage },
    { object: 'screen', property: 'queryByTestId', message: noDataTestIdMessage },
    { object: 'screen', property: 'getAllByTestId', message: noDataTestIdMessage },
    { object: 'screen', property: 'queryAllByTestId', message: noDataTestIdMessage },
    { object: 'screen', property: 'findByTestId', message: noDataTestIdMessage },
    { object: 'screen', property: 'findAllByTestId', message: noDataTestIdMessage }
  ],
  'react/forbid-dom-props': [
    'error',
    {
      // FIXME https://github.com/testing-library/eslint-plugin-testing-library/issues/279
      forbid: [{ propName: 'data-testid', message: noDataTestIdMessage }]
    }
  ],

Always test your code:

// no-restricted-properties.test.tsx

import { render, screen } from '@testing-library/react';

// FIXME https://github.com/testing-library/eslint-plugin-testing-library/issues/279
test('ban *ByTestId', async () => {
  // eslint-disable-next-line react/forbid-dom-props
  render(<div data-testid="foobar" />);

  // eslint-disable-next-line no-restricted-properties
  screen.getByTestId('foobar');
  // eslint-disable-next-line no-restricted-properties
  screen.queryByTestId('foobar');
  // eslint-disable-next-line no-restricted-properties
  screen.getAllByTestId('foobar');
  // eslint-disable-next-line no-restricted-properties
  screen.queryAllByTestId('foobar');
  // eslint-disable-next-line no-restricted-properties
  await screen.findByTestId('foobar');
  // eslint-disable-next-line no-restricted-properties
  await screen.findAllByTestId('foobar');
});

I suggest to enable reportUnusedDisableDirectives: https://eslint.org/docs/latest/use/configure/rules#report-unused-eslint-disable-comments (should be ESLint default)