13

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

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

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

<script>
    export default {}
</script>

您可以在此处找到一个类似的组件作为示例。

我想测试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功能实际上并未单击按钮。

为什么会这样，有没有办法解决它？

4

1 回答 1

22

注意：以前使用的方法attachToDocument已被弃用，

问题是 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()
于 2018-11-23T17:17:02.753 回答