Test disabling of button using Vue Test Utils

Viewed 63

How do you test a button's disabled attribute changing in vue test utils? The disabled attribute of the button depends on isFormValid and isFormModified. I've tried setting them to both true in my test, but it still receives a false.

Component

 <v-btn
   data-qa="reviewData"
   @click="validateForm()"
   :disabled="!(isFormValid && isFormModified)"
   :color="primaryColor"
   rounded
   class="font-weight-regular text-none white--text px-7 mr-8 mt-3"
 >
   { $t('accountMaintenance.review') }}</v-btn

Test

wrapper.setData({ isFormModified: true, isFormValid: true })
const button = wrapper.find('[data-qa="reviewData"]')
expect(button.attributes().disabled).toBe('false')
1 Answers

According to docs, you have to allow Vue time (1 × render cycle) to update the wrapper.

Prefix wrapper.setData with await (and make the test async).

Related