Uncaught TypeError: Cannot read property 'firstname' of undefined. on loading a component that has an inner component

Question

create.vue

<template>
  <div class="content">
    <base-input type="text" id="firstname" v-model="firstname"/>
  </div>
</template>

<script> 
import BaseInput from 'BaseInput.vue'
export default {
    data () {
        return {
            firstname: ''
        }   
    }
}   
</script>

create.spec.js

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Create from '/Create.vue'
import VueI18n from 'vue-i18n'

const wrapper = shallowMount(Create)
const vm = wrapper.vm
console.log(vm)

如您所见，加载模板时使用的是shallow Mount。它抛出错误，

Uncaught TypeError: Cannot read property 'firstname' of undefined at webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:5652:0 <- index.6fc62f9fc7f0f4a43161.js:9693

Answer 1

您需要将 BaseInput 组件添加到导出默认值。现在 vue 不知道 BaseInput 是什么（info, if you are using such as Babel or Webpack) . I also changed the data line because there need to be a : after data and function before the () (example）。如果你这样做它应该工作：

<script> 
import BaseInput from 'BaseInput.vue'
export default {
    components: {
       BaseInput 
    }
    data: function() {
        return {
            firstname: ''
        }   
    }
}   
</script>

Uncaught TypeError: Cannot read property 'firstname' of undefined. on loading a component that has an inner component

Uncaught TypeError: Cannot read property 'firstname' of undefined. on loading a component that has an inner component

vue.js

vue-test-utils