diff --git a/docs/rules/no-debug.md b/docs/rules/no-debug.md
index ae51cfc2..ef848d85 100644
--- a/docs/rules/no-debug.md
+++ b/docs/rules/no-debug.md
@@ -11,11 +11,23 @@ Examples of **incorrect** code for this rule:
```js
const { debug } = render();
debug();
-// OR
+```
+
+```js
const utils = render();
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)
diff --git a/lib/rules/no-debug.js b/lib/rules/no-debug.js
index 16662a63..83086af2 100644
--- a/lib/rules/no-debug.js
+++ b/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
diff --git a/tests/lib/rules/no-debug.js b/tests/lib/rules/no-debug.js
index 16b87a93..5b9cca2b 100644
--- a/tests/lib/rules/no-debug.js
+++ b/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',
+ },
+ ],
+ },
],
});