Skip to content

Commit 8a71e49

Browse files
authored
Merge pull request #500 from tjefferson08/pr/update-waitforelementtoberemoved-docs
Update waitForElementToBeRemoved docs
2 parents 1cdcb24 + 75ded63 commit 8a71e49

File tree

1 file changed

+27
-19
lines changed

1 file changed

+27
-19
lines changed

docs/dom-testing-library/api-async.md

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ function waitFor<T>(
2323
): Promise<T>
2424
```
2525

26-
When in need to wait for any period of time you can use `waitFor`, to wait for your
27-
expectations to pass. Here's a simple example:
26+
When in need to wait for any period of time you can use `waitFor`, to wait for
27+
your expectations to pass. Here's a simple example:
2828

2929
```javascript
3030
// ...
@@ -63,24 +63,24 @@ function waitForElementToBeRemoved<T>(
6363
interval?: number
6464
mutationObserverOptions?: MutationObserverInit
6565
}
66-
): Promise<T>
66+
): Promise<void>
6767
```
6868

6969
To wait for the removal of element(s) from the DOM you can use
7070
`waitForElementToBeRemoved`. The `waitForElementToBeRemoved` function is a small
71-
wrapper around the `wait` utility.
71+
wrapper around the `waitFor` utility.
7272

73-
The first argument must be an element, array of elements, or a callback which returns
74-
an element or array of elements.
73+
The first argument must be an element, array of elements, or a callback which
74+
returns an element or array of elements.
7575

76-
Here is an example where the promise resolves with `true` because the element is
77-
removed:
76+
Here is an example where the promise resolves because the element is removed:
7877

7978
```javascript
8079
const el = document.querySelector('div.getOuttaHere')
8180

82-
waitForElementToBeRemoved(document.querySelector('div.getOuttaHere'))
83-
.then(() => console.log('Element no longer in DOM'))
81+
waitForElementToBeRemoved(document.querySelector('div.getOuttaHere')).then(() =>
82+
console.log('Element no longer in DOM')
83+
)
8484

8585
el.setAttribute('data-neat', true)
8686
// other mutations are ignored...
@@ -94,9 +94,15 @@ or an empty array:
9494

9595
```javascript
9696
waitForElementToBeRemoved(null).catch(err => console.log(err))
97-
waitForElementToBeRemoved(queryByText(/not here/i)).catch(err => console.log(err))
98-
waitForElementToBeRemoved(queryAllByText(/not here/i)).catch(err => console.log(err))
99-
waitForElementToBeRemoved(() => getByText(/not here/i)).catch(err => console.log(err))
97+
waitForElementToBeRemoved(queryByText(/not here/i)).catch(err =>
98+
console.log(err)
99+
)
100+
waitForElementToBeRemoved(queryAllByText(/not here/i)).catch(err =>
101+
console.log(err)
102+
)
103+
waitForElementToBeRemoved(() => getByText(/not here/i)).catch(err =>
104+
console.log(err)
105+
)
100106

101107
// Error: The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal.
102108
```
@@ -116,9 +122,14 @@ function wait<T>(
116122
}
117123
): Promise<T>
118124
```
119-
Previously, wait was a wrapper around wait-for-expect and used polling instead of a MutationObserver to look for changes. It is now an alias to waitFor and will be removed in a future release.
120125

121-
Unlike wait, the callback parameter is mandatory in waitFor. Although you can migrate an existing `wait()` call to `waitFor( () => {} )`, it is considered bad practice to use an empty callback because it will make the tests more fragile.
126+
Previously, wait was a wrapper around wait-for-expect and used polling instead
127+
of a MutationObserver to look for changes. It is now an alias to waitFor and
128+
will be removed in a future release.
129+
130+
Unlike wait, the callback parameter is mandatory in waitFor. Although you can
131+
migrate an existing `wait()` call to `waitFor( () => {} )`, it is considered bad
132+
practice to use an empty callback because it will make the tests more fragile.
122133

123134
## `waitForDomChange` (DEPRECATED, use waitFor instead)
124135

@@ -158,9 +169,7 @@ container.setAttribute('data-cool', 'true')
158169
waitForDomChange({ container }).then(mutationsList => {
159170
const mutation = mutationsList[0]
160171
console.log(
161-
`was cool: ${mutation.oldValue}\ncurrently cool: ${
162-
mutation.target.dataset.cool
163-
}`
172+
`was cool: ${mutation.oldValue}\ncurrently cool: ${mutation.target.dataset.cool}`
164173
)
165174
})
166175
container.setAttribute('data-cool', 'false')
@@ -183,7 +192,6 @@ will detect additions and removals of child elements (including text nodes) in
183192
the `container` and any of its descendants. It will also detect attribute
184193
changes.
185194

186-
187195
## `waitForElement` (DEPRECATED, use `find*` queries or `waitFor`)
188196

189197
```typescript

0 commit comments

Comments
 (0)