|
1 |
| -# Enforce async queries to have proper `await` (await-async-query) |
| 1 | +# Enforce promises from async queries to be handled (await-async-query) |
2 | 2 |
|
3 | 3 | Ensure that promises returned by async queries are handled properly.
|
4 | 4 |
|
5 | 5 | ## Rule Details
|
6 | 6 |
|
7 |
| -Some of the queries variants that Testing Library provides are |
| 7 | +Some queries variants that Testing Library provides are |
8 | 8 | asynchronous as they return a promise which resolves when elements are
|
9 | 9 | found. Those queries variants are:
|
10 | 10 |
|
11 | 11 | - `findBy*`
|
12 | 12 | - `findAllBy*`
|
13 | 13 |
|
14 |
| -This rule aims to prevent users from forgetting to await the returned |
| 14 | +This rule aims to prevent users from forgetting to handle the returned |
15 | 15 | promise from those async queries to be fulfilled, which could lead to
|
16 |
| -errors in the tests. The promises can be handled by using either `await` |
17 |
| -operator or `then` method. |
| 16 | +errors in the tests. The promise will be considered as handled when: |
| 17 | + |
| 18 | +- using the `await` operator |
| 19 | +- chaining the `then` method |
| 20 | +- chaining `resolves` or `rejects` from jest |
| 21 | +- it's returned from a function (in this case, that particular function will be analyzed by this rule too) |
18 | 22 |
|
19 | 23 | Examples of **incorrect** code for this rule:
|
20 | 24 |
|
21 | 25 | ```js
|
22 |
| -const foo = () => { |
23 |
| - // ... |
24 |
| - const rows = findAllByRole('row'); |
25 |
| - // ... |
26 |
| -}; |
27 |
| - |
28 |
| -const bar = () => { |
29 |
| - // ... |
30 |
| - findByText('submit'); |
31 |
| - // ... |
32 |
| -}; |
33 |
| - |
34 |
| -const baz = () => { |
35 |
| - // ... |
36 |
| - screen.findAllByPlaceholderText('name'); |
37 |
| - // ... |
38 |
| -}; |
| 26 | +// async query without handling promise |
| 27 | +const rows = findAllByRole('row'); |
| 28 | + |
| 29 | +findByIcon('search'); |
| 30 | + |
| 31 | +screen.findAllByPlaceholderText('name'); |
| 32 | +``` |
| 33 | + |
| 34 | +```js |
| 35 | +// promise from async query returned within wrapper function without being handled |
| 36 | +const findMyButton = () => findByText('my button'); |
| 37 | + |
| 38 | +const someButton = findMyButton(); // promise unhandled here |
39 | 39 | ```
|
40 | 40 |
|
41 | 41 | Examples of **correct** code for this rule:
|
42 | 42 |
|
43 | 43 | ```js
|
44 | 44 | // `await` operator is correct
|
45 |
| -const foo = async () => { |
46 |
| - // ... |
47 |
| - const rows = await findAllByRole('row'); |
48 |
| - // ... |
49 |
| -}; |
| 45 | +const rows = await findAllByRole('row'); |
| 46 | + |
| 47 | +await screen.findAllByPlaceholderText('name'); |
| 48 | + |
| 49 | +const promise = findByIcon('search'); |
| 50 | +const element = await promise; |
| 51 | +``` |
50 | 52 |
|
| 53 | +```js |
51 | 54 | // `then` method is correct
|
52 |
| -const bar = () => { |
53 |
| - // ... |
54 |
| - findByText('submit').then(() => { |
55 |
| - // ... |
56 |
| - }); |
57 |
| -}; |
58 |
| - |
59 |
| -const baz = () => { |
60 |
| - // ... |
61 |
| - await screen.findAllByPlaceholderText('name'); |
62 |
| - // ... |
63 |
| -}; |
| 55 | +findByText('submit').then(() => {}); |
64 | 56 |
|
| 57 | +const promise = findByRole('button'); |
| 58 | +promise.then(() => {}); |
| 59 | +``` |
| 60 | + |
| 61 | +```js |
65 | 62 | // return the promise within a function is correct too!
|
66 | 63 | const findMyButton = () => findByText('my button');
|
| 64 | +``` |
| 65 | + |
| 66 | +```js |
| 67 | +// promise from async query returned within wrapper function being handled |
| 68 | +const findMyButton = () => findByText('my button'); |
67 | 69 |
|
| 70 | +const someButton = await findMyButton(); |
| 71 | +``` |
| 72 | + |
| 73 | +```js |
68 | 74 | // using a resolves/rejects matcher is also correct
|
69 | 75 | expect(findByTestId('alert')).resolves.toBe('Success');
|
70 | 76 | expect(findByTestId('alert')).rejects.toBe('Error');
|
71 | 77 | ```
|
72 | 78 |
|
| 79 | +```js |
| 80 | +// sync queries don't need to handle any promise |
| 81 | +const element = getByRole('role'); |
| 82 | +``` |
| 83 | + |
73 | 84 | ## Further Reading
|
74 | 85 |
|
75 | 86 | - [Async queries variants](https://testing-library.com/docs/dom-testing-library/api-queries#findby)
|
|
0 commit comments