diff --git a/docs/rules/prefer-screen-queries.md b/docs/rules/prefer-screen-queries.md index df118f1a..1ae86b40 100644 --- a/docs/rules/prefer-screen-queries.md +++ b/docs/rules/prefer-screen-queries.md @@ -2,30 +2,26 @@ ## Rule Details -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. +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. 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, container } = render(); +const { getByText } = render(); getByText('foo'); -container.querySelector('foo'); // calling a query from a variable returned from a `render` method const utils = render(); utils.getByText('foo'); -utils.container.querySelector('foo'); // using after render render().getByText('foo'); -render().container.querySelector('foo'); // calling a query from a custom `render` method that returns an array -const [getByText, container] = myCustomRender(); +const [getByText] = myCustomRender(); getByText('foo'); -container.querySelector('foo'); ``` Examples of **correct** code for this rule: @@ -36,21 +32,17 @@ import { screen } from '@testing-library/any-framework'; // calling a query from the `screen` object render(); 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, container } = within(screen.getByText('foo')); +const { getByText } = 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 diff --git a/lib/rules/prefer-screen-queries.ts b/lib/rules/prefer-screen-queries.ts index 422858ae..ce671366 100644 --- a/lib/rules/prefer-screen-queries.ts +++ b/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, 'container'].join('|'); +const ALL_QUERIES_COMBINATIONS_REGEXP = ALL_QUERIES_COMBINATIONS.join('|'); export default ESLintUtils.RuleCreator(getDocsUrl)({ name: RULE_NAME, @@ -93,7 +93,7 @@ export default ESLintUtils.RuleCreator(getDocsUrl)({ 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); diff --git a/tests/lib/rules/prefer-screen-queries.test.ts b/tests/lib/rules/prefer-screen-queries.test.ts index 56949ccd..ea19b80e 100644 --- a/tests/lib/rules/prefer-screen-queries.test.ts +++ b/tests/lib/rules/prefer-screen-queries.test.ts @@ -4,11 +4,9 @@ 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_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: `screen.${queryMethod}()`, })), { @@ -17,19 +15,19 @@ ruleTester.run(RULE_NAME, rule, { { code: `component.otherFunctionShouldNotThrow()`, }, - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: `within(component).${queryMethod}()`, })), - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: `within(screen.${queryMethod}()).${queryMethod}()`, })), - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: ` const { ${queryMethod} } = within(screen.getByText('foo')) ${queryMethod}(baz) `, })), - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: ` const myWithinVariable = within(foo) myWithinVariable.${queryMethod}('baz') @@ -38,7 +36,7 @@ ruleTester.run(RULE_NAME, rule, { ], invalid: [ - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: `${queryMethod}()`, errors: [ { @@ -50,7 +48,7 @@ ruleTester.run(RULE_NAME, rule, { ], })), - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: `render().${queryMethod}()`, errors: [ { @@ -62,7 +60,7 @@ ruleTester.run(RULE_NAME, rule, { ], })), - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: `component.${queryMethod}()`, errors: [ { @@ -73,7 +71,7 @@ ruleTester.run(RULE_NAME, rule, { }, ], })), - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: ` const { ${queryMethod} } = render() ${queryMethod}(baz) @@ -87,7 +85,7 @@ ruleTester.run(RULE_NAME, rule, { }, ], })), - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: ` const myRenderVariable = render() myRenderVariable.${queryMethod}(baz) @@ -101,7 +99,7 @@ ruleTester.run(RULE_NAME, rule, { }, ], })), - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: ` const [myVariable] = render() myVariable.${queryMethod}(baz) @@ -115,7 +113,7 @@ ruleTester.run(RULE_NAME, rule, { }, ], })), - ...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({ + ...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({ code: ` const [myVariable] = within() myVariable.${queryMethod}(baz)