Skip to content

Commit 3f2f4f8

Browse files
MichaelDeBoeyBelco90
MichaelDeBoey
and
Belco90
authored
docs: use JS .eslintrc file (#754)
Co-authored-by: Mario Beltrán <[email protected]>
1 parent f2ab1e0 commit 3f2f4f8

8 files changed

+181
-181
lines changed

‎README.md

+65-65
Original file line numberDiff line numberDiff line change
@@ -54,25 +54,25 @@ You can find detailed guides for migrating `eslint-plugin-testing-library` in th
5454

5555
## Usage
5656

57-
Add `testing-library` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
57+
Add `testing-library` to the plugins section of your `.eslintrc.js` configuration file. You can omit the `eslint-plugin-` prefix:
5858

59-
```json
60-
{
61-
"plugins": ["testing-library"]
62-
}
59+
```js
60+
module.exports = {
61+
plugins: ['testing-library'],
62+
};
6363
```
6464

6565
Then configure the rules you want to use within `rules` property of your `.eslintrc`:
6666

67-
```json
68-
{
69-
"rules": {
70-
"testing-library/await-async-query": "error",
71-
"testing-library/no-await-sync-query": "error",
72-
"testing-library/no-debugging-utils": "warn",
73-
"testing-library/no-dom-import": "off"
74-
}
75-
}
67+
```js
68+
module.exports = {
69+
rules: {
70+
'testing-library/await-async-query': 'error',
71+
'testing-library/no-await-sync-query': 'error',
72+
'testing-library/no-debugging-utils': 'warn',
73+
'testing-library/no-dom-import': 'off',
74+
},
75+
};
7676
```
7777

7878
### 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
8585

8686
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:
8787

88-
```json5
89-
// .eslintrc
90-
{
88+
```js
89+
// .eslintrc.js
90+
module.exports = {
9191
// 1) Here we have our usual config which applies to the whole project, so we don't put testing-library preset here.
9292
extends: ['airbnb', 'plugin:prettier/recommended'],
9393

@@ -101,7 +101,7 @@ Assuming you are using the same pattern for your test files as [Jest by default]
101101
extends: ['plugin:testing-library/react'],
102102
},
103103
],
104-
}
104+
};
105105
```
106106

107107
#### ESLint Cascading and Hierarchy
@@ -115,83 +115,83 @@ You can find more info about enabled rules in the [Supported Rules section](#sup
115115

116116
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:
117117

118-
```json5
118+
```js
119119
// ❌ Don't do this
120-
{
120+
module.exports = {
121121
extends: ['plugin:testing-library/dom', 'plugin:testing-library/react'],
122-
}
122+
};
123123
```
124124

125-
```json5
125+
```js
126126
// ✅ Just do this instead
127-
{
127+
module.exports = {
128128
extends: ['plugin:testing-library/react'],
129-
}
129+
};
130130
```
131131

132132
### DOM Testing Library
133133

134134
Enforces recommended rules for DOM Testing Library.
135135

136136
To enable this configuration use the `extends` property in your
137-
`.eslintrc` config file:
137+
`.eslintrc.js` config file:
138138

139-
```json
140-
{
141-
"extends": ["plugin:testing-library/dom"]
142-
}
139+
```js
140+
module.exports = {
141+
extends: ['plugin:testing-library/dom'],
142+
};
143143
```
144144

145145
### Angular
146146

147147
Enforces recommended rules for Angular Testing Library.
148148

149149
To enable this configuration use the `extends` property in your
150-
`.eslintrc` config file:
150+
`.eslintrc.js` config file:
151151

152-
```json
153-
{
154-
"extends": ["plugin:testing-library/angular"]
155-
}
152+
```js
153+
module.exports = {
154+
extends: ['plugin:testing-library/angular'],
155+
};
156156
```
157157

158158
### React
159159

160160
Enforces recommended rules for React Testing Library.
161161

162162
To enable this configuration use the `extends` property in your
163-
`.eslintrc` config file:
163+
`.eslintrc.js` config file:
164164

165-
```json
166-
{
167-
"extends": ["plugin:testing-library/react"]
168-
}
165+
```js
166+
module.exports = {
167+
extends: ['plugin:testing-library/react'],
168+
};
169169
```
170170

171171
### Vue
172172

173173
Enforces recommended rules for Vue Testing Library.
174174

175175
To enable this configuration use the `extends` property in your
176-
`.eslintrc` config file:
176+
`.eslintrc.js` config file:
177177

178-
```json
179-
{
180-
"extends": ["plugin:testing-library/vue"]
181-
}
178+
```js
179+
module.exports = {
180+
extends: ['plugin:testing-library/vue'],
181+
};
182182
```
183183

184184
### Marko
185185

186186
Enforces recommended rules for Marko Testing Library.
187187

188188
To enable this configuration use the `extends` property in your
189-
`.eslintrc` config file:
189+
`.eslintrc.js` config file:
190190

191-
```json
192-
{
193-
"extends": ["plugin:testing-library/marko"]
194-
}
191+
```js
192+
module.exports = {
193+
extends: ['plugin:testing-library/marko'],
194+
};
195195
```
196196

197197
## Supported Rules
@@ -251,13 +251,13 @@ If you are sure about configuring the settings, these are the options available:
251251

252252
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).
253253

254-
```json5
255-
// .eslintrc
256-
{
254+
```js
255+
// .eslintrc.js
256+
module.exports = {
257257
settings: {
258258
'testing-library/utils-module': 'my-custom-test-utility-file',
259259
},
260-
}
260+
};
261261
```
262262

263263
[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
266266

267267
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).
268268

269-
```json5
270-
// .eslintrc
271-
{
269+
```js
270+
// .eslintrc.js
271+
module.exports = {
272272
settings: {
273273
'testing-library/custom-renders': ['display', 'renderWithProviders'],
274274
},
275-
}
275+
};
276276
```
277277

278278
[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 `"
281281

282282
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)
283283

284-
```json5
285-
// .eslintrc
286-
{
284+
```js
285+
// .eslintrc.js
286+
module.exports = {
287287
settings: {
288288
'testing-library/custom-queries': ['ByIcon', 'getByComplexText'],
289289
},
290-
}
290+
};
291291
```
292292

293293
[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,
296296

297297
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:
298298

299-
```json5
300-
// .eslintrc
301-
{
299+
```js
300+
// .eslintrc.js
301+
module.exports = {
302302
settings: {
303303
'testing-library/utils-module': 'off',
304304
'testing-library/custom-renders': 'off',
305305
'testing-library/custom-queries': 'off',
306306
},
307-
}
307+
};
308308
```
309309

310310
## Troubleshooting

‎docs/migration-guides/v4.md

+42-42
Original file line numberDiff line numberDiff line change
@@ -182,13 +182,13 @@ Relates to the [Aggressive Imports Reporting mechanism](#imports). This setting
182182

183183
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.
184184

185-
```json
186-
// .eslintrc
187-
{
188-
"settings": {
189-
"testing-library/utils-module": "my-custom-test-utility-file"
190-
}
191-
}
185+
```js
186+
// .eslintrc.js
187+
module.exports = {
188+
settings: {
189+
'testing-library/utils-module': 'my-custom-test-utility-file',
190+
},
191+
};
192192
```
193193

194194
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', () => {
225225

226226
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.
227227

228-
```json
229-
// .eslintrc
230-
{
231-
"settings": {
232-
"testing-library/utils-module": "off"
233-
}
234-
}
228+
```js
229+
// .eslintrc.js
230+
module.exports = {
231+
settings: {
232+
'testing-library/utils-module': 'off',
233+
},
234+
};
235235
```
236236

237237
### `testing-library/custom-renders`
@@ -240,13 +240,13 @@ Relates to the [Aggressive Renders Reporting mechanism](#renders). This setting
240240

241241
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.
242242

243-
```json
244-
// .eslintrc
245-
{
246-
"settings": {
247-
"testing-library/custom-renders": ["display", "renderWithProviders"]
248-
}
249-
}
243+
```js
244+
// .eslintrc.js
245+
module.exports = {
246+
settings: {
247+
'testing-library/custom-renders': ['display', 'renderWithProviders'],
248+
},
249+
};
250250
```
251251

252252
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', () => {
288288

289289
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.
290290

291-
```json
292-
// .eslintrc
293-
{
294-
"settings": {
295-
"testing-library/custom-renders": "off"
296-
}
297-
}
291+
```js
292+
// .eslintrc.js
293+
module.exports = {
294+
settings: {
295+
'testing-library/custom-renders': 'off',
296+
},
297+
};
298298
```
299299

300300
### `testing-library/custom-queries`
@@ -308,13 +308,13 @@ Each string passed to this list of custom queries can be:
308308
- **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()`.
309309
- **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()`.
310310

311-
```json
312-
// .eslintrc
313-
{
314-
"settings": {
315-
"testing-library/custom-queries": ["ByIcon", "getByComplexText"]
316-
}
317-
}
311+
```js
312+
// .eslintrc.js
313+
module.exports = {
314+
settings: {
315+
'testing-library/custom-queries': ['ByIcon', 'getByComplexText'],
316+
},
317+
};
318318
```
319319

320320
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');
344344

345345
You can also set this setting to `"off"` to entirely opt-out Aggressive Queries Reporting mechanism, so only built-in queries are reported.
346346

347-
```json
348-
// .eslintrc
349-
{
350-
"settings": {
351-
"testing-library/custom-queries": "off"
352-
}
353-
}
347+
```js
348+
// .eslintrc.js
349+
module.exports = {
350+
settings: {
351+
'testing-library/custom-queries': 'off',
352+
},
353+
};
354354
```

0 commit comments

Comments
 (0)