Skip to content

Commit a8d2017

Browse files
feat: new Aggressive Reporting settings (#344)
* refactor: rework query helpers * feat: first approach for custom-queries setting * test: add fake rule cases for custom-queries setting * test(await-async-query): add extra cases for custom-queries setting * test(no-await-sync-query): add extra cases for custom-queries setting * test(prefer-screen-queries): add extra cases for custom-queries setting * docs: add custom-queries setting to migrating guide * docs: add custom-queries setting to README * docs: fix incorrect closing quote * docs: include custom-queries more details link * feat: add off option to all shared settings * fix: check if aggressive reporting mechanisms are enabled correctly * test: add extra cases for switching settings off here and there * docs: update migration guide with option to switch mechanisms off * docs: update README with option to switch mechanisms off * docs: grammar suggestions Co-authored-by: Michaël De Boey <[email protected]> Co-authored-by: Michaël De Boey <[email protected]>
1 parent 1c4391c commit a8d2017

8 files changed

+593
-77
lines changed

README.md

+45-11
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,9 @@ Assuming you are using the same pattern for your test files as [Jest by default]
9999
};
100100
```
101101

102-
#### ESLint Cascading and Hierachy
102+
#### ESLint Cascading and Hierarchy
103103

104-
Another approach for customizing ESLint config by paths is through [ESLint Cascading and Hierachy](https://eslint.org/docs/user-guide/configuring/configuration-files#cascading-and-hierarchy). This is useful if all your tests are placed under the same folder, so you can place there another `.eslintrc` where you enable `eslint-plugin-testing-library` for applying it only to the files under such folder, rather than enabling it on your global `.eslintrc` which would apply to your whole project.
104+
Another approach for customizing ESLint config by paths is through [ESLint Cascading and Hierarchy](https://eslint.org/docs/user-guide/configuring/configuration-files#cascading-and-hierarchy). This is useful if all your tests are placed under the same folder, so you can place there another `.eslintrc` where you enable `eslint-plugin-testing-library` for applying it only to the files under such folder, rather than enabling it on your global `.eslintrc` which would apply to your whole project.
105105

106106
## Shareable configurations
107107

@@ -228,17 +228,17 @@ To enable this configuration use the `extends` property in your
228228

229229
In v4 this plugin introduced a new feature called "Aggressive Reporting", which intends to detect Testing Library utils usages even if they don't come directly from a Testing Library package (i.e. [using a custom utility file to re-export everything from Testing Library](https://testing-library.com/docs/react-testing-library/setup/#custom-render)). You can [read more about this feature here](docs/migrating-to-v4-guide.md#aggressive-reporting).
230230

231-
If you are looking to restricting this feature, please refer to the [Shared Settings section](#shared-settings) to do so. It's not possible to switch this mechanism entirely off yet, but there will be a new option in the Shared Settings in the future to be able to achieve this.
231+
If you are looking to restricting or switching off this feature, please refer to the [Shared Settings section](#shared-settings) to do so.
232232

233233
## Shared Settings
234234

235-
There are some configuration options available that will be shared across all the plugin rules. This is achieved using [ESLint Shared Settings](https://eslint.org/docs/user-guide/configuring/configuration-files#adding-shared-settings). These Shared Settings are meant to be used if you need to restrict the Aggressive Reporting mechanism, which is an out of the box advanced feature to lint Testing Library usages in a simpler way for most of the users. **So please before configuring any of these settings**, read more about [the advantages of `eslint-plugin-testing-library` Aggressive Reporting mechanism](docs/migrating-to-v4-guide.md#aggressive-reporting), and [how it's affected by these settings](docs/migrating-to-v4-guide.md#shared-settings).
235+
There are some configuration options available that will be shared across all the plugin rules. This is achieved using [ESLint Shared Settings](https://eslint.org/docs/user-guide/configuring/configuration-files#adding-shared-settings). These Shared Settings are meant to be used if you need to restrict or switch off the Aggressive Reporting, which is an out of the box advanced feature to lint Testing Library usages in a simpler way for most of the users. **So please before configuring any of these settings**, read more about [the advantages of `eslint-plugin-testing-library` Aggressive Reporting feature](docs/migrating-to-v4-guide.md#aggressive-reporting), and [how it's affected by these settings](docs/migrating-to-v4-guide.md#shared-settings).
236236

237237
If you are sure about configuring the settings, these are the options available:
238238

239239
### `testing-library/utils-module`
240240

241-
The name of your custom utility file from where you re-export everything from Testing Library package.
241+
The name of your custom utility file from where you re-export everything from the Testing Library package, or `"off"` to switch related Aggressive Reporting mechanism off. Relates to [Aggressive Imports Reporting](docs/migrating-to-v4-guide.md#imports).
242242

243243
```json
244244
// .eslintrc
@@ -249,11 +249,11 @@ The name of your custom utility file from where you re-export everything from Te
249249
}
250250
```
251251

252-
[You can find more details here](docs/migrating-to-v4-guide.md#testing-libraryutils-module).
252+
[You can find more details about the `utils-module` setting here](docs/migrating-to-v4-guide.md#testing-libraryutils-module).
253253

254254
### `testing-library/custom-renders`
255255

256-
A list of function names that are valid as Testing Library custom renders. Relates to [Aggressive Reporting - Renders](docs/migrating-to-v4-guide.md#renders)
256+
A list of function names that are valid as Testing Library custom renders, or `"off"` to switch related Aggressive Reporting mechanism off. Relates to [Aggressive Renders Reporting](docs/migrating-to-v4-guide.md#renders).
257257

258258
```json
259259
// .eslintrc
@@ -264,26 +264,60 @@ A list of function names that are valid as Testing Library custom renders. Relat
264264
}
265265
```
266266

267-
[You can find more details here](docs/migrating-to-v4-guide.md#testing-librarycustom-renders).
267+
[You can find more details about the `custom-renders` setting here](docs/migrating-to-v4-guide.md#testing-librarycustom-renders).
268+
269+
### `testing-library/custom-queries`
270+
271+
A list of query names/patterns that are valid as Testing Library custom queries, or `"off"` to switch related Aggressive Reporting mechanism off. Relates to [Aggressive Reporting - Queries](docs/migrating-to-v4-guide.md#queries)
272+
273+
```json
274+
// .eslintrc
275+
{
276+
"settings": {
277+
"testing-library/custom-queries": ["ByIcon", "getByComplexText"]
278+
}
279+
}
280+
```
281+
282+
[You can find more details about the `custom-queries` setting here](docs/migrating-to-v4-guide.md#testing-librarycustom-queries).
283+
284+
### Switching all Aggressive Reporting mechanisms off
285+
286+
Since each Shared Setting is related to one Aggressive Reporting mechanism, and they accept `"off"` to opt out of that mechanism, you can switch the entire feature off by doing:
287+
288+
```json
289+
// .eslintrc
290+
{
291+
"settings": {
292+
"testing-library/utils-module": "off",
293+
"testing-library/custom-renders": "off",
294+
"testing-library/custom-queries": "off"
295+
}
296+
}
297+
```
268298

269299
## Troubleshooting
270300

271-
### There are errors reported in non-testing files
301+
### Errors reported in non-testing files
272302

273303
If you find ESLint errors related to `eslint-plugin-testing-library` in files other than testing, this could be caused by [Aggressive Reporting](#aggressive-reporting).
274304

275305
You can avoid this by:
276306

277307
1. [running `eslint-plugin-testing-library` only against testing files](#run-the-plugin-only-against-test-files)
278308
2. [limiting the scope of Aggressive Reporting through Shared Settings](#shared-settings)
309+
3. [switching Aggressive Reporting feature off](#switching-all-aggressive-reporting-mechanisms-off)
279310

280311
If you think the error you are getting is not related to this at all, please [fill a new issue](https://github.com/testing-library/eslint-plugin-testing-library/issues/new/choose) with as many details as possible.
281312

282-
### There are false positives in testing files
313+
### False positives in testing files
283314

284315
If you are getting false positive ESLint errors in your testing files, this could be caused by [Aggressive Reporting](#aggressive-reporting).
285316

286-
You can avoid this by [limiting the scope of Aggressive Reporting through Shared Settings](#shared-settings)
317+
You can avoid this by:
318+
319+
1. [limiting the scope of Aggressive Reporting through Shared Settings](#shared-settings)
320+
2. [switching Aggressive Reporting feature off](#switching-all-aggressive-reporting-mechanisms-off)
287321

288322
If you think the error you are getting is not related to this at all, please [fill a new issue](https://github.com/testing-library/eslint-plugin-testing-library/issues/new/choose) with as many details as possible.
289323

docs/migrating-to-v4-guide.md

+95-12
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ So what is this Aggressive Reporting introduced on v4? Until v3, `eslint-plugin-
9898
- users can [re-export Testing Library utils from a custom module](https://testing-library.com/docs/react-testing-library/setup/#configuring-jest-with-test-utils), so they won't be imported from a Testing Library package but a custom one.
9999
- users can [add their own Custom Queries](https://testing-library.com/docs/react-testing-library/setup/#add-custom-queries), so it's possible to use other queries than built-in ones.
100100

101-
These customization mechanisms make impossible for `eslint-plugin-testing-library` to figure out if some utils are related to Testing Library or not. Here you have some examples illustrating it:
101+
These customization possibilities make it impossible for `eslint-plugin-testing-library` to figure out if some utils are related to Testing Library or not. Here you have some examples illustrating it:
102102

103103
```javascript
104104
import { render, screen } from '@testing-library/react';
@@ -129,7 +129,7 @@ const el = findByIcon('profile');
129129

130130
How can the `eslint-plugin-testing-library` be aware of this? Until v3, the plugin offered some options to indicate some of these custom things, so the plugin would check them when reporting usages. This can lead to false negatives though since the users might not be aware of the necessity of indicating such custom utils or just forget about doing so.
131131

132-
Instead, in `eslint-plugin-testing-library` v4 we have opted-in a more **aggressive reporting** mechanism which, by default, will assume any method named following the same patterns as Testing Library utils has to be reported too:
132+
Instead, in `eslint-plugin-testing-library` v4 we have opted-in into a more **aggressive reporting** feature which, by default, will assume any method named following the same patterns as Testing Library utils has to be reported too:
133133

134134
```javascript
135135
// importing from Custom Module
@@ -145,39 +145,42 @@ const wrapper = renderWithRedux(<Component />);
145145
const el = findByIcon('profile');
146146
```
147147

148-
There are 3 behaviors then that can be aggressively reported: imports, renders, and queries. This new Aggressive Reporting mechanism will just work fine out of the box and won't create false positives for most of the users. However, it's possible to do some tweaks to disable some of these behaviors using the new [Shared Settings](#shared-settings). We recommend you to keep reading this section to know more about these Aggressive Reporting behaviors and then check the Shared Settings if you think you'd still need it for some particular reason.
148+
There are 3 mechanisms that can be aggressively reported: imports, renders, and queries. This new Aggressive Reporting feature will work fine out of the box and won't create false positives for most of the users. However, it's possible to restrict or switch off these mechanisms using [Shared Settings](#shared-settings).
149+
We recommend you to keep reading this section to know more about these Aggressive Reporting mechanisms and afterwards check the Shared Settings if you think you'd still need them for some particular reason.
149150

150151
_You can find the motivation behind this behavior on [this issue comment](https://github.com/testing-library/eslint-plugin-testing-library/issues/222#issuecomment-679592434)._
151152

152153
### Imports
153154

154-
By default, `eslint-plugin-testing-library` v4 won't check from which module are the utils imported. This means it doesn't matter if you are importing the utils from `@testing-library/*`, `test-utils` or `whatever`.
155+
By default, `eslint-plugin-testing-library` v4 won't check from which module the utils are imported. This means it doesn't matter if you are importing the utils from `@testing-library/*`, `test-utils` or `whatever`: they'll be assumed as Testing Library related if matching Testing Library utils patterns.
155156

156-
There is a new Shared Setting to restrict this scope though: [`utils-module`](#testing-libraryutils-module). By using this setting, only utils imported from `@testing-library/*` packages, or the custom one indicated in this setting would be reported.
157+
There is a Shared Setting property to restrict or switch off this mechanism though: [`utils-module`](#testing-libraryutils-module). By using this setting, only utils imported from `@testing-library/*` packages + those indicated in this setting (if any) will be reported.
157158

158159
### Renders
159160

160161
By default, `eslint-plugin-testing-library` v4 will assume that all methods which names contain "render" should be reported. This means it doesn't matter if you are rendering your elements for testing using `render`, `customRender` or `renderWithRedux`.
161162

162-
There is a new Shared Setting to restrict this scope though: [`custom-renders`](#testing-librarycustom-renders). By using this setting, only methods strictly named `render` or as one of the indicated Custom Renders would be reported.
163+
There is a Shared Setting property to restrict or switch off this mechanism though: [`custom-renders`](#testing-librarycustom-renders). By using this setting, only methods strictly named `render` + those indicated in this setting (if any) will be reported.
163164

164165
### Queries
165166

166167
`eslint-plugin-testing-library` v4 will assume that all methods named following the pattern `get(All)By*`, `query(All)By*`, or `find(All)By*` are queries to be reported. This means it doesn't matter if you are using a built-in query (`getByText`), or a custom one (`getByIcon`): if it matches this pattern, it will be assumed as a potential query to be reported.
167168

168-
There is no way to restrict this behavior for now.
169+
There is a Shared Setting property to restrict or switch off this mechanism though: [`custom-queries`](#testing-librarycustom-queries). By using this setting, only [built-in queries](https://testing-library.com/docs/queries/about) + those indicated in this setting (if any) will be reported.
169170

170171
## Shared Settings
171172

172-
ESLint has a setting feature which allows configuring data that must be shared across all its rules: [Shared Settings](https://eslint.org/docs/user-guide/configuring/configuration-files#adding-shared-settings). Since `eslint-plugin-testing-library` v4 we are using this Shared Settings to config global things for the plugin.
173+
ESLint provides a way of configuring data that must be shared across all its rules: [Shared Settings](https://eslint.org/docs/user-guide/configuring/configuration-files#adding-shared-settings). Since `eslint-plugin-testing-library` v4 we are using this Shared Settings to config global things for the plugin.
173174

174175
To avoid collision with settings from other ESLint plugins, all the properties for this one are prefixed with `testing-library/`.
175176

176177
⚠️ **Please be aware of using these settings will disable part of [Aggressive Reporting](#aggressive-reporting).**
177178

178179
### `testing-library/utils-module`
179180

180-
The name of your custom utility file from where you re-export everything from Testing Library package. Relates to [Aggressive Reporting - Imports](#imports).
181+
Relates to the [Aggressive Imports Reporting mechanism](#imports). This setting accepts any string value.
182+
183+
If you pass a string other than `"off"` to this option, it will represent your custom utility file from where you re-export everything from Testing Library package.
181184

182185
```json
183186
// .eslintrc
@@ -188,7 +191,7 @@ The name of your custom utility file from where you re-export everything from Te
188191
}
189192
```
190193

191-
Enabling this setting, you'll restrict the errors reported by the plugin to only those utils being imported from this custom utility file, or some `@testing-library/*` package. The previous setting example would cause:
194+
Configuring this setting like that, you'll restrict the errors reported by the plugin to only those utils being imported from this custom utility file, or some `@testing-library/*` package. The previous setting example would cause:
192195

193196
```javascript
194197
import { waitFor } from '@testing-library/react';
@@ -220,9 +223,22 @@ test('testing-library/utils-module setting example', () => {
220223
});
221224
```
222225

226+
You can also set this setting to `"off"` to entirely opt-out Aggressive Imports Reporting mechanism, so only utils coming from Testing Library packages are reported.
227+
228+
```json
229+
// .eslintrc
230+
{
231+
"settings": {
232+
"testing-library/utils-module": "off"
233+
}
234+
}
235+
```
236+
223237
### `testing-library/custom-renders`
224238

225-
A list of function names that are valid as Testing Library custom renders. Relates to [Aggressive Reporting - Renders](#renders)
239+
Relates to the [Aggressive Renders Reporting mechanism](#renders). This setting accepts an array of strings or `"off"`.
240+
241+
If you pass an array of strings to this option, it will represent a list of function names that are valid as Testing Library custom renders.
226242

227243
```json
228244
// .eslintrc
@@ -233,7 +249,7 @@ A list of function names that are valid as Testing Library custom renders. Relat
233249
}
234250
```
235251

236-
Enabling this setting, you'll restrict the errors reported by the plugin related to `render` somehow to only those functions sharing a name with one of the elements of that list, or built-in `render`. The previous setting example would cause:
252+
Configuring this setting like that, you'll restrict the errors reported by the plugin related to `render` somehow to only those functions sharing a name with one of the elements of that list, or built-in `render`. The previous setting example would cause:
237253

238254
```javascript
239255
import {
@@ -269,3 +285,70 @@ test('testing-library/custom-renders setting example', () => {
269285
const invalidUsage = setupB(<Component />);
270286
});
271287
```
288+
289+
You can also set this setting to `"off"` to entirely opt-out Aggressive Renders Reporting mechanism, so only methods named `render` are reported as Testing Library render util.
290+
291+
```json
292+
// .eslintrc
293+
{
294+
"settings": {
295+
"testing-library/custom-renders": "off"
296+
}
297+
}
298+
```
299+
300+
### `testing-library/custom-queries`
301+
302+
Relates to the [Aggressive Queries Reporting mechanism](#queries). This setting accepts an array of strings or `"off"`.
303+
304+
If you pass an array of strings to this option, it will represent a list of query names/variants that are the only valid Testing Library custom queries.
305+
306+
Each string passed to this list of custom queries can be:
307+
308+
- **pattern query (recommended)**: a custom query variant (suffix starting with "By") to be reported, so all query combinations around it are reported. For instance: `"ByIcon"` would report all `getByIcon()`, `getAllByIcon()`, `queryByIcon()` and `findByIcon()`.
309+
- **strict query**: a specific custom query name to be reported, so only that very exact query would be reported but not any related variant. For instance: `"getByIcon"` would make the plugin to report `getByIcon()` but not `getAllByIcon()`, `queryByIcon()` or `findByIcon()`.
310+
311+
```json
312+
// .eslintrc
313+
{
314+
"settings": {
315+
"testing-library/custom-queries": ["ByIcon", "getByComplexText"]
316+
}
317+
}
318+
```
319+
320+
Configuring this setting like that, you'll restrict the errors reported by the plugin related to the queries to only those custom queries matching name or pattern from that list, or [built-in queries](https://testing-library.com/docs/queries/about). The previous setting example would cause:
321+
322+
```javascript
323+
// ✅ this would be reported since `getByText` is a built-in Testing Library query
324+
getByText('foo');
325+
326+
// ✅ this would be reported since `findAllByRole` is a built-in Testing Library query
327+
findAllByRole('foo');
328+
329+
// ✅ this would be reported since `getByIcon` is a custom query matching "ByIcon" setting
330+
getByIcon('foo');
331+
332+
// ✅ this would be reported since `findAllByIcon` is a custom query matching "ByIcon" setting
333+
findAllByIcon('foo');
334+
335+
// ✅ this would be reported since `getByComplexText` is a custom query matching "getByComplexText" etting
336+
getByComplexText('foo');
337+
338+
// ❌ this would NOT be reported since `getAllByComplexText` is a custom query but not matching any setting
339+
getAllByComplexText('foo');
340+
341+
// ❌ this would NOT be reported since `findBySomethingElse` is a custom query but not matching any setting
342+
findBySomethingElse('foo');
343+
```
344+
345+
You can also set this setting to `"off"` to entirely opt-out Aggressive Queries Reporting mechanism, so only built-in queries are reported.
346+
347+
```json
348+
// .eslintrc
349+
{
350+
"settings": {
351+
"testing-library/custom-queries": "off"
352+
}
353+
}
354+
```

0 commit comments

Comments
 (0)