feat(no-debug): scan for screen.debug()

docs/rules/no-debug.md

@@ -11,11 +11,23 @@ Examples of **incorrect** code for this rule:
 ```js
 const { debug } = render(<Hello />);
 debug();
-// OR
+```
+
+```js
 const utils = render(<Hello />);
 utils.debug();
 ```
 
+```js
+import { screen } from '@testing-library/dom';
+screen.debug();
+```
+
+```js
+const { screen } = require('@testing-library/react');
+screen.debug();
+```
+
 If you use [custom render functions](https://testing-library.com/docs/example-react-redux) then you can set a config option in your `.eslintrc` to look for these.
 
 ```
@@ -25,3 +37,4 @@ If you use [custom render functions](https://testing-library.com/docs/example-re
 ## Further Reading
 
 - [debug API in React Testing Library](https://testing-library.com/docs/react-testing-library/api#debug)
+- [`screen.debug` in Dom Testing Library](https://testing-library.com/docs/dom-testing-library/api-queries#screendebug)

lib/rules/no-debug.js

@@ -2,6 +2,14 @@
 
 const { getDocsUrl } = require('../utils');
 
+const LIBRARY_MODULES_WITH_SCREEN = [
+  '@testing-library/dom',
+  '@testing-library/react',
+  '@testing-library/preact',
+  '@testing-library/vue',
+  '@testing-library/svelte',
+];
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -36,6 +44,8 @@ module.exports = {
       [{ renderFunctions }] = context.options;
     }
 
+    let hasImportedScreen = false;
+
     return {
       VariableDeclarator(node) {
         if (
@@ -57,6 +67,44 @@ module.exports = {
           }
         }
       },
+      [`VariableDeclarator > CallExpression > Identifier[name="require"]`](
+        node
+      ) {
+        const { arguments: args } = node.parent;
+
+        const literalNodeScreenModuleName = args.find(args =>
+          LIBRARY_MODULES_WITH_SCREEN.includes(args.value)
+        );
+
+        if (!literalNodeScreenModuleName) {
+          return;
+        }
+
+        const declaratorNode = node.parent.parent;
+
+        if (
+          declaratorNode.id.type === 'ObjectPattern' &&
+          declaratorNode.id.properties.some(
+            property => property.key.name === 'screen'
+          )
+        ) {
+          hasImportedScreen = true;
+        }
+      },
+      ImportDeclaration(node) {
+        const screenModuleName = LIBRARY_MODULES_WITH_SCREEN.find(
+          module => module === node.source.value
+        );
+
+        if (
+          screenModuleName &&
+          node.specifiers.some(
+            specifier => specifier.imported.name === 'screen'
+          )
+        ) {
+          hasImportedScreen = true;
+        }
+      },
       [`CallExpression > Identifier[name="debug"]`](node) {
         if (hasDestructuredDebugStatement) {
           context.report({
@@ -65,6 +113,18 @@ module.exports = {
           });
         }
       },
+      [`CallExpression > MemberExpression > Identifier[name="debug"]`](node) {
+        if (
+          hasImportedScreen &&
+          node.parent &&
+          node.parent.object.name === 'screen'
+        ) {
+          context.report({
+            node,
+            messageId: 'noDebug',
+          });
+        }
+      },
       'Program:exit'() {
         renderVariableDeclarators.forEach(renderVar => {
           const renderVarReferences = context

tests/lib/rules/no-debug.js

@@ -17,6 +17,7 @@ const ruleTester = new RuleTester({
     ecmaFeatures: {
       jsx: true,
     },
+    sourceType: 'module',
   },
 });
 ruleTester.run('no-debug', rule, {
@@ -56,6 +57,39 @@ ruleTester.run('no-debug', rule, {
         utils.foo()
       `,
     },
+    {
+      code: `screen.debug()`,
+    },
+    {
+      code: `
+        const { screen } = require('@testing-library/dom')
+        screen.debug
+      `,
+    },
+    {
+      code: `
+        import { screen } from '@testing-library/dom'
+        screen.debug
+      `,
+    },
+    {
+      code: `const { queries } = require('@testing-library/dom')`,
+    },
+    {
+      code: `import { queries } from '@testing-library/dom'`,
+    },
+    {
+      code: `
+        const { screen } = require('something-else')
+        screen.debug()
+      `,
+    },
+    {
+      code: `
+        import { screen } from 'something-else'
+        screen.debug()
+      `,
+    },
   ],
 
   invalid: [
@@ -113,5 +147,27 @@ ruleTester.run('no-debug', rule, {
         },
       ],
     },
+    {
+      code: `
+        const { screen } = require('@testing-library/dom')
+        screen.debug()
+      `,
+      errors: [
+        {
+          messageId: 'noDebug',
+        },
+      ],
+    },
+    {
+      code: `
+        import { screen } from '@testing-library/dom'
+        screen.debug()
+      `,
+      errors: [
+        {
+          messageId: 'noDebug',
+        },
+      ],
+    },
   ],
 });