Skip to content

Commit 4e4660e

Browse files
authored
docs: Update async-suspense.md (#2034)
* Update async-suspense.md Without flushPromises() after mounting an async component, the wrapper will be empty. * Update async-suspense.md
1 parent 5bcf304 commit 4e4660e

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

docs/guide/advanced/async-suspense.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,21 +129,23 @@ const Async = defineComponent({
129129
must be tested as follow:
130130

131131
```js
132-
test('Async component', () => {
132+
test('Async component', async () => {
133133
const TestComponent = defineComponent({
134134
components: { Async },
135135
template: '<Suspense><Async/></Suspense>'
136136
})
137137

138138
const wrapper = mount(TestComponent)
139+
await flushPromises();
139140
// ...
140141
})
141142
```
143+
Note: To access your `Async` components' underlying `vm` instance, use the return value of `wrapper.findComponent(Async)`. Since a new component is defined and mounted in this scenario, the wrapper returned by `mount(TestComponent)` contains its' own (empty) `vm`.
142144

143145
## Conclusion
144146

145147
- Vue updates the DOM asynchronously; tests runner executes code synchronously instead.
146148
- Use `await nextTick()` to ensure the DOM has updated before the test continues.
147149
- Functions that might update the DOM (like `trigger` and `setValue`) return `nextTick`, so you need to `await` them.
148150
- Use `flushPromises` from Vue Test Utils to resolve any unresolved promises from non-Vue dependencies (such as API requests).
149-
- Use `Suspense` to test components with an asynchronous `setup`.
151+
- Use `Suspense` to test components with an asynchronous `setup` in an asynchronous test function.

0 commit comments

Comments
 (0)