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

【问题标题】：How do you set the data values in a component with Vue-Test-Utils before mounted is called?在调用挂载之前，如何使用 Vue-Test-Utils 设置组件中的数据值？
【发布时间】：2023-03-31 02:07:01
【问题描述】：

我将 Jest 与 Vue-Test-Utils 一起使用。我一直使用的代码是这样的：

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

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

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

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

【问题讨论】：

标签： vue.js vue-test-utils

【解决方案1】：

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

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

就我而言，yukihirop 使用setData() 提供的解决方案不起作用。

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

【讨论】：

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

【解决方案2】：

请尝试这样：

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

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

【讨论】：

欢迎您:)

【解决方案3】：

Nicolas Betsworth 的解决方案是正确的，但是也可以在 Vue.nextTick() 中使用 setData。 Vue.nextTick() 将重新渲染组件。

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

Vue.nextTick

【讨论】：