我需要测试父组件(Fields.vue)是否正在从子组件TextBox.vue获取数据。问题是-我从来没有做过这样的事情,我也不知道如何使它工作,我试图寻找解决方案,但没有找到任何解决方案。我正在使用vue-test-utils / jest
Fields.vue
<template>
<div
v-for="(field, index) in fields"
:key="`field-${index}`">
<text-box
v-if="field.type == 'TEXT_BOX'"
:ref="index"
:field="field"/>
</div>
</template>
<script>
props: fields: { type: Array, default: () => [] }
methods: {
getTextBoxValue() {
let results = [];
this.fields.forEach((field, index) => {
if (field.type == 'TEXT_BOX' && this.$refs[index].length > 0) {
results.push(this.$refs[index][0].$data.value || '');
}
});
return results;
},
sendValues() {
this.getTextBoxValue();
}
}
</script
TextBox.vue
<template>
<div class="t-my-1">
<label>{{ field.name }}</label><br>
<input
:name="`${field.name}`"
v-model="value"
type="text">
</div>
</template>
<script>
props: {
field: {
type: Object,
default: () => ({
name: '',
displayName: '',
defaultValue: '',
type: '',
})
}
},
data() {
return {
value: ''
};
},
watch: {
field() {
this.value = this.field.defaultValue;
}
}
};
</script>
我希望测试能够检查文本框组件中填充的值是否确实添加到了父组件的结果数组中