Skip to content

docs(prefer-screen-queries): update allowed properties and methods #158

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.

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
Show file tree
Hide file tree
Changes from all commits
Commits
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
15 changes: 13 additions & 2 deletions docs/rules/prefer-screen-queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

## 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.
This rule aims to force writing tests using queries directly from `screen` object rather than destructuring them from `render` result.
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. Given the screen component does not expose utility methods such as `rerender()` or the `container` property, it is correct to use the `render` response in those scenarios.

Examples of **incorrect** code for this rule:

Expand Down Expand Up @@ -43,6 +43,17 @@ getByText('foo');
// calling a method directly from a variable created by within
const myWithinVariable = within(screen.getByText('foo'));
myWithinVariable.getByText('foo');

// accessing the container and the base element
const utils = render(baz);
utils.container.querySelector('foo');
utils.baseElement.querySelector('foo');

// calling the utilities function
const utils = render(<Foo />);
utils.rerender(<Foo />);
utils.unmount();
utils.asFragment();
```

## Further Reading
Expand Down
30 changes: 30 additions & 0 deletions tests/lib/rules/prefer-screen-queries.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,36 @@ ruleTester.run(RULE_NAME, rule, {
myWithinVariable.${queryMethod}('baz')
`,
})),
{
code: `
const screen = render(baz);
screen.container.querySelector('foo');
Copy link
Member

Choose a reason for hiding this comment

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

This is a good edge case 💯

`
},
{
code: `
const screen = render(baz);
screen.baseElement.querySelector('foo');
`
},
{
code: `
const utils = render(baz);
screen.rerender();
`
},
{
code: `
const utils = render(baz);
utils.unmount();
`
},
{
code: `
const utils = render(baz);
utils.asFragment();
`
}
],

invalid: [
Expand Down