Skip to content

Commit 34dfde6

Browse files
committed
docs(await-async-utils): rule details
1 parent 2b9122d commit 34dfde6

File tree

1 file changed

+66
-0
lines changed

1 file changed

+66
-0
lines changed

docs/rules/await-async-utils.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Enforce async utils to be awaited properly (await-async-utils)
2+
3+
Ensure that promises returned by async utils are handled properly.
4+
5+
## Rule Details
6+
7+
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:
8+
9+
- `wait`
10+
- `waitForElement`
11+
- `waitForDomChange`
12+
- `waitForElementToBeRemoved`
13+
14+
This rule aims to prevent users from forgetting to handle the returned promise from those async utils, which could lead to unexpected errors in the tests execution. The promises can be handled by using either `await` operator or `then` method.
15+
16+
Examples of **incorrect** code for this rule:
17+
18+
```js
19+
test('something incorrectly', async () => {
20+
// ...
21+
wait(() => getByLabelText('email'));
22+
23+
const [usernameElement, passwordElement] = waitForElement(
24+
() => [
25+
getByLabelText(container, 'username'),
26+
getByLabelText(container, 'password'),
27+
],
28+
{ container }
29+
);
30+
31+
waitForDomChange(() => { return { container } });
32+
33+
waitForElementToBeRemoved(() => document.querySelector('div.getOuttaHere'));
34+
// ...
35+
});
36+
```
37+
38+
Examples of **correct** code for this rule:
39+
40+
```js
41+
test('something correctly', async () => {
42+
// ...
43+
await wait(() => getByLabelText('email'));
44+
45+
const [usernameElement, passwordElement] = await waitForElement(
46+
() => [
47+
getByLabelText(container, 'username'),
48+
getByLabelText(container, 'password'),
49+
],
50+
{ container }
51+
);
52+
53+
waitForDomChange(() => { return { container } })
54+
.then(() => console.log('DOM changed!'))
55+
.catch(err => console.log(`Error you need to deal with: ${err}`));
56+
57+
waitForElementToBeRemoved(
58+
() => document.querySelector('div.getOuttaHere')
59+
).then(() => console.log('Element no longer in DOM'));
60+
// ...
61+
});
62+
```
63+
64+
## Further Reading
65+
66+
- [Async Utilities](https://testing-library.com/docs/dom-testing-library/api-async)

0 commit comments

Comments
 (0)