Shouldn't prefer-screen-queries takes into account querySelector?

prefer-screen-queries is not taken into account that the user can do this:

const utils = render(<Component />);
utils.container.querySelector('div');

This kind of selector can lead the user to a bad pattern of tests according to the testing-library.

I don’t understand eslint under the hood, but I propose to change the prefer-screen-queries to take the snippet above into account as a bad pattern.

What do you guys think about that?

[lourenci]

Yes, there is a bug. I made some mistake earlier trying to reproduce this, I can reproduce now.

I’ll try to solve this.

[gndelia]

Hey, @lourenci , I’m reopening your issue.

despite the discussion about whether we should enforce or not using the querySelector and all that, this code in your first comment

const utils = render(<Component />);
utils.container.querySelector('div');

is an invalid scenario.

This rule (prefer-screen-queries) should detect that screen is not used and enforce it to fail, as the correct scenario should be

render(<Component />);
screen.container.querySelector('div');

Then, another rule should probably enforce whether to use or not container.querySelector - but this probably is a bug of prefer-screen-queries

Good find btw 😃

If you like, feel free to take a look at this bug and open a PR.