How to make this work with shadow-dom-testing-library

[NicoVIII]

Hi everyone!
We use this plugin for linting our tests, but because we work with web components, we rely heavily on shadow-dom-testing-library.
I'm trying to make especially the no-node-access-rule work for this setup, but I'm failing spectacularly 😅

As far as I could see in the code, this rule especially is an exception in terms of aggressive reporting - therefore I added shadow-dom-testing-library in the settings as testing-library/utils-module and I can confirm that some issues are reported with this, if I use build-in queries, e.g.

import { screen } from 'shadow-dom-testing-library';

...

screen.getByText('example').click(); // triggers no-node-access with the utils-module setting

Now we often use other queries, because as far as I understand it, this is the point of shadow-dom-testing-library. Something like

screen.getByShadowText('example').click();

doesn't trigger the no-node-access rule. I also tried defining those custom queries in the settings, sadly this doesn't change the result.

settings: {
	'testing-library/custom-queries': [
		'ByShadowRole',
		'ByShadowLabelText',
		'ByShadowPlaceholderText',
		'ByShadowText',
		'ByShadowAltText',
		'ByShadowTitle',
		'ByShadowDisplayValue',
	],
	'testing-library/utils-module': 'shadow-dom-testing-library',
},

Do you have any idea what I could do to make this combination of shadow-dom-testing-library and this eslint plugin work? After studying the docs and experimenting around I am out of ideas 😅

[Belco90]

Hi @NicoVIII. I'm afraid that shadow-dom-testing-library is not fully supported by this plugin.

Your settings for adding custom queries and utils module are a good idea, but I'm afraid that no-node-access works independently from those settings to better detect the testing library utils.

The ideal fix would be to actually add such queries and module to the codebase (plus a preset for this framework) with a PR.

[NicoVIII]

Thank you!