fix(prefer-screen-queries): take container into account (testing-library#150)

Co-authored-by: Gonzalo D'Elia <[email protected]>

Author: lourenci

docs/rules/prefer-screen-queries.md

@@ -2,26 +2,30 @@
 
 ## Rule Details
 
-DOM Testing Library (and other Testing Library frameworks built on top of it) exports a `screen` object which has every query (and a `debug` method). This works better with autocomplete and makes each test a little simpler to write and maintain.
+DOM Testing Library (and other Testing Library frameworks built on top of it) exports a `screen` object which has every query (plus the `container` and a `debug` method). This works better with autocomplete and makes each test a little simpler to write and maintain.
 This rule aims to force writing tests using queries directly from `screen` object rather than destructuring them from `render` result.
 
 Examples of **incorrect** code for this rule:
 
 ```js
 // calling a query from the `render` method
-const { getByText } = render(<Component />);
+const { getByText, container } = render(<Component />);
 getByText('foo');
+container.querySelector('foo');
 
 // calling a query from a variable returned from a `render` method
 const utils = render(<Component />);
 utils.getByText('foo');
+utils.container.querySelector('foo');
 
 // using after render
 render(<Component />).getByText('foo');
+render(<Component />).container.querySelector('foo');
 
 // calling a query from a custom `render` method that returns an array
-const [getByText] = myCustomRender(<Component />);
+const [getByText, container] = myCustomRender(<Component />);
 getByText('foo');
+container.querySelector('foo');
 ```
 
 Examples of **correct** code for this rule:
@@ -32,17 +36,21 @@ import { screen } from '@testing-library/any-framework';
 // calling a query from the `screen` object
 render(<Component />);
 screen.getByText('foo');
+screen.container.querySelector('foo');
 
 // using after within clause
 within(screen.getByTestId('section')).getByText('foo');
+within(screen.getByTestId('section')).container.querySelector('foo');
 
 // calling a query method returned from a within call
-const { getByText } = within(screen.getByText('foo'));
+const { getByText, container } = within(screen.getByText('foo'));
 getByText('foo');
+container.querySelector('foo');
 
 // calling a method directly from a variable created by within
 const myWithinVariable = within(screen.getByText('foo'));
 myWithinVariable.getByText('foo');
+myWithinVariable.container.querySelector('foo');
 ```
 
 ## Further Reading

lib/rules/prefer-screen-queries.ts

@@ -12,7 +12,7 @@ export const RULE_NAME = 'prefer-screen-queries';
 export type MessageIds = 'preferScreenQueries';
 type Options = [];
 
-const ALL_QUERIES_COMBINATIONS_REGEXP = ALL_QUERIES_COMBINATIONS.join('|');
+const ALL_QUERIES_COMBINATIONS_REGEXP = [...ALL_QUERIES_COMBINATIONS, 'container'].join('|');
 
 export default ESLintUtils.RuleCreator(getDocsUrl)<Options, MessageIds>({
   name: RULE_NAME,
@@ -93,7 +93,7 @@ export default ESLintUtils.RuleCreator(getDocsUrl)<Options, MessageIds>({
           isIdentifier(node) &&
           isMemberExpression(node.parent) &&
           isCallExpression(node.parent.object) &&
-          isIdentifier(node.parent.object.callee) && 
+          isIdentifier(node.parent.object.callee) &&
           node.parent.object.callee.name !== 'within'
         ) {
           reportInvalidUsage(node);

tests/lib/rules/prefer-screen-queries.test.ts

@@ -4,9 +4,11 @@ import { ALL_QUERIES_COMBINATIONS } from '../../../lib/utils';
 
 const ruleTester = createRuleTester();
 
+const ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER = [...ALL_QUERIES_COMBINATIONS, 'container']
+
 ruleTester.run(RULE_NAME, rule, {
   valid: [
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `screen.${queryMethod}()`,
     })),
     {
@@ -15,19 +17,19 @@ ruleTester.run(RULE_NAME, rule, {
     {
       code: `component.otherFunctionShouldNotThrow()`,
     },
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `within(component).${queryMethod}()`,
     })),
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `within(screen.${queryMethod}()).${queryMethod}()`,
     })),
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `
         const { ${queryMethod} } = within(screen.getByText('foo'))
         ${queryMethod}(baz)
       `,
     })),
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `
         const myWithinVariable = within(foo)
         myWithinVariable.${queryMethod}('baz')
@@ -36,7 +38,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
 
   invalid: [
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `${queryMethod}()`,
       errors: [
         {
@@ -48,7 +50,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     })),
 
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `render().${queryMethod}()`,
       errors: [
         {
@@ -60,7 +62,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     })),
 
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `component.${queryMethod}()`,
       errors: [
         {
@@ -71,7 +73,7 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     })),
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `
         const { ${queryMethod} } = render()
         ${queryMethod}(baz)
@@ -85,7 +87,7 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     })),
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `
         const myRenderVariable = render()
         myRenderVariable.${queryMethod}(baz)
@@ -99,7 +101,7 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     })),
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `
         const [myVariable] = render()
         myVariable.${queryMethod}(baz)
@@ -113,7 +115,7 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     })),
-    ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
+    ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
       code: `
         const [myVariable] = within()
         myVariable.${queryMethod}(baz)