有没有办法通过点击Vue单元测试中的提交按钮来触发表单的提交?
让我们来看看这个简单的组件:
<template>
<form @submit.prevent="$emit('submitEventTriggered')">
<button type="submit">Submit Form</button>
</form>
</template>
<script>
export default {}
</script>
您可以找到与示例here类似的组件.
我想测试当点击按钮时submit.prevent
被触发,因此submitEventTriggered
被emits .当我在浏览器中运行此功能时,一切正常,但以下测试失败:
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
,一切正常,但实际上没有提交via按钮的测试覆盖率.
wrapper.find('form').trigger('submit.prevent')
似乎trigger
函数实际上并没有点击按钮.
为什么会这样?有没有办法解决?