Testing DOM asynchronous updates

In Vue, when the status of your component changes, the DOM is changed accordingly; that's why we call the status reactive. The only gotcha here is that the update is not synchronous; it happens that we have to wait additional time for the changes to actually propagate.

Getting ready

For this recipe, I will assume that you have already completed the Using Jasmine for testing Vue recipe, and you know how to write a basic test.

How to do it...

The test we will write is an illustration of how Vue's update mechanism works. From there, you will then be able to write asynchronous tests on your own.

In the beforeEach function of our test suite, write the following Vue instance:

describe('my app', () => {
  let vm
  beforeEach(() => {
    vm = new Vue({
      template: `
        <div>
          <input id="name" v-model="name">
          <p>Hello from 
            <span id="output">{{name}}</span>
          </p>
        </div...