Skip to content

New rule suggestion: no-test-id-queries #279

New issue
New issue
Closed
#1006
Closed
New rule suggestion: no-test-id-queries#279
#1006
Labels
new ruleNew rule to be included in the pluginpinnedPinned for different reasons. Issues with this label won't be flagged as stale by stalebotreleased
@maryfsc

Description

@maryfsc
maryfsc
opened on Feb 10, 2021

Hi! I've been wondering if there was ever a discussion about implementing a rule to warn about accessible queries use. Since I don't think it's really necessary to throw an error or do an autofix, a warning should be just fine. So we could get a warning to possibly refactor this

const loginButton = screen.getByTestId('login-button');

into this

const loginButton = screen.getByRole('button', { name: /login/i });

What do you think? :)

Activity

Belco90
added
new ruleNew rule to be included in the plugin
on Feb 10, 2021
Belco90

Belco90 commented on Feb 10, 2021

@Belco90
Belco90
on Feb 10, 2021
Member

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".

maryfsc

maryfsc commented on Feb 11, 2021

@maryfsc
maryfsc
on Feb 11, 2021
Author

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

Belco90

Belco90 commented on Feb 12, 2021

@Belco90
Belco90
on Feb 12, 2021
Member

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).

maryfsc

maryfsc commented on Feb 15, 2021

@maryfsc
maryfsc
on Feb 15, 2021 · edited by maryfsc
Author

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

Belco90

Belco90 commented on Feb 15, 2021

@Belco90
Belco90
on Feb 15, 2021
Member

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!

Belco90
changed the title [-]New rule suggestion: prefer-accessible-query[/-] [+]New rule suggestion: no-test-id-queries[/+] on Mar 29, 2021
Belco90
self-assigned this
on Apr 20, 2021
Belco90

Belco90 commented on Apr 20, 2021

@Belco90
Belco90
on Apr 20, 2021 · edited by Belco90
Member

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.

stale

stale commented on Jun 19, 2021

@stale
stalebot
on Jun 19, 2021

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.

stale
added
wontfixThis will not be worked on
on Jun 19, 2021
Belco90

Belco90 commented on Jun 20, 2021

@Belco90
Belco90
on Jun 20, 2021
Member

I still want to implement this one!

stale
removed
wontfixThis will not be worked on
on Jun 20, 2021
stale

stale commented on Aug 19, 2021

@stale
stalebot
on Aug 19, 2021

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.

stale
added
wontfixThis will not be worked on
on Aug 19, 2021

2 remaining items

zaicevas

zaicevas commented on Nov 24, 2021

@zaicevas
zaicevas
on Nov 24, 2021
Contributor

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.

Belco90

Belco90 commented on Nov 24, 2021

@Belco90
Belco90
on Nov 24, 2021 · edited by Belco90
Member

@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.

arinthros

arinthros commented on Apr 7, 2022

@arinthros
arinthros
on Apr 7, 2022

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.

Belco90

Belco90 commented on Apr 11, 2022

@Belco90
Belco90
on Apr 11, 2022
Member

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.

Belco90
removed their assignment
on Oct 17, 2022
tkrotoff

tkrotoff commented on Aug 14, 2023

@tkrotoff
tkrotoff
on Aug 14, 2023

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)

StyleShit
added a commit that references this issue on May 11, 2025

feat: add `no-test-id-queries` rule

fb59333
StyleShit
mentioned this on May 11, 2025
Belco90
closed this as completedon May 12, 2025
Belco90
reopened this on May 12, 2025
Belco90
closed this as completedin #1006on May 13, 2025
Belco90
closed this as completedin abe42cdon May 13, 2025
github-actions

github-actions commented on May 13, 2025

@github-actions
github-actionsbot
on May 13, 2025

🎉 This issue has been resolved in version 7.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions
added
released
on May 13, 2025
StyleShit
added a commit that references this issue on May 15, 2025

feat: add `no-test-id-queries` rule (testing-library#1006)

abe42cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    new ruleNew rule to be included in the pluginpinnedPinned for different reasons. Issues with this label won't be flagged as stale by stalebotreleased

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @tkrotoff@Belco90@arinthros@zaicevas@maryfsc

      Issue actions
        New rule suggestion: no-test-id-queries · Issue #279 · testing-library/eslint-plugin-testing-library