Блог

Я только начинаю тестирование Vue с помощью утилит Jest и Vue Test.

Я пытаюсь смонтировать компонент с именем DateComponent.vue в моем тестовом файле Jest, но при запуске теста он выдает ошибку

 TypeError: Cannot read property 'key' of undefined
 

Кажется, что установка других компонентов работает нормально, и я могу протестировать их без проблем, но у этого, похоже, есть некоторые проблемы.

     <template>
  <v-menu
      v-model="dateMenu"
      :close-on-content-click="false"
      :nudge-right="40"
      transition="scale-transition"
      offset-y
      min-width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          v-model="value[field.key]"
          label=""
          readonly
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker v-model="value[field.key]" @input="dateMenu = false" locale='de-de'></v-date-picker>
    </v-menu>
</template>

<script>
export default {
  props: ['value', 'field'],
  data: () => ({
    dateMenu: false
  }),
  mounted: function () {

  },
  methods: {

  },
  filters: {

  }
}
</script>
 

И вот как я монтирую компонент:

 import { mount } from '@vue/test-utils'
import DateComponent from './components/DateComponent'


const wrapper = mount(DateComponent)
 

Проблема, похоже, в <v-text-field> и <v-date-picker> , в частности v-model="value[field.key]" , но я недостаточно опытен, чтобы понять, что происходит.

Большое спасибо

Редактировать

Как я это исправил:

 const wrapper = mount(TestComponent, {
  propsData: {
    field: {
    },
    value: {
    }
  }
})
 

Когда я монтировал TestComponent, я установил для его propsData и data пустые данные

Ваша проблема в том, что когда вы пытаетесь получить доступ v-model="value[field.key]" , вероятно, вы не передали field prop своему компоненту, так что это будет undefined и причиной вашей ошибки.

Кроме того, вы не должны привязываться v-model к prop, если это статическое значение, используйте :value вместо