Vue-test-utils: Can't set data for localVue

[dimensi]

Version

1.0.0-beta.12

Reproduction link

https://codesandbox.io/s/n92wj49kn0

Steps to reproduce

Try to set data into localVue and get this from testing env

What is expected?

Expected testData === 'testData'

What is actually happening?

testData === undefined

---

I can not understand how to throw data into localVue

[eddyerburgh]

You can set $root on the vm directly:

wrapper.vm.$root = { loading: true }
wrapper.vm.$forceUpdate()

Or you can pass in a parent component with the parentComponent mounting option. In VTU, the paren will be the $root:

const Parent = {
  data() {
    return {
      loading: "asdas"
    };
  }
};
const wrapper = shallowMount(TestComponent, {
  parentComponent: Parent
});

[dimensi]

@eddyerburgh it's not help

const mountComp = (data) => {
  const wrap = mount(ModeCard, {
    propsData: data,
    localVue,
  });

  wrap.setData({
    $root: {
      currentLang: 'ru',
    },
  });

  return wrap
};

i anyway got currentLang === undefined

[eddyerburgh]

If you're trying to set currenLang on your root instance, use:

  wrap.setData({
      currentLang: 'ru',
  });

[dimensi]

@eddyerburgh yes, it's help. Thank you.

[dimensi]

@eddyerburgh after update to 1.0.0-beta.20, i can't again set data on $root.

[dimensi]

Oh, now it's work with mocks property...

[jgradzki]

I can't make it work neither with mocks or setData

mocks: {
        $root: {
          loading: true,
        },
      },

wrapper.setData({
      $root: {
        loading: true,
      },
    });

$root.loading is undefined in both cases + with setData i got error not to change root data dynamicly
version: 1.0.0-beta.24

[eddyerburgh]

You can set $root on the vm directly:

wrapper.vm.$root = { loading: true }
wrapper.vm.$forceUpdate()

Or you can pass in a parent component with the parentComponent mounting option. In VTU, the paren will be the $root:

const Parent = {
  data() {
    return {
      loading: "asdas"
    };
  }
};
const wrapper = shallowMount(TestComponent, {
  parentComponent: Parent
});

[scniro]

Can anyone share context of why the first solution was removed? I find this cleaner...

mocks: {
  $root: {}
}

Anyways, using the above suggestion for now indeed works well

[RoelRoel]

In my mounted function $root is called so I have to mock it before mounting. Than it is not possible overwrite set wrapper.vm.$root afterwards.
So I guess a fake parent component is the only solution for me, but I can't get it to work.

[Volcano-Yang]

You can set $root on the vm directly:

wrapper.vm.$root = { loading: true }
wrapper.vm.$forceUpdate()

Or you can pass in a parent component with the parentComponent mounting option. In VTU, the paren will be the $root:

const Parent = {
  data() {
    return {
      loading: "asdas"
    };
  }
};
const wrapper = shallowMount(TestComponent, {
  parentComponent: Parent
});

recommend，it‘s good!

[vivek8690]

@eddyerburgh

   const Parent = {
            template: '<div id="app">Modal Body</div>',
            data() {
                return {
                    loading: 'asdas'
                };
            }
        };

const wrapper = shallowMount(TestComponent, {
  parentComponent: Parent
});

In my TestComponent mounted I have ``

this.$root.$el.append(this.$el)

Which throws HierarchyRequestError: The operation would yield an incorrect node tree.

Here you can try https://codesandbox.io/s/quiet-snow-tzdf5?file=/src/Sample.spec.js