Vitest和nuxt 3表单提交测试

Question

我在具有三个输入字段的 nuxt 3 应用程序中获得了一个表单。这是提交功能的样子：

const submitForm = async () => {
 try {
      await $fetch("/api/contact", {
        method: "POST",
        body: formData,
      });
      showForm.value = false;
      successMessage.value =
        "Thank you for your message!<br> Our colleagues will reply to you shortly.";
    } catch (error: any) {
     //error handling
    }
 }

我正在尝试通过 Vitest 测试表单。我还使用“@vue/test-utils”包来安装组件（给定值有效，应提交表单）：

   test("submits form", async () => {
    const wrapper = mount(Contact);
    const form = wrapper.find("form");

    await form.find("input[name=name]").setValue("dev test");
    await form.find("input[name=email]").setValue("[email protected]");
    await form.find("textarea").setValue("some msg");

    await form.get("button").trigger("click");

    await flushPromises();

    expect(wrapper.html()).toContain("Thank you for your message!");
  });

我所有其他的验证测试和其他东西都运行良好，但是在提交时，我无法让它工作。测试失败，因为它找不到给定的文本，但我不知道为什么。问题一定是在 $fetch 周围的某个地方，如果我尝试在没有 fetch 的情况下运行它，它可以工作，但不能与 $fetch 一起运行。

这里是

server/api/contact.post.ts

的终点

export default defineEventHandler(async (event) => {
  return {
    foo: "ok"
  };
});

我做对了吗？或者遗漏了什么？

Answer 1

对于 Vitest 你可以像这样使用 Nock

test('submits form', async () => {   // Mock the API request   nock('http://localhost')
    .post('/api/contact')
    .reply(200, {
      foo: 'ok',
    })

发给你可以用

await form.get('button').trigger('click')
for sendind,
  await wrapper.vm.$nextTick()