我有一个 FileForm.vue 组件：-
<template>
<div class="file-form">
<form @submit="submit">
<input v-model="name" type="text" placeholder="File Name" />
<button type="submit">
<i class="fas fa-plus"></i>
</button>
</form>
</div>
</template>
<script>
export default {
data () {
return {
name: ''
}
},
methods: {
submit () {
if (!this.name.trim()) {
return
}
this.$emit('submit', this.name)
}
}
}
</script>
它包含在 App.vue 组件中：-
<template>
<div class="main">
<div class="sidebar">
<file-form @submit="createFile"></file-form>
<div class="files-list">
</div>
</div>
<div class="content">
<editor v-model="content"></editor>
<renderer :markdown="content"></renderer>
</div>
</div>
</template>
现在我正在测试这种行为：-
test('on successfull submit of the FileForm.vue a file object should be pushed to files array of App.vue', () => {
let appWrapper = mount(App)
appWrapper.setMethods({
createFile: jest.fn()
})
appWrapper.find('form').trigger('submit')
expect(appWrapper.vm.createFile).toHaveBeenCalled()
})
它将失败，因为最初 FileForm.vue 的输入为空，因此它是数据名称属性，由于 if 块，它不会触发提交操作。因此模拟的 createFile 没有被调用。
如果我能以某种方式设置数据，在这种情况下是触发提交之前 FileForm.vue 的 name 属性，我的测试将通过。像这样的东西： -
let formWrapper = appWrapper.find('file-form')
formWrapper.setData({
name: 'New File'
})
但我不能这样做，因为 formWrapper 是 HTMLElement 而不是 Vue 实例。