在调用挂载之前，如何使用Vue-Test-Utils在组件中设置数据值？

Question

我在Vue-Test-Utils中使用Jest。我一直在使用的代码如下所示：

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

在此示例中，我想在调用安装的生命周期之前设置pageSize值。上面的代码存在的问题是，在运行测试时，我已经开始收到以下警告：

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

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

我是否正确设置数据？如果是，我该怎么办？

我应该以其他方式设置数据吗？

Answer 1

请尝试这样：

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

参考：setData https://vue-test-utils.vuejs.org/en/api/wrapper/setData.html

Answer 2

对我来说，解决方案是在初始化过程中将数据定义为一个函数：

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

在我的情况下，yukihirop使用的解决方案setData()不起作用。

我的组件正在从我的测试环境中未定义的window对象访问数据。该数据正在模板中输出。这导致挂载后立即引发异常-在我有机会致电之前setData()。