Skip to content

Commit 081dee9

Browse files
committed
Merge branch 'docs/async' of https://github.com/vuejs/vue-test-utils-next-docs into docs/async
2 parents 4e0f128 + 5c18dd6 commit 081dee9

File tree

1 file changed

+8
-4
lines changed

1 file changed

+8
-4
lines changed

src/guide/async-suspense.md

+8-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
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?
44

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 Jest runs *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.
66

77
## A Simple Example - Updating with `trigger`
88

@@ -78,10 +78,13 @@ jest.mock('axios', () => ({
7878
}))
7979
```
8080

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:
8284

8385
```js
8486
import flushPromises from 'flush-promises'
87+
import axios from 'axios'
8588

8689
jest.mock('axios', () => ({
8790
get: () => new Promise(resolve => {
@@ -101,9 +104,10 @@ test('uses a mocked axios HTTP client and flush-promises', async () => {
101104

102105
```
103106

107+
> If you haven't tested Components with API requests before, you can learn more in [HTTP Requests](/guide/http-requests).
104108
## Conclusion
105109

106110
- Vue updates the DOM asynchronously; tests runner execute code synchronously.
107111
- 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

Comments
 (0)