fix(prefer-screen-queries): false positives when using within method

Author: gndelia

docs/rules/prefer-screen-queries.md

@@ -12,17 +12,29 @@ Examples of **incorrect** code for this rule:
 const { getByText } = render(<Component />);
 getByText('foo');
 
+// calling a query from a variable returned from a `render` method
 const utils = render(<Component />);
 utils.getByText('foo');
+
+// using after render
+render(<Component />).getByText('foo');
 ```
 
 Examples of **correct** code for this rule:
 
 ```js
 import { screen } from '@testing-library/any-framework';
 
+// calling a query from the `screen` object
 render(<Component />);
 screen.getByText('foo');
+
+// using after within clause
+within(screen.getByTestId('section')).getByText('foo');
+
+// calling a query method returned from a within call
+const { getByText } = within(screen.getByText('foo'));
+getByText('foo');
 ```
 
 ## Further Reading

lib/rules/prefer-screen-queries.js

@@ -32,9 +32,51 @@ module.exports = {
       });
     }
 
+    const queriesRegex = new RegExp(ALL_QUERIES_COMBINATIONS_REGEXP);
+    const queriesDestructuredInWithinDeclaration = [];
+
     return {
-      [`CallExpression > Identifier[name=/^${ALL_QUERIES_COMBINATIONS_REGEXP}$/]`]: reportInvalidUsage,
-      [`MemberExpression[object.name!="screen"] > Identifier[name=/^${ALL_QUERIES_COMBINATIONS_REGEXP}$/]`]: reportInvalidUsage,
+      VariableDeclarator(node) {
+        const isWithinFunction =
+          node.init.callee && node.init.callee.name === 'within';
+        if (!isWithinFunction || node.id.type !== 'ObjectPattern') {
+          return;
+        }
+
+        // save the destructured query methods
+        const identifiers = node.id.properties
+          .filter(property => queriesRegex.test(property.key.name))
+          .map(property => property.key.name);
+        queriesDestructuredInWithinDeclaration.push(...identifiers);
+      },
+      [`CallExpression > Identifier[name=/^${ALL_QUERIES_COMBINATIONS_REGEXP}$/]`](
+        node
+      ) {
+        if (
+          !queriesDestructuredInWithinDeclaration.some(
+            queryName => queryName === node.name
+          )
+        ) {
+          reportInvalidUsage(node);
+        }
+      },
+      [`MemberExpression > Identifier[name=/^${ALL_QUERIES_COMBINATIONS_REGEXP}$/]`](
+        node
+      ) {
+        if (
+          node.parent.object.type === 'CallExpression' &&
+          node.parent.object.callee.name !== 'within'
+        ) {
+          reportInvalidUsage(node);
+          return;
+        }
+        if (
+          node.parent.object.type === 'Identifier' &&
+          node.parent.object.name !== 'screen'
+        ) {
+          reportInvalidUsage(node);
+        }
+      },
     };
   },
 };

tests/lib/rules/prefer-screen-queries.js

@@ -20,6 +20,18 @@ ruleTester.run('prefer-screen-queries', rule, {
     {
       code: `component.otherFunctionShouldNotThrow()`,
     },
+    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+      code: `within(component).${queryMethod}()`,
+    })),
+    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+      code: `within(screen.${queryMethod}()).${queryMethod}()`,
+    })),
+    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+      code: `
+        const { ${queryMethod} } = within(screen.getByText('foo'))
+        ${queryMethod}(baz)
+      `,
+    })),
   ],
 
   invalid: [
@@ -35,6 +47,18 @@ ruleTester.run('prefer-screen-queries', rule, {
       ],
     })),
 
+    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+      code: `render().${queryMethod}()`,
+      errors: [
+        {
+          messageId: 'preferScreenQueries',
+          data: {
+            name: queryMethod,
+          },
+        },
+      ],
+    })),
+
     ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
       code: `component.${queryMethod}()`,
       errors: [