You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* 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]>
Copy file name to clipboardExpand all lines: README.md
+45-11
Original file line number
Diff line number
Diff line change
@@ -99,9 +99,9 @@ Assuming you are using the same pattern for your test files as [Jest by default]
99
99
};
100
100
```
101
101
102
-
#### ESLint Cascading and Hierachy
102
+
#### ESLint Cascading and Hierarchy
103
103
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.
105
105
106
106
## Shareable configurations
107
107
@@ -228,17 +228,17 @@ To enable this configuration use the `extends` property in your
228
228
229
229
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).
230
230
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.
232
232
233
233
## Shared Settings
234
234
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).
236
236
237
237
If you are sure about configuring the settings, these are the options available:
238
238
239
239
### `testing-library/utils-module`
240
240
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).
242
242
243
243
```json
244
244
// .eslintrc
@@ -249,11 +249,11 @@ The name of your custom utility file from where you re-export everything from Te
249
249
}
250
250
```
251
251
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).
253
253
254
254
### `testing-library/custom-renders`
255
255
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).
257
257
258
258
```json
259
259
// .eslintrc
@@ -264,26 +264,60 @@ A list of function names that are valid as Testing Library custom renders. Relat
264
264
}
265
265
```
266
266
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)
[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
+
```
268
298
269
299
## Troubleshooting
270
300
271
-
### There are errors reported in non-testing files
301
+
### Errors reported in non-testing files
272
302
273
303
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).
274
304
275
305
You can avoid this by:
276
306
277
307
1.[running `eslint-plugin-testing-library` only against testing files](#run-the-plugin-only-against-test-files)
278
308
2.[limiting the scope of Aggressive Reporting through Shared Settings](#shared-settings)
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.
281
312
282
-
### There are false positives in testing files
313
+
### False positives in testing files
283
314
284
315
If you are getting false positive ESLint errors in your testing files, this could be caused by [Aggressive Reporting](#aggressive-reporting).
285
316
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)
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.
Copy file name to clipboardExpand all lines: docs/migrating-to-v4-guide.md
+95-12
Original file line number
Diff line number
Diff line change
@@ -98,7 +98,7 @@ So what is this Aggressive Reporting introduced on v4? Until v3, `eslint-plugin-
98
98
- 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.
99
99
- 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.
100
100
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:
@@ -129,7 +129,7 @@ const el = findByIcon('profile');
129
129
130
130
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.
131
131
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:
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.
149
150
150
151
_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)._
151
152
152
153
### Imports
153
154
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.
155
156
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.
157
158
158
159
### Renders
159
160
160
161
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`.
161
162
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.
163
164
164
165
### Queries
165
166
166
167
`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.
167
168
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.
169
170
170
171
## Shared Settings
171
172
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.
173
174
174
175
To avoid collision with settings from other ESLint plugins, all the properties for this one are prefixed with `testing-library/`.
175
176
176
177
⚠️ **Please be aware of using these settings will disable part of [Aggressive Reporting](#aggressive-reporting).**
177
178
178
179
### `testing-library/utils-module`
179
180
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.
181
184
182
185
```json
183
186
// .eslintrc
@@ -188,7 +191,7 @@ The name of your custom utility file from where you re-export everything from Te
188
191
}
189
192
```
190
193
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:
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
+
223
237
### `testing-library/custom-renders`
224
238
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.
226
242
227
243
```json
228
244
// .eslintrc
@@ -233,7 +249,7 @@ A list of function names that are valid as Testing Library custom renders. Relat
233
249
}
234
250
```
235
251
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:
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()`.
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.
0 commit comments