fix(await-async-query): work around false-positives in chained findBy queries

[notjosh]

Checks

• I have read the contributing guidelines.

Changes

• improve await-async-query to be aware of (likely) react-test-renderer instances so it can suppress false-positive errors requiring await on findBy*() queries when used with React Native Testing Library

🚧 I'm happy to clean this up before merging, but wanted to get feedback before proceeding.

The approach used is fairly naïve but it seems reliable in my usage. Similar to other rules in this repo, it's easy enough to create false-negatives with enough layers of abstraction (via variables/function calls/etc), but the more common simple cases should be covered.

Context

Related: #673

[Belco90]

Hi @notjosh! Thanks for your MR.

I'm afraid this wasn't the approach we needed. As described in #673, the actual fix should be ignoring every query matching Testing Library patterns if they were imported from react-test-renderer.

Your fix is interesting, but it's trying to fix false positives in chained findBy* queries. However, the actual problem is caused by false positives in findBy* queries from react-test-renderer. Another issue of solving this exclusively for this rule is that the same false positive might happen in another rule, that's another reason why we require a generic fix in our internal helpers (as mentioned in the original ticket).

I'll think about if we can reuse part of your code for the actual fix or something else, since I don't want to just throw away your code.

[notjosh]

I'm afraid this wasn't the approach we needed. As described in #673, the actual fix should be ignoring every query matching Testing Library patterns if they were imported from react-test-renderer.

@Belco90 I was just thinking about this more, and realised this PR doesn't actually solve #673. But it does solve a different problem.

#673 is about directly importing (and using) react-test-renderer directly, but this PR isn't relevant to that.

Instead, this PR fixes an issue we're having that comes from React Native Testing Library. For example, this small snippet summarises the problem:

import { render } from '@testing-library/react-native';

test('some test case', async () => {
  const screen = render(<SomeComponent />);
  const falsePositive = screen.getByText('foo').findByProps({ testID: 'bar' })
                               ^^^^^^^^^        ^- from react-test-renderer
                               └- from RNTL, returns ReactTestInstance
})

In RNTL, the queries (mostly) all return a ReactTestInstance (docs) from react-test-renderer, which can happily chain a (sync) findBy*() method (causing the 💥 eslint false positive 💥).

However, as far as I can tell, DOM-based Testing Library queries (usually) return the element, so chaining doesn't make sense, and you'd never run into this problem.

So I guess we can think about this PR as being specific to React Native Testing Library, so we can:

• create a testing-library/react-native configuration, which extends testing-library/react and includes this rule
• ignore RNTL as it's a different library with a different API (and just happens to be mostly compatible)
• include this rule in testing-library/react as it is, as it shouldn't interfere with non-React Native usage

Can you take another look at this PR with this context in mind? Fixing this issue is a blocker to us adopting this library, so I'd love to help you resolve it!

[Belco90]

@notjosh this changes everything, thank you very much for the context!

I wasn't aware that React Native Testing Library was returning a ReactTestInstance from every query.

That basically means the problem you described and the one from #671 are related, and all the findBy utils provided by react-test-renderer must be ignored as a Testing Library query in general.

The bad news is that your PR won't be necessary. The good news is that the actual fix is pretty simple: we only need to ignore all the find* utils provided by react-test-renderer. That's as simple as excluding those utils name from our isFindQueryVariant internal method.

I'm closing this PR and repurposing #673 to apply this simple change instead. Would you like to submit the PR to change that behavior @notjosh?