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

Question

I'm writing unit tests for vuelidate validation in my component. I figured out that the $touch() method is called asynchronously, so I need to use $nextTick() for the expect(). The problem appears when I need two nextTick()s for two expect()s.

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', (done) => { Vue.config.errorHandler = done let wrapper = mount(myComponent, {localVue}) wrapper.vm.$v.$touch() wrapper.vm.$nextTick(() => { expect(wrapper.vm.$v.propertyABC.$error).to.be.true # fails, because propertyABC === 'allowed value', adn thus $error is false done() } wrapper.vm.propertyABC = 'allowed value' wrapper.vm.$v.propertyABC.$touch() wrapper.vm.$nextTick(() => { expect(wrapper.vm.$v.proprtyABC.$error).to.be.false done() } }) })

How can I run this test without splitting it into two separate tests? I think nesting the $nextTick() might work, but it would be not flexible for higher amount of tests.

Promise.all?

Roy J
– Roy J

2018-02-12 17:15:59 +00:00
Commented Feb 12, 2018 at 17:15 — Roy J
– Roy J, Commented Feb 12, 2018 at 17:15

Fidd · Accepted Answer · 2018-02-13 18:13:39Z

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; }) })

Christian C · Accepted Answer · 2020-08-03 19:35:55Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related