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

问题在于，默认情况下，Vue Test Utils不会将DOM节点附加到文档。这是为了避免强制执行清理。您可以通过在安装组件时将attachToDocument设置为true来解决此问题：

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

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

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

您应该从文档中删除DOM节点，以避免内存泄漏。您可以通过在包装器上调用destroy来完成此操作：

wrapper.destroy()

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

1 个答案: