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