使用vue-test-utils / jest测试父组件时访问子组件

时间:2019-08-14 06:39:18

标签: unit-testing vue.js jestjs

我需要测试父组件(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>

我希望测试能够检查文本框组件中填充的值是否确实添加到了父组件的结果数组中

0 个答案:

没有答案