How do it test an initial disabled submit button thanks to "invalid "?

[theolavaux]

I'd like to test that my form cannot be submitted on page load when the user has not filled my form yet, following this pattern:
https://vee-validate.logaretm.com/v3/advanced/testing.html#testing-validationobserver-debounced-state

This is the test I wrote for it

  import { render, screen } from '@testing-library/vue';
  import userEvent from '@testing-library/user-event';
  import RegistrationForm from '@/components/form/RegistrationForm.vue';

  it.only('should activate/deactivate the form confirmation button when the form is valid/invalid', async () => {
    render(RegistrationForm);
    const user = userEvent.setup();

    const confirmationButton = screen.getByRole('button', {
      name: /^Confirm$/,
    });

    expect(confirmationButton).toBeDisabled();

Note: toBeDisabled comes from @testing-library/jest-dom, source here

However this doesn't seem to work as expected

 FAIL  test/integration/components/ui/RegistrationForm.test.ts (5.069 s)
  Registration form
    ✕ should activate/deactivate the form confirmation button when the form is valid/invalid (281 ms)

  ● Registration form › should activate/deactivate the form confirmation button when the form is valid/invalid

    expect(element).toBeDisabled()

    Received element is not disabled:
      <button type="submit" />

      76 |     });
      77 |
    > 78 |     expect(confirmationButton).toBeDisabled();
         |                                ^
      79 |

      at Object.<anonymous> (test/integration/components/ui/RegistrationForm.test.ts:78:32)

My template looks like

 <ValidationObserver v-slot="{ handleSubmit, invalid }" tag="div">
  <form
    class="form"
    novalidate
    :aria-label="Registration form"
    @submit.prevent="handleSubmit(onSubmit)"
    >

    <!-- Form fields -->

    <UiButton type="submit" :disabled="invalid">Confirm</UiButton>
    </form>
</ValidationObserver>

Generated DOM from render, missing the disabled attribute

<button type="submit">
  <div>
    Confirm
  </div>
</button>

[logaretm]

Sorry I missed this. This could be due to the validation being async. So you could try doing await flushPromises() before making any assertions.