Vue.js + Jest：原Avoriaz用户求助，如何测试表单POST至外部URL？

我之前从Avoriaz转用Jest的时候，也纠结过怎么测试这种提交到外部URL的联系表单，给你分享两个常见场景的解决方案，应该能帮到你！

场景1：原生HTML表单提交（无Vue自定义提交方法） #

如果你的表单是直接用原生<form>标签的action和method属性提交（就像你给出的代码那样），测试的核心是验证表单的配置和数据是否正确，同时避免真实跳转。

测试代码示例 #

import { mount } from '@vue/test-utils'
import ContactForm from '@/components/ContactForm.vue'

describe('ContactForm', () => {
  it('submits to the correct Formspree URL with proper hidden field values', async () => {
    // 挂载组件
    const wrapper = mount(ContactForm)
    const formElement = wrapper.find('#contactForm').element

    // 模拟提交事件并阻止默认跳转行为
    const submitEvent = new Event('submit')
    jest.spyOn(submitEvent, 'preventDefault')

    // 设置组件的响应式数据
    wrapper.vm.next = '/thank-you-page'
    wrapper.vm.language = 'zh-CN'

    // 触发表单提交
    formElement.dispatchEvent(submitEvent)

    // 验证默认跳转被阻止（可选，如果你不希望测试时页面刷新）
    expect(submitEvent.preventDefault).toHaveBeenCalled()

    // 验证表单的目标URL和请求方法
    expect(formElement.action).toBe('https://formspree.io/mysite.com')
    expect(formElement.method).toBe('POST')

    // 验证隐藏字段的数值是否正确绑定
    expect(wrapper.find('input[name="_next"]').element.value).toBe('/thank-you-page')
    expect(wrapper.find('input[name="_language"]').element.value).toBe('zh-CN')
    expect(wrapper.find('input[name="_subject"]').element.value).toBe('Contact from my site')
  })
})

场景2：Vue方法处理提交（用fetch/axios发送请求） #

如果你的表单是通过Vue的@submit.prevent绑定自定义方法，再用fetch或axios发送POST请求，那我们可以直接模拟请求工具，验证调用参数是否正确。

测试代码示例（以fetch为例） #

import { mount } from '@vue/test-utils'
import ContactForm from '@/components/ContactForm.vue'

// 全局模拟fetch方法
global.fetch = jest.fn(() => Promise.resolve({ ok: true }))

describe('ContactForm', () => {
  // 每次测试前重置mock，避免干扰
  beforeEach(() => {
    fetch.mockClear()
  })

  it('sends a POST request to Formspree with correct form data', async () => {
    const wrapper = mount(ContactForm)
    
    // 设置组件数据
    wrapper.vm.next = '/thank-you'
    wrapper.vm.language = 'en'

    // 触发表单提交
    await wrapper.find('#contactForm').trigger('submit')

    // 验证fetch被调用一次，且目标URL正确
    expect(fetch).toHaveBeenCalledTimes(1)
    expect(fetch).toHaveBeenCalledWith(
      'https://formspree.io/mysite.com',
      expect.objectContaining({ method: 'POST' })
    )

    // 验证FormData中的参数是否正确
    const submittedFormData = fetch.mock.calls[0][1].body
    const dataEntries = Array.from(submittedFormData.entries())
    expect(dataEntries).toContain(['_next', '/thank-you'])
    expect(dataEntries).toContain(['_language', 'en'])
    expect(dataEntries).toContain(['_subject', 'Contact from my site'])
  })
})

一些关键注意事项 #

• 永远不要发真实请求：测试时一定要模拟fetch/axios或阻止原生表单跳转，否则测试会依赖外部服务的可用性，不稳定还可能产生垃圾数据。
• 如果用axios，模拟方式类似：jest.mock('axios')，然后断言axios.post的调用参数。
• 原生表单的测试重点在配置正确性，因为浏览器的提交行为是标准的，我们不需要重复测试浏览器功能。

内容的提问来源于stack exchange，提问作者user762579