Skip to content

Commit d8e555e

Browse files
author
Mateus Felix
committed
docs(no-container): add new and update README
1 parent 0205374 commit d8e555e

File tree

3 files changed

+42
-1
lines changed

3 files changed

+42
-1
lines changed

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@
2323
[![Tweet][tweet-badge]][tweet-url]
2424

2525
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
26+
2627
[![All Contributors](https://img.shields.io/badge/all_contributors-26-orange.svg?style=flat-square)](#contributors-)
28+
2729
<!-- ALL-CONTRIBUTORS-BADGE:END -->
2830

2931
## Installation
@@ -138,6 +140,7 @@ To enable this configuration use the `extends` property in your
138140
| [await-fire-event](docs/rules/await-fire-event.md) | Enforce async fire event methods to be awaited | ![vue-badge][] | |
139141
| [consistent-data-testid](docs/rules/consistent-data-testid.md) | Ensure `data-testid` values match a provided regex. | | |
140142
| [no-await-sync-query](docs/rules/no-await-sync-query.md) | Disallow unnecessary `await` for sync queries | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
143+
| [no-container](docs/rules/no-container.md) | Disallow the use of `container` methods | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
141144
| [no-debug](docs/rules/no-debug.md) | Disallow the use of `debug` | ![angular-badge][] ![react-badge][] ![vue-badge][] | |
142145
| [no-dom-import](docs/rules/no-dom-import.md) | Disallow importing from DOM Testing Library | ![angular-badge][] ![react-badge][] ![vue-badge][] | ![fixable-badge][] |
143146
| [no-manual-cleanup](docs/rules/no-manual-cleanup.md) | Disallow the use of `cleanup` | | |
@@ -214,6 +217,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
214217

215218
<!-- markdownlint-enable -->
216219
<!-- prettier-ignore-end -->
220+
217221
<!-- ALL-CONTRIBUTORS-LIST:END -->
218222

219223
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

docs/rules/no-container.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Disallow the use of `container` methods (no-container)
2+
3+
By using `container` methods like `.querySelector` you may lose a lot of the confidence that the user can really interact with your UI. Also, the test becomes harder to read, and it will break more frequently.
4+
5+
## Rule Details
6+
7+
This rule aims to disallow the use of `container` methods in your tests.
8+
9+
Examples of **incorrect** code for this rule:
10+
11+
```js
12+
const { container } = render(<Example />);
13+
const button = container.querySelector('.btn-primary');
14+
```
15+
16+
```js
17+
const { container: alias } = render(<Example />);
18+
const button = alias.querySelector('.btn-primary');
19+
```
20+
21+
Examples of **correct** code for this rule:
22+
23+
```js
24+
render(<Example />);
25+
screen.getByRole('button', { name: /click me/i });
26+
```
27+
28+
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.
29+
30+
```
31+
"testing-library/no-container": ["error", {"renderFunctions":["renderWithRedux", "renderWithRouter"]}],
32+
```
33+
34+
## Further Reading
35+
36+
- [debug API in React Testing Library](https://testing-library.com/docs/react-testing-library/api#debug)
37+
- [`screen.debug` in Dom Testing Library](https://testing-library.com/docs/dom-testing-library/api-queries#screendebug)

lib/rules/no-container.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default ESLintUtils.RuleCreator(getDocsUrl)({
1616
meta: {
1717
type: 'problem',
1818
docs: {
19-
description: 'Disallow the usage of container methods',
19+
description: 'Disallow the use of container methods',
2020
category: 'Best Practices',
2121
recommended: 'error',
2222
},

0 commit comments

Comments
 (0)