Vue组件Jest测试出现Cannot read property of undefined报错如何解决

你遇到的两个渲染、生命周期钩子报错，和组件自身在data()里定义的fields对象没有关系——因为Vue挂载组件时会自动初始化所有data返回的响应式属性，正常情况下根本不会出现fields本身未定义的读取错误。

核心问题来源 #

两个报错本质上都是组件引用了未在测试环境注入的外部依赖，触发了对undefined对象的属性读取：

• 渲染阶段报Cannot read property 'fields' of undefined：说明你组件的模板渲染逻辑里，没有读取自身data的fields，而是通过类似this.xxx.fields的形式读取了某个上游对象的fields属性，这个上游对象（可能是inject注入的配置、Vuex状态、路由信息、父组件传入的prop）在测试挂载时是undefined，才会抛出读取错误。
• created钩子报Cannot read property 'relationNumber' of undefined：和上面的问题同源，钩子逻辑里同样读取了某个未注入的上游对象的relationNumber属性，而非读取自身data里this.fields.relationNumber的值。

关于教程表述的澄清 #

对应教程提到的"无需手动初始化data对象"，指的是组件自身通过data()定义的响应式属性，Vue会在挂载时自动完成初始化，不需要测试时通过mount的data配置手动覆盖赋值——但这个结论仅覆盖组件自身定义的属性，不包含组件依赖的外部注入内容：如果组件需要依赖父组件prop、全局挂载的Vue原型方法、Vuex、Router、provide/inject提供的值，这些内容在测试环境默认不存在，必须显式配置注入才能正常运行。

排查与修复步骤 #

• 第一步全局检索Step2.vue内所有出现fields、relationNumber的代码行，逐一确认引用的所属对象：
  • 排除读取自身this.fields的场景，定位所有读取外部对象属性的位置
  • 检查组件的inject声明、computed属性里对store/route的引用、对未声明props的引用
• 第二步在mount配置中显式注入缺失的依赖，举个常见的注入示例（比如组件依赖provide传入的表单配置）：

const wrapper = mount(Step2, {
  global: {
    provide: {
      formConfig: {
        fields: {
          relationNumber: ''
        }
      }
    }
  }
})

• 另外修正你测试代码里的断言语法错误：当前写法expect(button.toBeEnabled())存在逻辑问题，正确的断言写法为expect(button.attributes('disabled')).toBeUndefined()，原写法会把方法执行结果作为断言入参，无法正确校验按钮的可用状态。

内容的提问来源于stack exchange，提问作者KFVV