Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 10, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
74ed870
fix(prefer-screen-queries): take container into account
lourenci Jun 5, 2020
6d68041
docs: update rule docs
lourenci Jun 6, 2020
ffa6b22
docs: fix docs
lourenci Jun 7, 2020
e5b57f0
Update docs/rules/prefer-screen-queries.md
lourenci Jun 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions docs/rules/prefer-screen-queries.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions lib/rules/prefer-screen-queries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down
26 changes: 14 additions & 12 deletions tests/lib/rules/prefer-screen-queries.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ import { ALL_QUERIES_COMBINATIONS } from '../../../lib/utils';

const ruleTester = createRuleTester();

const ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER = [...ALL_QUERIES_COMBINATIONS, 'container']
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that it would be better to keep ALL_QUERIES_COMBINATIONS and then use container for its specific scenarios. As this would test as valid scenarios that do not match real tests. For instance, in the line 12 it would translate to

screen.container()

which is not RTL valid code. Same below for

within(component).container()


ruleTester.run(RULE_NAME, rule, {
valid: [
...ALL_QUERIES_COMBINATIONS.map(queryMethod => ({
...ALL_QUERIES_COMBINATIONS_PLUS_CONTAINER.map(queryMethod => ({
code: `screen.${queryMethod}()`,
})),
{
Expand All @@ -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')
Expand All @@ -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: [
{
Expand All @@ -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: [
{
Expand All @@ -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: [
{
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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)
Expand Down