Skip to content

docs: use JS .eslintrc file #754

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 4, 2023
Merged

docs: use JS .eslintrc file #754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd05ec9
docs: use JS `.eslintrc` file
MichaelDeBoey Apr 12, 2023
6f5cb6e
Merge branch 'main' into use-js-eslintrc-file-in-docs
Belco90 May 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 65 additions & 65 deletions README.md
View file
Open in desktop
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
Open in desktop
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