Skip to content

Commit 4657d16

Browse files
docs: updated the Using nextTick section (#1478)
* Updated the Using `nextTick` section 1. The current description for Using `nextTick` was very confusing for a beginner. 2. The example provided for `nextTick` would have not worked unless the user would `import Vue` (which had not been stated anywhere so far, nor was necessary) so made changes for the example to work with `wrapper.vm.$nextTick()`
1 parent b1a532a commit 4657d16

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

Diff for: docs/guides/getting-started.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -122,20 +122,20 @@ In order to test that the counter text has updated, we need to learn about `next
122122

123123
### Using `nextTick`
124124

125-
Vue batches pending DOM updates and applies them asynchronously to prevent unnecessary re-renders caused by multiple data mutations.
125+
Anytime you make a change (in computed, data, vuex state, etc) which updates the DOM (ex. show a component from v-if), you should await the `nextTick` function before running the test. This is because Vue batches pending DOM updates and _applies them asynchronously_ to prevent unnecessary re-renders caused by multiple data mutations.
126126

127127
_You can read more about asynchronous updates in the [Vue docs](https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue)_
128128

129-
We need to use `Vue.nextTick()` to wait until Vue has performed the DOM update after we set a reactive property. In the counter example, setting the `count` property schedules a DOM update to run on the next tick.
129+
We need to use `wrapper.vm.$nextTick` to wait until Vue has performed the DOM update after we set a reactive property. In the counter example, setting the `count` property schedules a DOM update to run on the next tick.
130130

131-
We can `await` `Vue.nextTick()` by writing the tests in an async function:
131+
We can `await` `wrapper.vm.$nextTick()` by writing the tests in an async function:
132132

133133
```js
134134
it('button click should increment the count text', async () => {
135135
expect(wrapper.text()).toContain('0')
136136
const button = wrapper.find('button')
137137
button.trigger('click')
138-
await Vue.nextTick()
138+
await wrapper.vm.$nextTick()
139139
expect(wrapper.text()).toContain('1')
140140
})
141141
```

0 commit comments

Comments
 (0)