From 3f2f4f8c3b510ff15afa462ff8aec61964a26f24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 4 May 2023 11:42:47 +0200 Subject: [PATCH] docs: use JS `.eslintrc` file (#754) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Mario Beltrán --- README.md | 130 +++++++++++++------------- docs/migration-guides/v4.md | 84 ++++++++--------- docs/rules/consistent-data-testid.md | 54 +++++------ docs/rules/no-await-sync-events.md | 18 ++-- docs/rules/no-debugging-utils.md | 28 +++--- docs/rules/no-dom-import.md | 10 +- docs/rules/prefer-presence-queries.md | 19 ++-- docs/rules/prefer-user-event.md | 19 ++-- 8 files changed, 181 insertions(+), 181 deletions(-) diff --git a/README.md b/README.md index 944c8d8e..de21469a 100644 --- a/README.md +++ b/README.md @@ -54,25 +54,25 @@ You can find detailed guides for migrating `eslint-plugin-testing-library` in th ## Usage -Add `testing-library` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix: +Add `testing-library` to the plugins section of your `.eslintrc.js` configuration file. You can omit the `eslint-plugin-` prefix: -```json -{ - "plugins": ["testing-library"] -} +```js +module.exports = { + plugins: ['testing-library'], +}; ``` Then configure the rules you want to use within `rules` property of your `.eslintrc`: -```json -{ - "rules": { - "testing-library/await-async-query": "error", - "testing-library/no-await-sync-query": "error", - "testing-library/no-debugging-utils": "warn", - "testing-library/no-dom-import": "off" - } -} +```js +module.exports = { + rules: { + 'testing-library/await-async-query': 'error', + 'testing-library/no-await-sync-query': 'error', + 'testing-library/no-debugging-utils': 'warn', + 'testing-library/no-dom-import': 'off', + }, +}; ``` ### Run the plugin only against test files @@ -85,9 +85,9 @@ One way of restricting ESLint config by file patterns is by using [ESLint `overr 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: -```json5 -// .eslintrc -{ +```js +// .eslintrc.js +module.exports = { // 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'], @@ -101,7 +101,7 @@ Assuming you are using the same pattern for your test files as [Jest by default] extends: ['plugin:testing-library/react'], }, ], -} +}; ``` #### ESLint Cascading and Hierarchy @@ -115,18 +115,18 @@ You can find more info about enabled rules in the [Supported Rules section](#sup Since each one of these configurations is aimed at a particular Testing Library package, they are not extendable between them, so you should use only one of them at once per `.eslintrc` file. For example, if you want to enable recommended configuration for React, you don't need to combine it somehow with DOM one: -```json5 +```js // ❌ Don't do this -{ +module.exports = { extends: ['plugin:testing-library/dom', 'plugin:testing-library/react'], -} +}; ``` -```json5 +```js // ✅ Just do this instead -{ +module.exports = { extends: ['plugin:testing-library/react'], -} +}; ``` ### DOM Testing Library @@ -134,12 +134,12 @@ Since each one of these configurations is aimed at a particular Testing Library Enforces recommended rules for DOM Testing Library. To enable this configuration use the `extends` property in your -`.eslintrc` config file: +`.eslintrc.js` config file: -```json -{ - "extends": ["plugin:testing-library/dom"] -} +```js +module.exports = { + extends: ['plugin:testing-library/dom'], +}; ``` ### Angular @@ -147,12 +147,12 @@ To enable this configuration use the `extends` property in your Enforces recommended rules for Angular Testing Library. To enable this configuration use the `extends` property in your -`.eslintrc` config file: +`.eslintrc.js` config file: -```json -{ - "extends": ["plugin:testing-library/angular"] -} +```js +module.exports = { + extends: ['plugin:testing-library/angular'], +}; ``` ### React @@ -160,12 +160,12 @@ To enable this configuration use the `extends` property in your Enforces recommended rules for React Testing Library. To enable this configuration use the `extends` property in your -`.eslintrc` config file: +`.eslintrc.js` config file: -```json -{ - "extends": ["plugin:testing-library/react"] -} +```js +module.exports = { + extends: ['plugin:testing-library/react'], +}; ``` ### Vue @@ -173,12 +173,12 @@ To enable this configuration use the `extends` property in your Enforces recommended rules for Vue Testing Library. To enable this configuration use the `extends` property in your -`.eslintrc` config file: +`.eslintrc.js` config file: -```json -{ - "extends": ["plugin:testing-library/vue"] -} +```js +module.exports = { + extends: ['plugin:testing-library/vue'], +}; ``` ### Marko @@ -186,12 +186,12 @@ To enable this configuration use the `extends` property in your Enforces recommended rules for Marko Testing Library. To enable this configuration use the `extends` property in your -`.eslintrc` config file: +`.eslintrc.js` config file: -```json -{ - "extends": ["plugin:testing-library/marko"] -} +```js +module.exports = { + extends: ['plugin:testing-library/marko'], +}; ``` ## Supported Rules @@ -251,13 +251,13 @@ If you are sure about configuring the settings, these are the options available: 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/migration-guides/v4.md#imports). -```json5 -// .eslintrc -{ +```js +// .eslintrc.js +module.exports = { settings: { 'testing-library/utils-module': 'my-custom-test-utility-file', }, -} +}; ``` [You can find more details about the `utils-module` setting here](docs/migration-guides/v4.md#testing-libraryutils-module). @@ -266,13 +266,13 @@ The name of your custom utility file from where you re-export everything from th 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/migration-guides/v4.md#renders). -```json5 -// .eslintrc -{ +```js +// .eslintrc.js +module.exports = { settings: { 'testing-library/custom-renders': ['display', 'renderWithProviders'], }, -} +}; ``` [You can find more details about the `custom-renders` setting here](docs/migration-guides/v4.md#testing-librarycustom-renders). @@ -281,13 +281,13 @@ A list of function names that are valid as Testing Library custom renders, or `" 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/migration-guides/v4.md#queries) -```json5 -// .eslintrc -{ +```js +// .eslintrc.js +module.exports = { settings: { 'testing-library/custom-queries': ['ByIcon', 'getByComplexText'], }, -} +}; ``` [You can find more details about the `custom-queries` setting here](docs/migration-guides/v4.md#testing-librarycustom-queries). @@ -296,15 +296,15 @@ A list of query names/patterns that are valid as Testing Library custom queries, 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: -```json5 -// .eslintrc -{ +```js +// .eslintrc.js +module.exports = { settings: { 'testing-library/utils-module': 'off', 'testing-library/custom-renders': 'off', 'testing-library/custom-queries': 'off', }, -} +}; ``` ## Troubleshooting diff --git a/docs/migration-guides/v4.md b/docs/migration-guides/v4.md index 69c4de6b..d0966a88 100644 --- a/docs/migration-guides/v4.md +++ b/docs/migration-guides/v4.md @@ -182,13 +182,13 @@ Relates to the [Aggressive Imports Reporting mechanism](#imports). This setting 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. -```json -// .eslintrc -{ - "settings": { - "testing-library/utils-module": "my-custom-test-utility-file" - } -} +```js +// .eslintrc.js +module.exports = { + settings: { + 'testing-library/utils-module': 'my-custom-test-utility-file', + }, +}; ``` 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: @@ -225,13 +225,13 @@ test('testing-library/utils-module setting example', () => { 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. -```json -// .eslintrc -{ - "settings": { - "testing-library/utils-module": "off" - } -} +```js +// .eslintrc.js +module.exports = { + settings: { + 'testing-library/utils-module': 'off', + }, +}; ``` ### `testing-library/custom-renders` @@ -240,13 +240,13 @@ Relates to the [Aggressive Renders Reporting mechanism](#renders). This setting 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. -```json -// .eslintrc -{ - "settings": { - "testing-library/custom-renders": ["display", "renderWithProviders"] - } -} +```js +// .eslintrc.js +module.exports = { + settings: { + 'testing-library/custom-renders': ['display', 'renderWithProviders'], + }, +}; ``` 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: @@ -288,13 +288,13 @@ test('testing-library/custom-renders setting example', () => { 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. -```json -// .eslintrc -{ - "settings": { - "testing-library/custom-renders": "off" - } -} +```js +// .eslintrc.js +module.exports = { + settings: { + 'testing-library/custom-renders': 'off', + }, +}; ``` ### `testing-library/custom-queries` @@ -308,13 +308,13 @@ Each string passed to this list of custom queries can be: - **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()`. - **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()`. -```json -// .eslintrc -{ - "settings": { - "testing-library/custom-queries": ["ByIcon", "getByComplexText"] - } -} +```js +// .eslintrc.js +module.exports = { + settings: { + 'testing-library/custom-queries': ['ByIcon', 'getByComplexText'], + }, +}; ``` 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: @@ -344,11 +344,11 @@ findBySomethingElse('foo'); You can also set this setting to `"off"` to entirely opt-out Aggressive Queries Reporting mechanism, so only built-in queries are reported. -```json -// .eslintrc -{ - "settings": { - "testing-library/custom-queries": "off" - } -} +```js +// .eslintrc.js +module.exports = { + settings: { + 'testing-library/custom-queries': 'off', + }, +}; ``` diff --git a/docs/rules/consistent-data-testid.md b/docs/rules/consistent-data-testid.md index fb7f9940..bcefc54e 100644 --- a/docs/rules/consistent-data-testid.md +++ b/docs/rules/consistent-data-testid.md @@ -38,37 +38,37 @@ const baz = (props) =>
...
; ## Example -```json -{ - "testing-library/consistent-data-testid": [ - 2, - { - "testIdPattern": "^TestId(__[A-Z]*)?$" - } - ] -} +```js +module.exports = { + rules: { + 'testing-library/consistent-data-testid': [ + 'error', + { testIdPattern: '^TestId(__[A-Z]*)?$' }, + ], + }, +}; ``` -```json -{ - "testing-library/consistent-data-testid": [ - 2, - { - "testIdAttribute": ["data-testid", "testId"] - } - ] -} +```js +module.exports = { + rules: { + 'testing-library/consistent-data-testid': [ + 'error', + { testIdAttribute: ['data-testid', 'testId'] }, + ], + }, +}; ``` -```json -{ - "testing-library/consistent-data-testid": [ - 2, - { - "customMessage": "A custom message" - } - ] -} +```js +module.exports = { + rules: { + 'testing-library/consistent-data-testid': [ + 'error', + { customMessage: 'A custom message' }, + ], + }, +}; ``` ## Notes diff --git a/docs/rules/no-await-sync-events.md b/docs/rules/no-await-sync-events.md index a8e900b6..9d5dfedd 100644 --- a/docs/rules/no-await-sync-events.md +++ b/docs/rules/no-await-sync-events.md @@ -93,15 +93,15 @@ This option gives you more granular control of which event modules you want to r Example: -```json -{ - "testing-library/no-await-sync-events": [ - "error", - { - "eventModules": ["fire-event", "user-event"] - } - ] -} +```js +module.exports = { + rules: { + 'testing-library/no-await-sync-events': [ + 'error', + { eventModules: ['fire-event', 'user-event'] }, + ], + }, +}; ``` ## Notes diff --git a/docs/rules/no-debugging-utils.md b/docs/rules/no-debugging-utils.md index 288ee508..6f244a45 100644 --- a/docs/rules/no-debugging-utils.md +++ b/docs/rules/no-debugging-utils.md @@ -45,19 +45,21 @@ screen.debug(); You can control which debugging utils are checked for with the `utilsToCheckFor` option: -```json -{ - "testing-library/no-debugging-utils": [ - "error", - { - "utilsToCheckFor": { - "debug": false, - "logRoles": true, - "logDOM": true - } - } - ] -} +```js +module.exports = { + rules: { + 'testing-library/no-debugging-utils': [ + 'error', + { + utilsToCheckFor: { + debug: false, + logRoles: true, + logDOM: true, + }, + }, + ], + }, +}; ``` ## Further Reading diff --git a/docs/rules/no-dom-import.md b/docs/rules/no-dom-import.md index 93ae97d0..f21966a2 100644 --- a/docs/rules/no-dom-import.md +++ b/docs/rules/no-dom-import.md @@ -74,10 +74,12 @@ This rule has an option in case you want to tell the user which framework to use ### Example -```json -{ - "testing-library/no-dom-import": ["error", "react"] -} +```js +module.exports = { + rules: { + 'testing-library/no-dom-import': ['error', 'react'], + }, +}; ``` With the configuration above, if the user imports from `@testing-library/dom` or `dom-testing-library` instead of the used framework, ESLint will tell the user to import from `@testing-library/react` or `react-testing-library`. diff --git a/docs/rules/prefer-presence-queries.md b/docs/rules/prefer-presence-queries.md index ecd100a2..af1df93c 100644 --- a/docs/rules/prefer-presence-queries.md +++ b/docs/rules/prefer-presence-queries.md @@ -72,16 +72,15 @@ test('some test', async () => { ## Example -```json -{ - "testing-library/prefer-presence-queries": [ - 2, - { - "presence": true, - "absence": false - } - ] -} +```js +module.exports = { + rules: { + 'testing-library/prefer-presence-queries': [ + 'error', + { absence: false, presence: true }, + ], + }, +}; ``` ## Further Reading diff --git a/docs/rules/prefer-user-event.md b/docs/rules/prefer-user-event.md index 0daecd0b..421a0875 100644 --- a/docs/rules/prefer-user-event.md +++ b/docs/rules/prefer-user-event.md @@ -70,17 +70,14 @@ This rule allows to exclude specific functions with an equivalent in `userEvent` The configuration consists of an array of strings with the names of fireEvents methods to be excluded. An example looks like this -```json -{ - "rules": { - "prefer-user-event": [ - "error", - { - "allowedMethods": ["click", "change"] - } - ] - } -} +```js +module.exports = { + rules: { + rules: { + 'prefer-user-event': ['error', { allowedMethods: ['click', 'change'] }], + }, + }, +}; ``` With this configuration example, the following use cases are considered valid