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?

yukihirop · Accepted Answer · 2018-03-03T01:26:52.813

26

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

edited Mar 03 '18 at 01:26

answered Mar 02 '18 at 16:01

yukihirop

502
5
6

1

If you do this make sure to await, because this is an async action. – Harrison Cramer Sep 09 '22 at 19:20

score 17 · Answer 2 · answered Jun 04 '19 at 08:55

The solution for me was to define the data as a function within the initialisation:

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

In my case, the solution provided by yukihirop using setData() did not work.

My component was accessing data from the window object which was undefined within my test environment. This data was being output within the template. This caused an exception to be thrown immediately after mounting - before I had a chance to call setData().

Can confirm doing it your way means the component is only rendered once — ioan, Apr 10 '20 at 14:16

score 1 · Answer 3 · edited Jul 16 '22 at 02:39

1

The solution of Nicolas Betsworth is correct, however, it is also possible to use setData with Vue.nextTick(). Vue.nextTick() will rerender the component.

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

Vue.nextTick

edited Jul 16 '22 at 02:39

tony19

125,647
18
229
307

answered May 18 '20 at 09:55

mnovabox

41
5

If you are using async, you can await the `wrapper.setData`, and then you don't need the `nextTick()`. – Nick M Oct 27 '22 at 02:21

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

3 Answers3