Skip to content

Commit

Permalink
docs: updated the Using nextTick section (#1478)
Browse files Browse the repository at this point in the history
* 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()`
  • Loading branch information
bhaskar-nair2 committed Mar 21, 2020
1 parent b1a532a commit 4657d16
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions docs/guides/getting-started.md
Expand Up @@ -122,20 +122,20 @@ In order to test that the counter text has updated, we need to learn about `next

### Using `nextTick`

Vue batches pending DOM updates and applies them asynchronously to prevent unnecessary re-renders caused by multiple data mutations.
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.

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

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.
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.

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

```js
it('button click should increment the count text', async () => {
expect(wrapper.text()).toContain('0')
const button = wrapper.find('button')
button.trigger('click')
await Vue.nextTick()
await wrapper.vm.$nextTick()
expect(wrapper.text()).toContain('1')
})
```
Expand Down

0 comments on commit 4657d16

Please sign in to comment.