feat: new rule prefer-presence-queries

[Belco90]

This closes #90

BREAKING CHANGE: previous rule no-get-by-for-checking-element-not-present has been replaced by this one.

[benmonro]

some minor typos and a couple use cases we should probably address, but overall looking good, thank you for doing this!

[Belco90]

@benmonro after thinking about it again, I don't think this case should be reported:

const button = screen.queryByText("button");
expect(button).toBeInTheDocument()

This is not so simple to identify as vars containing the dom elements are updated dynamically. Take a look at this example:

There is a really simple component with a text and a button. When you click the button, the text disappear. In the test (which you can see it's passing) I'm getting the message with getByText and saving it within a var to check it's present, this is fine. But then I'm checking with the same var that the element is not present after clicking the button. That element was get with a getBy* query and I'm checking that it's not present so this rule would complain from the case you mentioned above. But same var and query have been used to check is present in a different line. Should this rule complain then? If so, the user would have to switch the query to queryBy* one and then the rule would complain about the opposite: using a queryBy* for checking element is present.

This seems like a vicious circle, so I don't think this rule should check queries values saved in vars for its first implementation as it adds lots of complexity.

The current PR is the final implementation then.

[benmonro]

@Belco90 hmm yeah I see what you mean. What if we just check for it's use immediately after the query? Reason I ask is that it gives people a way to work around the rule which is what I'm trying to prevent...

[Belco90]

@Belco90 hmm yeah I see what you mean. What if we just check for it's use immediately after the query? Reason I ask is that it gives people a way to work around the rule which is what I'm trying to prevent...

I'm pretty sure there are others ways to skip this and other rules. There are different ways it could be solved, but I'm not sure is worth the effort for now. Even checking if it's used immediately after the query has lots of variants. Would you report this?

// they are not used immediately after their declaration
const button = screen.queryByText("button");
const submit = screen.queryByText('submit');
expect(button).toBeInTheDocument();
expect(submit).toBeInTheDocument();

Or this?

// not used immediately either
const button = screen.queryByText("button");
expect(button).toHaveClass('hidden');
expect(button).toBeInTheDocument();

As you can see, tons of variants would take a while to cover. This could be discussed after this first approach and release it as a minor release.

[benmonro]

@Belco90 ok fair enough this is definitely better so yeah let's ship it and see what happens