You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/async-suspense.md
+8-4
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
You may have noticed some other parts of the guide using `await` when calling some methods on `wrapper`, such as `trigger` and `setValue`. What's that all about?
4
4
5
-
By now you know Vue updates reactively; when you change a value, the DOM is automatically updated to reflect the latest value. What you might not have known is that Vue does this *asynchronously*. This is in contrast to a test runner, like Jest, which runs *synchronously*. This can cause some surprsingly results in tests. Let's look at some strategies to ensure Vue is updating the DOM as expected when we run our tests.
5
+
You might know Vue updates reactively; when you change a value, the DOM is automatically updated to reflect the latest value. Vue does this *asynchronously*. In contrast, a test runner like Jestruns *synchronously*. This can cause some surprising results in tests. Let's look at some strategies to ensure Vue is updating the DOM as expected when we run our tests.
6
6
7
7
## A Simple Example - Updating with `trigger`
8
8
@@ -78,10 +78,13 @@ jest.mock('axios', () => ({
78
78
}))
79
79
```
80
80
81
-
In this case, Vue and `nextTick` has no knowledge of the unresolved promise, so calling `nextTick` will not work - your assertion may run before the `Promise` is resolved. For scenarios like this, you can use `[flush-promises](https://www.npmjs.com/package/flush-promises)`, will causes all outstanding promises to resolve immediately. For example:
81
+
In this case, Vue has no knowledge of the unresolved Promise, so calling `nextTick` will not work - your assertion may run before it is resolved. For scenarios like this, you can use `[flush-promises](https://www.npmjs.com/package/flush-promises)`, which causes all outstanding promises to resolve immediately.
82
+
83
+
Let's see an example:
82
84
83
85
```js
84
86
importflushPromisesfrom'flush-promises'
87
+
importaxiosfrom'axios'
85
88
86
89
jest.mock('axios', () => ({
87
90
get: () =>newPromise(resolve=> {
@@ -101,9 +104,10 @@ test('uses a mocked axios HTTP client and flush-promises', async () => {
101
104
102
105
```
103
106
107
+
> If you haven't tested Components with API requests before, you can learn more in [HTTP Requests](/guide/http-requests).
104
108
## Conclusion
105
109
106
110
- Vue updates the DOM asynchronously; tests runner execute code synchronously.
107
111
- Use `await nextTick()` to ensure the DOM has updated before the test continues
108
-
- Functions that might update the DOM, like `trigger` and `setValue` return `nextTick`, so you may prepend `await`instead of importing and using `nextTick`.
109
-
- Use `flush-promises` to resolve any unresolved promises from non-Vue dependencies.
112
+
- Functions that might update the DOM, like `trigger` and `setValue` return `nextTick`, so you should `await`them.
113
+
- Use `flush-promises` to resolve any unresolved promises from non-Vue dependencies.
0 commit comments