Skip to content

Move rules settings to ESLint shared config: refactor await-async-utils #263

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.

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 15 commits into from
Dec 6, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
docs: minor improvements
  • Loading branch information
Belco90 committed Dec 3, 2020
commit 79f9fc43e5f10d4381bc370101bb98802d0a8deb
5 changes: 3 additions & 2 deletions docs/rules/await-async-query.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ found. Those queries variants are:
- `findAllBy*`

This rule aims to prevent users from forgetting to handle the returned
promise from those async queries to be fulfilled, which could lead to
errors in the tests. The promise will be considered as handled when:
promise from those async queries, which could lead to
problems in the tests. The promise will be considered as handled when:

- using the `await` operator
- wrapped within `Promise.all` or `Promise.allSettled` methods
- chaining the `then` method
- chaining `resolves` or `rejects` from jest
- it's returned from a function (in this case, that particular function will be analyzed by this rule too)
Expand Down
38 changes: 29 additions & 9 deletions docs/rules/await-async-utils.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,26 @@
# Enforce async utils to be awaited properly (await-async-utils)
# Enforce promises from async utils to be handled (await-async-utils)

Ensure that promises returned by async utils are handled properly.

## Rule Details

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:

- `waitFor` _(introduced in dom-testing-library v7)_
- `waitFor` _(introduced since dom-testing-library v7)_
- `waitForElementToBeRemoved`
- `wait` _(**deprecated** in dom-testing-library v7)_
- `waitForElement` _(**deprecated** in dom-testing-library v7)_
- `waitForDomChange` _(**deprecated** in dom-testing-library v7)_
- `wait` _(**deprecated** since dom-testing-library v7)_
- `waitForElement` _(**deprecated** since dom-testing-library v7)_
- `waitForDomChange` _(**deprecated** since dom-testing-library v7)_

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.
This rule aims to prevent users from forgetting to handle the returned
promise from async utils, which could lead to
problems in the tests. The promise will be considered as handled when:

- using the `await` operator
- wrapped within `Promise.all` or `Promise.allSettled` methods
- chaining the `then` method
- chaining `resolves` or `rejects` from jest
- it's returned from a function (in this case, that particular function will be analyzed by this rule too)

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

Expand All @@ -32,6 +40,14 @@ test('something incorrectly', async () => {
waitFor(() => {}, { timeout: 100 });

waitForElementToBeRemoved(() => document.querySelector('div.getOuttaHere'));

// wrap an async util within a function...
const makeCustomWait = () => {
return waitForElementToBeRemoved(() =>
document.querySelector('div.getOuttaHere')
);
};
makeCustomWait(); // ...but not handling promise from it is incorrect
});
```

Expand All @@ -56,9 +72,13 @@ test('something correctly', async () => {
.then(() => console.log('DOM changed!'))
.catch((err) => console.log(`Error you need to deal with: ${err}`));

// return the promise within a function is correct too!
const makeCustomWait = () =>
waitForElementToBeRemoved(() => document.querySelector('div.getOuttaHere'));
// wrap an async util within a function...
const makeCustomWait = () => {
return waitForElementToBeRemoved(() =>
document.querySelector('div.getOuttaHere')
);
};
await makeCustomWait(); // ...and handling promise from it is correct

// using Promise.all combining the methods
await Promise.all([
Expand Down