Vue-test-utils: using $nextTick multiple times in a single test Vue-test-utils: using $nextTick multiple times in a single test vue.js vue.js

Vue-test-utils: using $nextTick multiple times in a single test


If you're able to use async functions, then you could await the $nextTick calls. This would avoid having to nest them and would keep everything in the same test.

Like so:

describe('Validations', () => {  let data;  let myComponent;  beforeEach(() => {    data = () => ({ propertyABC = 'not allowed value' });    myComponent = localVue.component('dummy', {template: '<div></div>', validations, data});  });  it('Properly validates propertyABC', async  () => {    let wrapper = mount(myComponent, {localVue});    wrapper.vm.$v.$touch();    await wrapper.vm.$nextTick();    expect(wrapper.vm.$v.propertyABC.$error).to.be.true;    wrapper.vm.propertyABC = 'allowed value';    wrapper.vm.$v.propertyABC.$touch();    await wrapper.vm.$nextTick();    expect(wrapper.vm.$v.proprtyABC.$error).to.be.false;  })})


Another approach is to use flushPromises.

import flushPromises from 'flush-promises';...test('some async test', async () => {  const wrapper = mount(MyComponent, { localVue });  wrapper.vm.$v.$touch();  await flushPromises();});

flushPromises() returns a promise itself, so its useful when you need/want to chain things using .then().then() etc...