Vue组件测试用例编写中如何正确给data数组对象传值

控制台输出的属性带[Getter/Setter]是Vue对传入对象做响应式代理的正常表现，不是传值失败的标志。组件内读取值拿到undefined，基本都是测试操作的时机或方式偏差导致的，按以下方式修正即可：

核心修正方案 #

• 优先用测试工具内置的data注入能力在组件挂载前传值，不要等组件挂载完了再补赋值
  @vue/test-utils 默认支持在挂载配置里直接覆盖组件的初始data，从根源上避免“赋值晚于组件初始化逻辑执行”的问题，写法示例：

  const wrapper = mount(你的目标组件, {
    // 挂载阶段直接覆盖初始data，优先级高于组件自身定义的默认值
    data() {
      return {
        organizations: [{"id":2,"company_name":"google","user_count":0}]
      }
    }
  })
  

  这种方式传入的值会作为组件初始化的初始值，组件在created、mounted等生命周期里读取到的就是你传的内容，不会出现取不到值的情况。
• 如果确实需要在组件挂载完成后动态赋值，要注意两个必要操作
  • 先确认organizations是组件data里已经显式声明过的属性：如果data里压根没定义这个字段，直接给wrapper.vm挂新属性是不会触发Vue响应式追踪的，组件内部自然感知不到值的变化。
  • 赋值后必须等一个响应式周期再读取结果：Vue的DOM更新、内部状态同步是异步的，你赋值完立刻去读组件的内部状态或渲染结果，拿到的还是更新前的旧值，需要加一行等待：

    // 动态给data属性赋值
    wrapper.vm.organizations = [{"id":2,"company_name":"google","user_count":0}]
    // 等响应式更新完成
    await wrapper.vm.$nextTick()
    // 之后再做断言、读取组件内部值
    

控制台输出说明 #

你看到的数组元素上的[Getter/Setter]标记，是Vue把普通JS对象转换成响应式对象时加的拦截代理，不是值丢了。要验证值是否真的传进去了，直接读取对应字段即可：wrapper.vm.organizations[0].id能拿到2、company_name能拿到"google"，就说明传值是完全成功的，不存在属性为空的问题。

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