Question

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

INotifyPropertyChanged

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

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

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

我是否正确设置了数据？如果是这样，我应该怎么做警告？

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

Answer 1

请尝试这样：

ProcessFunction

参考：setData documentation

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

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

3 个答案: