From 69daeab6f55ed0e9a12c00644c1a5289e99b4525 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltr=C3=A1n=20Alarc=C3=B3n?= Date: Tue, 13 Apr 2021 21:22:04 +0200 Subject: [PATCH 1/5] docs: update README with more info around Aggressive Reporting --- README.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/README.md b/README.md index f9090b27..26b25b5c 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,30 @@ Then configure the rules you want to use within `rules` property of your `.eslin } ``` +### Run the plugin only against test files + +With the default setup mentioned before `eslint-plugin-testing-library` will be run against your whole codebase. If want to run this plugin only against your tests files, you can do that by using [ESLint `overrides`](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns). + +Assuming you are using the same pattern for your test files as [Jest by default](https://jestjs.io/docs/configuration#testmatch-arraystring), the following config would run `eslint-plugin-testing-library` only against your test files: + +```javascript +// .eslintrc +module.exports = { + // here you have your usual config which applies to the whole project... + extends: ['airbnb', 'plugin:prettier/recommended'], + plugins: ['react-hooks'], + + overrides: [ + { + // ... and here you expand the ESLint plugins run for your tests files + files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'], + extends: ['plugin:testing-library/react'], + plugins: ['testing-library'], + }, + ], +}; +``` + ## Shareable configurations This plugin exports several recommended configurations that enforce good practices for specific Testing Library packages. @@ -191,6 +215,12 @@ To enable this configuration use the `extends` property in your [react-badge]: https://img.shields.io/badge/-React-black?style=flat-square&logo=react&logoColor=white&labelColor=61DAFB&color=black [vue-badge]: https://img.shields.io/badge/-Vue-black?style=flat-square&logo=vue.js&logoColor=white&labelColor=4FC08D&color=black +## Aggressive Reporting + +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). + +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. + ## Shared Settings 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). @@ -227,6 +257,30 @@ A list of function names that are valid as Testing Library custom renders. Relat [You can find more details here](docs/migrating-to-v4-guide.md#testing-librarycustom-renders). +## Troubleshooting + +### There are errors reported in non-testing files + +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). + +You can avoid this by: + +1. [running `eslint-plugin-testing-library` only against testing files](#run-the-plugin-only-against-test-files) +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. + +### There are false positives in testing files + +If you are getting false positive ESLint errors in your testing files, this could be caused by [Aggressive Reporting](#aggressive-reporting). + +You can avoid this by: + +1. [running `eslint-plugin-testing-library` only against testing files](#run-the-plugin-only-against-test-files) +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. + ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): From 5413f14904a73729d8972b8f068400ffcf86ab2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltr=C3=A1n=20Alarc=C3=B3n?= Date: Tue, 13 Apr 2021 21:28:19 +0200 Subject: [PATCH 2/5] docs: remove unnecessary module.exports syntax --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 26b25b5c..9f0d2808 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ Assuming you are using the same pattern for your test files as [Jest by default] ```javascript // .eslintrc -module.exports = { +{ // here you have your usual config which applies to the whole project... extends: ['airbnb', 'plugin:prettier/recommended'], plugins: ['react-hooks'], From cebdd21a55bf274f1ba9dc3631f1822d02db148d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltr=C3=A1n=20Alarc=C3=B3n?= Date: Wed, 14 Apr 2021 08:44:37 +0000 Subject: [PATCH 3/5] docs: improve running plugin on testing files --- README.md | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 9f0d2808..79e23142 100644 --- a/README.md +++ b/README.md @@ -72,28 +72,35 @@ Then configure the rules you want to use within `rules` property of your `.eslin ### Run the plugin only against test files -With the default setup mentioned before `eslint-plugin-testing-library` will be run against your whole codebase. If want to run this plugin only against your tests files, you can do that by using [ESLint `overrides`](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns). +With the default setup mentioned before, `eslint-plugin-testing-library` will be run against your whole codebase. If you want to run this plugin only against your tests files, you have the following options: + +**ESLint `overrides`** +One way of restricting ESLint config by file patterns is by using [ESLint `overrides`](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns). Assuming you are using the same pattern for your test files as [Jest by default](https://jestjs.io/docs/configuration#testmatch-arraystring), the following config would run `eslint-plugin-testing-library` only against your test files: -```javascript +```json // .eslintrc { - // here you have your usual config which applies to the whole project... - extends: ['airbnb', 'plugin:prettier/recommended'], - plugins: ['react-hooks'], + // 1) Here we have our usual config which applies to the whole project, so we don't put testing-library preset here. + "extends": ["airbnb", "plugin:prettier/recommended"], - overrides: [ + // 2) We load eslint-plugin-testing-library globally with other ESLint plugins. + "plugins": ["react-hooks", "testing-library"], + + "overrides": [ { - // ... and here you expand the ESLint plugins run for your tests files - files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'], - extends: ['plugin:testing-library/react'], - plugins: ['testing-library'], + // 3) Now we enable eslint-plugin-testing-library rules or preset only for matching files! + "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"], + "extends": ["plugin:testing-library/react"] }, ], }; ``` +**ESLint Cascading and Hierachy** +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. + ## Shareable configurations This plugin exports several recommended configurations that enforce good practices for specific Testing Library packages. From 94fd92e5bd662278b39c1cd47744925911ec05de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltr=C3=A1n=20Alarc=C3=B3n?= Date: Wed, 14 Apr 2021 11:15:34 +0200 Subject: [PATCH 4/5] docs: remove wrong option for test files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michaël De Boey --- README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index 79e23142..354e9dcd 100644 --- a/README.md +++ b/README.md @@ -281,10 +281,7 @@ If you think the error you are getting is not related to this at all, please [fi If you are getting false positive ESLint errors in your testing files, this could be caused by [Aggressive Reporting](#aggressive-reporting). -You can avoid this by: - -1. [running `eslint-plugin-testing-library` only against testing files](#run-the-plugin-only-against-test-files) -2. [limiting the scope of Aggressive Reporting through Shared Settings](#shared-settings) +You can avoid this by [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. From ec7b68abc0cd79d5dece7cac73101c81096797ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltr=C3=A1n=20Alarc=C3=B3n?= Date: Wed, 14 Apr 2021 11:49:26 +0200 Subject: [PATCH 5/5] docs: transform bold texts into headings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michaël De Boey --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 354e9dcd..6554ce60 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,8 @@ Then configure the rules you want to use within `rules` property of your `.eslin With the default setup mentioned before, `eslint-plugin-testing-library` will be run against your whole codebase. If you want to run this plugin only against your tests files, you have the following options: -**ESLint `overrides`** +#### ESLint `overrides` + One way of restricting ESLint config by file patterns is by using [ESLint `overrides`](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns). Assuming you are using the same pattern for your test files as [Jest by default](https://jestjs.io/docs/configuration#testmatch-arraystring), the following config would run `eslint-plugin-testing-library` only against your test files: @@ -98,7 +99,8 @@ Assuming you are using the same pattern for your test files as [Jest by default] }; ``` -**ESLint Cascading and Hierachy** +#### ESLint Cascading and Hierachy + 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. ## Shareable configurations