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', + }, + ], + }, ], });