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