`testing-library/consistent-data-testid` is an exclusive React rule

[wingy3181]

Plugin version

v4.10.1

ESLint version

v7.24.0

Node.js version

v12.16.3

npm/yarn version

npm 6.14.11/yarn 1.22.11

Operating system

macOS Big Sur, version 11.5.1

Bug description

testing-library/consistent-data-testid rule does not apply to angular templates (inline or external) and looking at code here suggests that it is exclusive to React.

Discussed in closed Issue#55 that original created the rule

Steps to reproduce

1. Create a non-React app
2. Setup eslint + testing library + testling library eslint rules as configuration below
3. Update template to not follow consistent-data-testid rule
4. Run eslint
5. Fail: lint succeeds and does not error even though rule is broken in non-React template

Error output/screenshots

N/A

ESLint configuration

FYI This was not my exact eslint configuration...just extracted it out and modified it

{
  "root": true,
  "plugins": ["testing-library"],
  "overrides": [
    {
      "files": ["*.html"],
      "rules": {
        "@angular-eslint/template/click-events-have-key-events": "error",
        "@angular-eslint/template/mouse-events-have-key-events": "error",
        "@angular-eslint/template/no-call-expression": "error"
        "testing-library/consistent-data-testid': [
          "error",
          {
            testIdPattern: '^testid-$',
          }
        ],
      }
    }
  ]
}

Rule(s) affected

testing-library/consistent-data-testid

Anything else?

Original discussion #55

In the interim while this issue is floating around it might be good to update the documentation to mark it as exclusive to React only for now..

As there was some confusion by just looking at the docs and I had to look into the code myself

Do you want to submit a pull request to fix this bug?

No

[Belco90]

Thanks for reporting this in a separate issue!

[olesiaMartushkanova]

Hey everyone, I have the same issue with using the testing-library/consistent-data-testid rule for react project: it does not show error message even if rule is broken.

My rule:

 "testing-library/consistent-data-testid": [
      2,
      {
        "testIdAttribute": ["dataTest"],
        "testIdPattern": "^testId(__[A-Z]*)?$"
      }
    ],

Component to test this rule:
export const foo = (props: any) => <div dataTest="WRONGTestIdEXAMPLE123"></div>;

Could someone please have a look?

[Belco90]

Hi @olesiaMartushkanova! If I understood correctly, you are using this rule with React right? If that's the case, then that's a different error.

[tknickman]

@olesiaMartushkanova I just took a look at your problem, and I wasn't able to reproduce it. Could you create a shareable reproduction case, and open that as a separate issue?

Here is the config I was using:

{
  "root": true,
  "extends": ["next/core-web-vitals"],
  "plugins": ["testing-library"],
  "rules": {
    "testing-library/consistent-data-testid": [
      2,
      {
        "testIdAttribute": ["dataTest"],
        "testIdPattern": "^testId(__[A-Z]*)?$"
      }
    ]
  },
  "overrides": [
    {
      "files": [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[jt]s?(x)"
      ],
      "extends": ["plugin:testing-library/react"]
    }
  ]
}

I also set the custom testId pattern on the RTL config in my jest.setup:

import { configure } from "@testing-library/react";

configure({ testIdAttribute: "dataTest" });

And then: