Consistent data testid configuration

[agugut-nexgen]

Hello everybody,
I configured on my repo eslint-plugin-testing-library on this way

'testing-library/consistent-data-testid': [
      'error',
      {
        testIdAttribute: ['data-testid'],
        testIdPattern: '[a-z]*(-[a-z]*)*__[a-z]*(-[a-z]*)*',
      },
    ],

But I need a way to avoid developers to use as testIdAttribute other values like data-test-name
Do you have idea if there is a way to do that?
Thanks!!

[gndelia]

Hi @agugut ! Thanks for posting. I am not sure if I understood correctly your doubt.

Is what you want to prevent them from adding new elements into the array of testIdAttribute? or do you want to have a dynamic way to define what can be used as a testIdAttribute and what can't? (like using a regex)?

I think the scope of the rule is to ensure values used inside data-testid="here" are consistent, but it does not forbid HTML data-* attributes to be used as queries. Is that what you want?

[agugut-nexgen]

Hi @gndelia exactly, I want to have a dynamic way to define what can be used as a testIdAttribute and what can't? (like using a regex)
Is there a way with this plugin?
Thanks

[gndelia]

I think RTL doesn't allow to configure what values are used as testIdAttribute. Are the devs using custom queries? Can you show us an example of a test with the piece of html?

I am on the fence of whether it should be out of the scope of the plugin, or if we need a new rule about querying by custom data attributes. If they use querySelector maybe you can use no-container to avoid using querySelectorat all

[agugut-nexgen]

I have code like that <span data-test-name="durationCounter">value</span> but a I want to force devs to use data-testid instead of data-test-name

[gndelia]

h the problem is that using data-test-name is html completely valid. So you could be using that html data attribute, and not because you want to query it with RTL

On the other hand, you could disallow querying by data attributes by disallowing using querySelector with the above mentioned rule.

Last, if you want to ban data-* attributes altogether (with the exception of data-testid), maybe in that case as Belco90 suggested you can check other plugins, because that seems to be out of the scope of this plugin

[Belco90]

I'm afraid this plugin can't force the property name used for test id attribute as you wish. The rule mentioned will take care of the property value so it follows desired pattern, but not its property name.

I don't think it's even possible to disallow specific property names in favor of a data-testid since any data-* could be used for literally anything, not just test id, so it wouldn't be possible to restrict such attributes.

The only way this could be implemented is by indicating a list of data-* attributes to be reported (e.g. ["data-test-name"]) and suggest using desired property name instead. This wouldn't catch cases not included in that list tho.

Not sure if the described behaviour is already available under some ESLint rule (maybe eslint-plugin-react?).

[agugut-nexgen]

Thanks for your answer