在 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()

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

Trigger form submit on button click in Vue Unit Test

vue.js

vue-test-utils