Jest 测试 Vue 组件抛出错误 "cannot read undefined 'key'..."

Question

我刚刚开始在 Jest 和 Vue Test Utils 的帮助下进行 Vue 测试。

我试图在我的 Jest 测试文件中安装一个名为 DateComponent.vue 的组件，但是当运行测试时它抛出一个错误

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设置为空数据

Answer 1

您的问题是当您尝试访问 v-model="value[field.key]" 时，可能您没有将 field 属性传递给您的组件，因此，它将是 undefined 并且你的错误原因。

此外，你应该在 prop 中绑定 v-model，如果它是静态值，请使用 :value 而不是

Jest 测试 Vue 组件抛出错误 "cannot read undefined 'key'..."

Jest Testing Vue Component throws Error "cannot read undefined 'key'..."

unit-testing

vue.js

jestjs

vue-component

vue-test-utils