Skip to content

Commit

Permalink
docs: use JS .eslintrc file (#754)
Browse files Browse the repository at this point in the history 
Co-authored-by: Mario Beltrán <belco90@gmail.com>
  • Loading branch information
@MichaelDeBoey @Belco90
MichaelDeBoey and Belco90 committed May 4, 2023
1 parent f2ab1e0 commit 3f2f4f8
Show file tree
Hide file tree
Showing 8 changed files with 181 additions and 181 deletions.
130 changes: 65 additions & 65 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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'],

Expand All @@ -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
Expand All @@ -115,83 +115,83 @@ 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

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

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

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

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

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
Expand Down Expand Up @@ -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).
Expand All @@ -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).
Expand All @@ -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).
Expand All @@ -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
Expand Down
84 changes: 42 additions & 42 deletions docs/migration-guides/v4.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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`
Expand All @@ -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:
Expand Down Expand Up @@ -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`
Expand All @@ -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:
Expand Down Expand Up @@ -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',
},
};
```
Loading

0 comments on commit 3f2f4f8

Please sign in to comment.