Jest Testing Vue Component throws Error “cannot read undefined 'key'…”

Question

I am just getting start with Vue Testing with the help of Jest and Vue Test Utils.

I am trying to mount a component named DateComponent.vue in my Jest test file, but when running the test it throws an error

TypeError: Cannot read property 'key' of undefined

Mounting other Components seems to work fine and I can test them without problems, but this one seems to have some issues.

    <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>

And thats how I am mounting the component:

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


const wrapper = mount(DateComponent)

The issue seems to be within the <v-text-field> and <v-date-picker>, specifically the v-model="value[field.key]" but I am not experienced enough to figure out whats going on.

Thanks a lot

EDIT

How I fixed it:

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

When I mounted the TestComponent, I set its propsData and data to empty data

Actually, you can stub <v-text-field> & <v-date-picker> where you don't need worry about nested components. Check out this link for more info — Naren

Herbert Lago Herbert Lago · Accepted Answer · 2020-12-04T17:44:06

Your problem is when you're trying to acces v-model="value[field.key]", probably you didn't pass the field prop to your component, so, it will be undefined and the cause of your error.

Additionally, you should'n bind v-model in a prop, if it's a static value, use :value instead

Jest Testing Vue Component throws Error “cannot read undefined 'key'…”

1 Answers