Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't set data for localVue #481

Closed
dimensi opened this issue Mar 20, 2018 · 15 comments
Closed

Can't set data for localVue #481

dimensi opened this issue Mar 20, 2018 · 15 comments

Comments

@dimensi
Copy link

@dimensi dimensi commented Mar 20, 2018

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
Copy link
Member

@eddyerburgh eddyerburgh commented Mar 20, 2018

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
Copy link
Author

@dimensi dimensi commented Mar 20, 2018

@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
Copy link
Member

@eddyerburgh eddyerburgh commented Mar 22, 2018

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

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

@dimensi
Copy link
Author

@dimensi dimensi commented Mar 23, 2018

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

@dimensi
Copy link
Author

@dimensi dimensi commented Jun 29, 2018

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

@dimensi
Copy link
Author

@dimensi dimensi commented Jun 29, 2018

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

@jgradzki
Copy link

@jgradzki jgradzki commented Sep 11, 2018

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
Copy link
Member

@eddyerburgh eddyerburgh commented Sep 22, 2018

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
Copy link

@scniro scniro commented Jul 11, 2019

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
Copy link

@RoelRoel RoelRoel commented Dec 3, 2019

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
Copy link

@Volcano-Yang Volcano-Yang commented Sep 30, 2020

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
Copy link

@vivek8690 vivek8690 commented Feb 18, 2021

@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

@ZaidRehman
Copy link

@ZaidRehman ZaidRehman commented Apr 8, 2021

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.

After more than 2 years I am still stuck on this issue.

@ZaidRehman
Copy link

@ZaidRehman ZaidRehman commented Apr 8, 2021

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

ParentComponent doesn't work if the data key starts with $

const Parent = {
    data() {
      return {
        $api: client
      };
    }
  };

Any work around for this ?

@HilalNazli
Copy link

@HilalNazli HilalNazli commented Mar 10, 2022

I also have a mounted function in which $root is called and this solution worked for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants