代码之家 › 专栏 › 技术社区 › Marvin Rabe

在Vue单元测试中单击按钮时提交触发器窗体

vue-test-utils vue.js

3

Marvin Rabe · 技术社区 · 6 年前

是否有方法通过单击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

如果我改变动作来触发 提交防止 从形式上看,一切都很好。但是实际上对于提交via按钮没有测试覆盖。

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

好像是 trigger 函数实际上没有单击按钮。

为什么会这样?有没有办法解决?

1 回复 | 直到 6 年前

1

3

Edward Sam 6 年前

问题是,Vue测试实用程序在默认情况下不会将DOM节点附加到文档。这是为了避免强制清理。你可以通过设置来解决这个问题 attachToDocument 安装组件时为真:

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