Как я могу проверить, отключена ли кнопка с помощью Vue Test Utils?

Question

Я тестирую компонент Vue, но у меня возникают проблемы с тестированием отключенного состояния кнопки. Как я могу получить доступ к статусу отключенной кнопки в моих тестах?

Я пробовал использовать .attributes() но в этом случае метод возвращает только те свойства кнопки, которые не были установлены v-bind. SubmitButton.attributes().disabled всегда null.

Составная часть

      <button
  id="edit-resource-modal-submit"
  class="btn btn-sm btn-primary modal-button"
  :disabled="loadingResource || !formValid"
  @click="submit"
>
  Save
</button>

Тестовое задание

      describe('Disables buttons if', () => {
  beforeEach(async() => {
    await wrapper.setProps({ isModalOpen: true });
  });
  it('modal is loading', async() => {
    wrapper.vm.loadingResource = true;
    const SubmitButton = wrapper.find('#edit-resource-modal-submit');
    expect(SubmitButton.exists()).toBe(true);
    expect(SubmitButton.attributes().disabled).toBe('true');
  });
});

.attributes () возвращает только

      {
  id: 'edit-resource-modal-submit',
  class: 'btn btn-sm btn-primary modal-button'
}

Answer 1

Тест может прочитать disabledзначение непосредственно из самой ссылки на элемент, которая предоставляется тестовой оболочкойelementсвойство :

      // expect(SubmitButton.attributes().disabled).toBe('true'); ❌
expect(SubmitButton.element.disabled).toBe(true); ✅

Answer 2

Для vue-test-utils с vue 3 также работает ответ @tony19. Однако он использует старый API vue-test-utils для vue 2.

Как видите, возвращаемые значения для attributes()не содержат disabledатрибут, если элемент включен. Поэтому я бы рекомендовал проверить это следующим образом:

      expect(SubmitButton.attributes('disabled')).toBeUndefined(); // enabled
expect(SubmitButton.attributes('disabled')).toBe("") // disabled