[v4] Submit Form with vue-test-utils

[Fubinator]

I am trying to submit a form using the vue-test-utils. It seems like nothing happens regardless of clicking the button or submitting the form via the "submit" event. Is there a way to submit the form that I missed?

Example form:

<Form
  id="form"
  @submit="createComment"
  as="form"
  :validationSchema="validationSchema"
>
  <Field
    as="textarea"
    name="comment"
    id="comment"
    placeholder="Leave a comment"
    rows="5"
    v-model="commentText"
  ></Field>
  <ErrorMessage name="comment"></ErrorMessage>
  <button id="create-btn" type="submit">Comment</button>
</Form>

Example script:

setup() {
  const commentText = ref("");

  const validationSchema = yup.object().shape({
    comment: yup.string().required("Please enter a comment")
  });

  function createComment() {
    console.log("Submitted");
  }

  return { commentText, validationSchema, createComment };
}

Example test (using nextTick does nothing as well):

test("Should not trigger event with empty input", async () => {
  const wrapper = mount(CommentSection, {});

  const form = wrapper.find("#form");
  await form.trigger("submit");

  // The following does not work either:
  // const button = wrapper.find("#create-btn");
  // await button.trigger("click");

  expect(wrapper.html()).toContain("Please enter a comment");
});

Disclaimer: It does not matter if i fill the textarea beforehand. The validation does not seem to fire and the createComment function won't be invoked.

[Fubinator]

I have just updated vee-validate. Now the createComment function is called when the form is correctly filled. The ErrorMessage is unfortunately not displayed to me only in case of failed validation. Unfortunately, the ErrorMessage is still not displayed in case of failed validation. However, I should be able to work with that.

edit:

using flushPromises instead of nextTick does the trick:

test("Should display the validation error message", async () => {
  const wrapper = mount(CommentSection, {});

  const button = wrapper.find("#form");

  await button.trigger("submit");
  await flushPromises();

  expect(wrapper.html()).toContain("Please enter a comment");
});

test("Should invoke the createComment function when submitting valid form", async () => {
  const wrapper = mount(CommentSection, {});

  const button = wrapper.find("#form");
  const input = wrapper.find("#comment");

  await input.setValue("test");
  await button.trigger("submit");
  await flushPromises();

  expect(wrapper.vm.commentText).toBe("");
  expect(wrapper.html()).not.toContain("Please enter a comment");
});

[logaretm]

Yea, vee-validate uses promises to do validation. Next tick just waits till Vue flushes the updates to the UI which is around 16ms, so it's not reliable to wait for nextTick.

Always use flushPromises before inspecting a validation message, I should add that to the docs, thanks!