在 Vue 单元测试中单击按钮时触发表单提交

Question

有没有办法通过点击 Vue 单元测试中的提交按钮来实际触发表单的提交？

让我们来看看这个简单的组件：

<template>
    <form @submit.prevent="$emit('submitEventTriggered')">
        <button type="submit">Submit Form</button>
    </form>
</template>

<script>
    export default {}
</script>

您可以找到类似的组件作为示例here。

我想测试在单击按钮时会触发submit.prevent，因此会发出submitEventTriggered。当我在浏览器中运行它时，一切都按预期工作，但以下测试失败：

import {shallowMount} from '@vue/test-utils'
import {assert} from 'chai'
import Form from '@/components/Form.vue'

describe.only('Form', () => {

    it('button click triggers submit event', () => {
        const wrapper = shallowMount(Form)

        wrapper.find('[type=\'submit\']').trigger('click')

        assert.exists(wrapper.emitted('submitEventTriggered'), 'Form submit not triggered')
    })
})

有了这个输出：

AssertionError: Form submit not triggered: expected undefined to exist

如果我将操作更改为直接在表单上触发submit.prevent，一切正常，但实际上没有通过按钮提交的测试覆盖率。

wrapper.find('form').trigger('submit.prevent')

看起来trigger 函数实际上并没有点击按钮。

为什么会这样？有办法解决吗？

Answer 1

注意：之前的方法使用attachToDocument，which has been deprecated，

---

问题在于 Vue Test Utils 默认情况下不会将 DOM 节点附加到文档。这是为了避免强制清理。您可以通过在挂载组件时将 attachTo 设置为 HTML 元素来解决此问题：

const div = document.createElement('div')
div.id = 'root'
document.body.appendChild(div)

it('button click triggers submit event', () => {
  const wrapper = shallowMount(Form, {
    attachTo: '#root'
  })

  wrapper.find("[type='submit']").trigger('click')

  assert.exists(
    wrapper.emitted('submitEventTriggered'),
    'Form submit not triggered'
  )
})

您应该从文档中删除 DOM 节点以避免内存泄漏。您可以通过在包装器上调用 destroy 来做到这一点：

wrapper.destroy()