I’m trying to write my first unit test with vue-test-utils. I have a component which contains a form, that is readonly depending on a passed property named editing. I’m using Vuetify, so I have some v-text-field components.

test('Text fields are enabled', () => {
  const textFieldWrapperArray = wrapper
          .findComponent({ ref: 'form' })
          .findAllComponents({ name: 'v-text-field' });

  const disabledTextFields = textFieldWrapperArray.filter(textFieldWrapper => {
    return (textFieldWrapper.element as HTMLFormElement).disabled
  });

  expect(disabledTextFields.length).toBe(0);
});

The test passes but when I debug I can see that disabled in both cases (editing = true, editing = false) is always undefined.

return (textAreaWrapper.element as HTMLFormElement).disabled

I also tried using readonly instead of disabled but got the same.

In the component itself I'm using readonly.

<v-form
  ref="form"
  v-model="valid"
  :readonly="!editing"
  lazy-validation
>

Thank you for your help