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

Question

I am using Jest with Vue-Test-Utils. The code I have been using looks like this:

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

In this example, I want to set the pageSize value before the life cycle mounted is called. The problem with the above code is that I have started getting the following warning when the tests run:

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

When I delete the data property above, the warning goes away.

Am I setting the data correctly? If so, what should I do about the warning?

Should I set the data another way?

Answer 1

Please try like this:

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

reference: setData https://vue-test-utils.vuejs.org/en/api/wrapper/setData.html