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

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


Please try like this:

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

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


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


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