diff --git a/docs/guide/advanced/async-suspense.md b/docs/guide/advanced/async-suspense.md index 6c55ded58..dfda86af7 100644 --- a/docs/guide/advanced/async-suspense.md +++ b/docs/guide/advanced/async-suspense.md @@ -129,16 +129,18 @@ const Async = defineComponent({ must be tested as follow: ```js -test('Async component', () => { +test('Async component', async () => { const TestComponent = defineComponent({ components: { Async }, template: '' }) const wrapper = mount(TestComponent) + await flushPromises(); // ... }) ``` +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`. ## Conclusion @@ -146,4 +148,4 @@ test('Async component', () => { - Use `await nextTick()` to ensure the DOM has updated before the test continues. - Functions that might update the DOM (like `trigger` and `setValue`) return `nextTick`, so you need to `await` them. - Use `flushPromises` from Vue Test Utils to resolve any unresolved promises from non-Vue dependencies (such as API requests). -- Use `Suspense` to test components with an asynchronous `setup`. +- Use `Suspense` to test components with an asynchronous `setup` in an asynchronous test function.