setProps doesn't update props in some circumstances

[TheCycoONE]

Version

1.0.0-beta.19

Reproduction link

https://codesandbox.io/s/1k6y65wp4

Steps to reproduce

Create a component, like the one in the above reproduction, with multiple properties that are watched.
It is important that the watch function reads one of the properties (i.e. if you remove that switch statement from my test case the problem doesn't happen.)
Create a test for that component, call setProps on the property that is read in the watch.

What is expected?

The property should be updated, the component should react to the updated property

What is actually happening?

The property is never updated. props() shows the old value.

Note: this is a regression, it worked correctly in 1.0.0-beta.16 (I did not try other versions)

[eddyerburgh]

Sorry, this is another problem with how we've implemented synchronous renders.

There's a PR open to fix this by adding an async option to Vue—vuejs/vue#8240.

For the moment, the workaround is to set the sync mounting option to false and use Vue.nextTick/ setTimeout to await DOM updates (like you're doing):

test('use Vue.nextTick', (done) => {
  const wrapper = mount(TestComponent, { sync: false })
  wrapper.trigger('click')
  Vue.nextTick(() => {
    expect(wrapper.text()).toBe('updated')
    done()
  })
})

[TheCycoONE]

Setting sync false and waiting for Vue.nextTick doesn't appear to work around the countingAlgo prop not updating case that started happening after updating from beta 16 to beta 19.

It does workaround the DOM not updating when setProp({value: 42}) is called which was needed in 16 as well.

[HcySunYang]

@TheCycoONE @eddyerburgh
setProps does not work in [email protected], behaves like this issue, but works fine in the latest version of vue.

[TheCycoONE]

@HcySunYang I am on vue 2.5.16

[agriffis]

@TheCycoONE I'm hitting this too. What are you doing as a workaround?

[TheCycoONE]

Unfortunately I haven't found a workaround yet. For now I'm .skipping those tests.

[agriffis]

I guess npm i -D @vue/[email protected] works. 18, 19 and 20 are broken.

[agriffis]

It's hard to pin this bug down. I finally found a minimal failing test: updating a prop that is referenced through a chain of computed and lifecycle hook. I created #820 with that test case.

With that specific configuration, here's the table:

	sync: true	sync: false
1.0.0-beta.17	works	works
1.0.0-beta.18	works	works
1.0.0-beta.19	broken	works
1.0.0-beta.20	broken	works

I think that table changes slightly depending on the exact component configuration, but that's what I found for the minimal test case.

[eddyerburgh]

Thanks @agriffis .

This will be fixed when Vue 2.6 is released. Until then, you will need to run tests with sync set to false.

[jcupps]

FWIW sync = false and Vue.nextTick/setTimeout doesn't seem to work for my use case either :(

[PierreTurnbull]

Hello, I have this bug on Vue 2.6.11. When using wrapper.setProps, the expectation that comes after doesn't work, unless I enclosed it in nextTick. Note that it seems like I don't need to set sync to false when mounting my component for the test to work.

[Sefriol]

Hello, I have this bug on Vue 2.6.11. When using wrapper.setProps, the expectation that comes after doesn't work, unless I enclosed it in nextTick. Note that it seems like I don't need to set sync to false when mounting my component for the test to work.

Noticed the same with @vue/cli 4.3.1 and Vue 2.6.10

[dobromir-hristov]

In my testing I have noticed it works mostly after I await nextTick. The current versions of VTU no longer have sync: false. Latest VTU version you can just await setProps(), should work :)

[Sefriol]

I think await setProps does pass the checks when trying to get the prop values etc, but it fails to update the html/text and fails .contains checks until you use await nextTick().

[dobromir-hristov]

setProps returns nextTick if I am not mistaking :/

[manonheine]

await nextTick() doesn't do it for me, the props are supposedly updated (as seen from console.log) but have no effect whatsoever on the functions that are called after.
My current work around is to re-shallowMount the component with updated props in propsData in the test, then it suddenly works.