Vue-test-utils: Prop not updated when immediate watcher accessing it (async mode)

Created on 8 Feb 2019  路  7Comments  路  Source: vuejs/vue-test-utils

Version

1.0.0-beta.29

Reproduction link

https://github.com/rndmerle/repro-vue-test-utils-sync/tree/setprops-watcher

Steps to reproduce

git clone -b setprops-watcher https://github.com/rndmerle/repro-vue-test-utils-sync.git

yarn && yarn test

What is expected?

Hello test passing, with logging on console:

foo undefined
foo xxx

What is actually happening?

Hello test not passing, with logging on console:

foo undefined

To make the test pass, either:

  • switch immediate to false (and uncomment created() content)
  • change the watcher handler function to make anything as long it's not accessing the foo prop
bug

Most helpful comment

@Dayna-A and everyone looking for a workaround,
for me calling the following code worked, after mounting a component:

    wrapper = mount(MyComponent, options);
    wrapper.vm.$parent.$forceUpdate();
    await wrapper.vm.$nextTick();

I'm initializing the component in

beforeEach(async function () {

(please note async)

All 7 comments

I'm getting this as well. This occurs also even if you aren't watching the prop directly, but are watching a computed prop that uses the prop. I made an example repo off of yours, install instructions are the same:

https://github.com/DoubleB123/repro-vue-test-utils-sync/tree/computed

I also occured this bug when watch for prop change after call setProps watcher isn't called

I am having this same issue, has anyone found a successful workaround?

I found the core reason for that :)

When we have component with watcher for immediate: true watcher Vue dependency system will track dependency from our component to parent component, which renders our own one. This effectively means, that as soon as we explicitly set prop on the component with setProps - our component will be immediately re-rendered with original props by our parent component

I've created #1300 to address this issue and added original failed test

Nice find!

@Dayna-A and everyone looking for a workaround,
for me calling the following code worked, after mounting a component:

    wrapper = mount(MyComponent, options);
    wrapper.vm.$parent.$forceUpdate();
    await wrapper.vm.$nextTick();

I'm initializing the component in

beforeEach(async function () {

(please note async)

@bugy Thank you! This solved my problem with setProps()!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

eddyerburgh picture eddyerburgh  路  4Comments

lusarz picture lusarz  路  3Comments

yoyoys picture yoyoys  路  3Comments

jonyoder picture jonyoder  路  3Comments

38elements picture 38elements  路  3Comments