Skip to content

Commit ff4d3ef

Browse files
Belco90Belco90
authored
Merge branch 'main' into ci-workflow-improvements
2 parents 4f44dad + b006e61 commit ff4d3ef

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1638
-3752
lines changed

‎.github/ISSUE_TEMPLATE/propose_new_rule.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ body:
77
attributes:
88
label: Name for new rule
99
description: Suggest a name for the new rule that follows the [rule naming conventions](https://github.com/testing-library/eslint-plugin-testing-library/blob/main/CONTRIBUTING.md#rule-naming-conventions).
10-
placeholder: prefer-wait-for
10+
placeholder: prefer-find-by
1111
validations:
1212
required: true
1313

‎.github/workflows/pipeline.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,5 +105,5 @@ jobs:
105105
- name: Release the new version to NPM
106106
env:
107107
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
108-
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
108+
NPM_TOKEN: ${{ secrets.NPM_AUTOMATION_TOKEN }}
109109
run: npx semantic-release

‎README.md

Lines changed: 35 additions & 34 deletions
Large diffs are not rendered by default.

‎docs/migration-guides/v6.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Guide: migrating to v6
2+
3+
If you are not on v5 yet, we recommend first following the [v5 migration guide](docs/migration-guides/v5.md).
4+
5+
## Overview
6+
7+
- `prefer-wait-for` was removed
8+
- `no-wait-for-empty-callback` was removed
9+
- `await-fire-event` is now called `await-async-events` with support for an `eventModule` option with `userEvent` and/or `fireEvent`
10+
- `await-async-events` is now enabled by default for `fireEvent` in Vue and Marko shared configs
11+
- `await-async-events` is now enabled by default for `userEvent` in all shared configs
12+
- `await-async-query` is now called `await-async-queries`
13+
- `no-await-async-query` is now called `no-await-async-queries`
14+
- `no-render-in-setup` is now called `no-render-in-lifecycle`
15+
- `no-await-sync-events` is now enabled by default in React, Angular, and DOM shared configs
16+
- `no-manual-cleanup` is now enabled by default in React and Vue shared configs
17+
- `no-global-regexp-flag-in-query` is now enabled by default in all shared configs
18+
- `no-node-access` is now enabled by default in DOM shared config
19+
- `no-debugging-utils` now reports all debugging utility methods by default
20+
- `no-debugging-utils` now defaults to `warn` instead of `error` in all shared configs
21+
22+
## Steps to upgrade
23+
24+
- Removing `testing-library/prefer-wait-for` if you were referencing it manually somewhere
25+
- Removing `testing-library/no-wait-for-empty-callback` if you were referencing it manually somewhere
26+
- Renaming `testing-library/await-fire-event` to `testing-library/await-async-events` if you were referencing it manually somewhere
27+
- Renaming `testing-library/await-async-query` to `testing-library/await-async-queries` if you were referencing it manually somewhere
28+
- Renaming `testing-library/no-await-async-query` to `testing-library/no-await-async-queries` if you were referencing it manually somewhere
29+
- Renaming `testing-library/no-render-in-setup` to `testing-library/no-render-in-lifecycle` if you were referencing it manually somewhere
30+
- Being aware of new rules enabled or changed above in shared configs which can lead to newly reported errors

‎docs/rules/await-async-events.md

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# Enforce promises from async event methods are handled (`testing-library/await-async-events`)
2+
3+
💼 This rule is enabled in the following configs: `angular`, `dom`, `marko`, `react`, `vue`.
4+
5+
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
6+
7+
<!-- end auto-generated rule header -->
8+
9+
Ensure that promises returned by `userEvent` (v14+) async methods or `fireEvent` (only Vue and Marko) async methods are handled properly.
10+
11+
## Rule Details
12+
13+
This rule aims to prevent users from forgetting to handle promise returned from async event
14+
methods.
15+
16+
> ⚠️ `fireEvent` methods are async only on following Testing Library packages:
17+
>
18+
> - `@testing-library/vue` (supported by this plugin)
19+
> - `@testing-library/svelte` (not supported yet by this plugin)
20+
> - `@marko/testing-library` (supported by this plugin)
21+
22+
Examples of **incorrect** code for this rule:
23+
24+
```js
25+
fireEvent.click(getByText('Click me'));
26+
27+
fireEvent.focus(getByLabelText('username'));
28+
fireEvent.blur(getByLabelText('username'));
29+
30+
// wrap a fireEvent method within a function...
31+
function triggerEvent() {
32+
return fireEvent.click(button);
33+
}
34+
triggerEvent(); // ...but not handling promise from it is incorrect too
35+
```
36+
37+
```js
38+
userEvent.click(getByText('Click me'));
39+
userEvent.tripleClick(getByText('Click me'));
40+
userEvent.keyboard('foo');
41+
42+
// wrap a userEvent method within a function...
43+
function triggerEvent() {
44+
return userEvent.click(button);
45+
}
46+
triggerEvent(); // ...but not handling promise from it is incorrect too
47+
```
48+
49+
Examples of **correct** code for this rule:
50+
51+
```js
52+
// `await` operator is correct
53+
await fireEvent.focus(getByLabelText('username'));
54+
await fireEvent.blur(getByLabelText('username'));
55+
56+
// `then` method is correct
57+
fireEvent.click(getByText('Click me')).then(() => {
58+
// ...
59+
});
60+
61+
// return the promise within a function is correct too!
62+
const clickMeArrowFn = () => fireEvent.click(getByText('Click me'));
63+
64+
// wrap a fireEvent method within a function...
65+
function triggerEvent() {
66+
return fireEvent.click(button);
67+
}
68+
await triggerEvent(); // ...and handling promise from it is correct also
69+
70+
// using `Promise.all` or `Promise.allSettled` with an array of promises is valid
71+
await Promise.all([
72+
fireEvent.focus(getByLabelText('username')),
73+
fireEvent.blur(getByLabelText('username')),
74+
]);
75+
```
76+
77+
```js
78+
// `await` operator is correct
79+
await userEvent.click(getByText('Click me'));
80+
await userEvent.tripleClick(getByText('Click me'));
81+
82+
// `then` method is correct
83+
userEvent.keyboard('foo').then(() => {
84+
// ...
85+
});
86+
87+
// return the promise within a function is correct too!
88+
const clickMeArrowFn = () => userEvent.click(getByText('Click me'));
89+
90+
// wrap a userEvent method within a function...
91+
function triggerEvent() {
92+
return userEvent.click(button);
93+
}
94+
await triggerEvent(); // ...and handling promise from it is correct also
95+
96+
// using `Promise.all` or `Promise.allSettled` with an array of promises is valid
97+
await Promise.all([
98+
userEvent.click(getByText('Click me'));
99+
userEvent.tripleClick(getByText('Click me'));
100+
]);
101+
```
102+
103+
## Options
104+
105+
- `eventModule`: `string` or `string[]`. Which event module should be linted for async event methods. Defaults to `userEvent` which should be used after v14. `fireEvent` should only be used with frameworks that have async fire event methods.
106+
107+
## Example
108+
109+
```json
110+
{
111+
"testing-library/await-async-events": [
112+
2,
113+
{
114+
"eventModule": "userEvent"
115+
}
116+
]
117+
}
118+
```
119+
120+
```json
121+
{
122+
"testing-library/await-async-events": [
123+
2,
124+
{
125+
"eventModule": "fireEvent"
126+
}
127+
]
128+
}
129+
```
130+
131+
```json
132+
{
133+
"testing-library/await-async-events": [
134+
2,
135+
{
136+
"eventModule": ["fireEvent", "userEvent"]
137+
}
138+
]
139+
}
140+
```
141+
142+
## When Not To Use It
143+
144+
- `userEvent` is below v14, before all event methods are async
145+
- `fireEvent` methods are sync for most Testing Library packages. If you are not using Testing Library package with async events, you shouldn't use this rule.
146+
147+
## Further Reading
148+
149+
- [Vue Testing Library fireEvent](https://testing-library.com/docs/vue-testing-library/api#fireevent)

‎docs/rules/await-async-query.md renamed to ‎docs/rules/await-async-queries.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Enforce promises from async queries to be handled (`testing-library/await-async-query`)
1+
# Enforce promises from async queries to be handled (`testing-library/await-async-queries`)
22

33
💼 This rule is enabled in the following configs: `angular`, `dom`, `marko`, `react`, `vue`.
44

‎docs/rules/await-async-utils.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,8 @@ Ensure that promises returned by async utils are handled properly.
1010

1111
Testing library provides several utilities for dealing with asynchronous code. These are useful to wait for an element until certain criteria or situation happens. The available async utils are:
1212

13-
- `waitFor` _(introduced since dom-testing-library v7)_
13+
- `waitFor`
1414
- `waitForElementToBeRemoved`
15-
- `wait` _(**deprecated** since dom-testing-library v7)_
16-
- `waitForElement` _(**deprecated** since dom-testing-library v7)_
17-
- `waitForDomChange` _(**deprecated** since dom-testing-library v7)_
1815

1916
This rule aims to prevent users from forgetting to handle the returned
2017
promise from async utils, which could lead to

‎docs/rules/await-fire-event.md

Lines changed: 0 additions & 84 deletions
This file was deleted.

‎docs/rules/no-await-sync-events.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Disallow unnecessary `await` for sync events (`testing-library/no-await-sync-events`)
22

3+
💼 This rule is enabled in the following configs: `angular`, `dom`, `react`.
4+
35
<!-- end auto-generated rule header -->
46

57
Ensure that sync simulated events are not awaited unnecessarily.
@@ -107,5 +109,4 @@ module.exports = {
107109
## Notes
108110

109111
- Since `user-event` v14 all its methods are async, so you should disable reporting them by setting the `eventModules` to just `"fire-event"` so `user-event` methods are not reported.
110-
- There is another rule `await-fire-event`, which is only in Vue Testing
111-
Library. Please do not confuse with this rule.
112+
- There is another rule `await-async-events`, which is for awaiting async events for `user-event` v14 or `fire-event` only in Vue Testing Library. Please do not confuse with this rule.

‎docs/rules/no-await-sync-query.md renamed to ‎docs/rules/no-await-sync-queries.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Disallow unnecessary `await` for sync queries (`testing-library/no-await-sync-query`)
1+
# Disallow unnecessary `await` for sync queries (`testing-library/no-await-sync-queries`)
22

33
💼 This rule is enabled in the following configs: `angular`, `dom`, `marko`, `react`, `vue`.
44

‎docs/rules/no-debugging-utils.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Disallow the use of debugging utilities like `debug` (`testing-library/no-debugging-utils`)
22

3-
💼 This rule is enabled in the following configs: `angular`, `marko`, `react`, `vue`.
3+
⚠️ This rule _warns_ in the following configs: `angular`, `marko`, `react`, `vue`.
44

55
<!-- end auto-generated rule header -->
66

@@ -17,7 +17,7 @@ This rule supports disallowing the following debugging utilities:
1717
- `logDOM`
1818
- `prettyFormat`
1919

20-
By default, only `debug` and `logTestingPlaygroundURL` are disallowed.
20+
By default, all are disallowed.
2121

2222
Examples of **incorrect** code for this rule:
2323

‎docs/rules/no-global-regexp-flag-in-query.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Disallow the use of the global RegExp flag (/g) in queries (`testing-library/no-global-regexp-flag-in-query`)
22

3+
💼 This rule is enabled in the following configs: `angular`, `dom`, `marko`, `react`, `vue`.
4+
35
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
46

57
<!-- end auto-generated rule header -->

‎docs/rules/no-manual-cleanup.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Disallow the use of `cleanup` (`testing-library/no-manual-cleanup`)
22

3+
💼 This rule is enabled in the following configs: `react`, `vue`.
4+
35
<!-- end auto-generated rule header -->
46

57
`cleanup` is performed automatically if the testing framework you're using supports the `afterEach` global (like mocha, Jest, and Jasmine). In this case, it's unnecessary to do manual cleanups after each test unless you skip the auto-cleanup with environment variables such as `RTL_SKIP_AUTO_CLEANUP` for React.

‎docs/rules/no-node-access.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Disallow direct Node access (`testing-library/no-node-access`)
22

3-
💼 This rule is enabled in the following configs: `angular`, `marko`, `react`, `vue`.
3+
💼 This rule is enabled in the following configs: `angular`, `dom`, `marko`, `react`, `vue`.
44

55
<!-- end auto-generated rule header -->
66

‎docs/rules/no-render-in-setup.md renamed to ‎docs/rules/no-render-in-lifecycle.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Disallow the use of `render` in testing frameworks setup functions (`testing-library/no-render-in-setup`)
1+
# Disallow the use of `render` in testing frameworks setup functions (`testing-library/no-render-in-lifecycle`)
22

33
💼 This rule is enabled in the following configs: `angular`, `marko`, `react`, `vue`.
44

@@ -87,5 +87,5 @@ it('Should have foo and bar', () => {
8787
If you would like to allow the use of `render` (or a custom render function) in _either_ `beforeAll` or `beforeEach`, this can be configured using the option `allowTestingFrameworkSetupHook`. This may be useful if you have configured your tests to [skip auto cleanup](https://testing-library.com/docs/react-testing-library/setup#skipping-auto-cleanup). `allowTestingFrameworkSetupHook` is an enum that accepts either `"beforeAll"` or `"beforeEach"`.
8888

8989
```
90-
"testing-library/no-render-in-setup": ["error", {"allowTestingFrameworkSetupHook": "beforeAll"}],
90+
"testing-library/no-render-in-lifecycle": ["error", {"allowTestingFrameworkSetupHook": "beforeAll"}],
9191
```

0 commit comments

Comments
 (0)