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