|
| 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