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

Question

我正在使用 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

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

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

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

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().

之前

Answer 3

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

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

Vue.nextTick

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

How do you set the data values in a component with Vue-Test-Utils before mounted is called?

vue.js

vue-test-utils