Vue.js 在调用mounted之前，如何使用Vue Test Utils设置组件中的数据值？

我正在将Jest与Vue测试Utils一起使用。我一直使用的代码如下所示：

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    data: {
      pageSize: count
    },
    propsData: {
      userId,
      managerId
    }
  })
})

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    propsData: {
     userId,
     managerId
    }
  })
 wrapper.setData({pageSize: count})
})

在本例中，我希望在调用已装入的生命周期之前设置pageSize值。上述代码的问题是，在测试运行时，我开始收到以下警告：

[Vue warn]: Do not use built-in or reserved HTML elements as component id: data

当我删除上面的数据属性时，警告消失了

我是否正确设置了数据？如果是这样，我该如何处理警告

我应该用另一种方式设置数据吗？

请这样尝试：

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    data: {
      pageSize: count
    },
    propsData: {
      userId,
      managerId
    }
  })
})

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    propsData: {
     userId,
     managerId
    }
  })
 wrapper.setData({pageSize: count})
})

参考：setData

---

我的解决方案是将数据定义为初始化中的函数：

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    propsData: {
      userId,
      managerId
    },
    data: function() {
      return {
        pageSize: count
      }
    }
  })
})

在我的例子中，yukihirop使用

setData（）

提供的解决方案不起作用

我的组件正在从测试环境中未定义的窗口对象访问数据。此数据正在模板中输出。这导致装载后立即引发异常-在我有机会调用

setData（）

之前，的解决方案是正确的，但是，也可以将setData与Vue.nextTick（）一起使用。Vue.nextTick（）将重新启动该组件

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    propsData: {
     userId,
     managerId
    }
  })
 wrapper.setData({pageSize: count})
 Vue.nextTick()
})

---

可以确认按您的方式执行此操作意味着组件只渲染一次