A lot of [Vue-warn] warnings about props mutation are thrown when using vuetify with test-utils

[bizzzd]

Version

1.0.0-beta.10

Reproduction link

https://bitbucket.org/alexeybogachev/vue-mutate-warn-issue/src/d606fb8b8a815a33366dce917eb5f2116ea7b7e7?at=master

Steps to reproduce

Clone the repository:
https://bitbucket.org/alexeybogachev/vue-mutate-warn-issue/src/d606fb8b8a815a33366dce917eb5f2116ea7b7e7?at=master

run in cmd:

npm install
npm run test

What is expected?

No [vue-warn] messages are thrown

What is actually happening?

It throws warnings

console.error node_modules\vue\dist\vue.runtime.common.js:589
[Vue warn]: $listeners is readonly.

found in

---> <VTextField>
       <Root>

console.error node_modules\vue\dist\vue.runtime.common.js:589
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placeholder"

found in

---> <VTextField>
       <Root>

---

Without using test-util (with using $mount) it works as expected:

I created a separate branch that demonstrates this: https://bitbucket.org/alexeybogachev/vue-mutate-warn-issue/branch/no-test-utils

[akrome11]

I am having a smiliar issue

[timoschwarzer]

@bizzzd According to your package.json in your repository, you are not using beta.10 but beta.14 (latest).
I have the same issue and saw the issue for the first time in beta.12. beta.11 does not throw warnings with Vuetify.

[timoschwarzer]

So the issues is somewhere here: v1.0.0-beta.12...v1.0.0-beta.13 (edited, thanks @tbsvttr)

[tbsvttr]

@timoschwarzer For me it happened after upgrading from Beta 12 to 13.

[timoschwarzer]

@tbsvttr Yes, you are right. I thought I skipped beta.12 because of this issue but I skipped it because of another issue...

[akrome11]

i just tried to use 11 and it is still throwing them for me

[timoschwarzer]

@akrome11 can you show me your package.json?

[rsaleri]

I can confirm it also happens in Beta 15
I'm testing a computed getter:

test('Change computed value', () => {
   const wrapper = shallow(Component, { store, localVue, propsData })
   wrapper.setData({computedProperty: 'SOMETHING'})
 })

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: $listeners is readonly.

found in

---> <VSelect>
       <Root>

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

found in

---> <VSelect>
       <Root>

npm view @vue/test-utils version
1.0.0-beta.15

[wordythebyrd]

I'm having the same issue unit testing around Vuetify components on 1.0.0-beta.15. Specifically using wrapper.setData({ foo: 'bar' });

console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: $listeners is readonly.

      found in

      ---> <VTextField>
             <VForm>
               <VCard>
                 <Root>

There's a note on vue-test-utils that says:

Note some plugins, like Vue Router, add read-only properties to the global Vue constructor. This makes it impossible to reinstall the plugin on a localVue constructor, or add mocks for these read-only properties

That being said, according to the docs, $listeners is a global read only property on the Vue instance, not a property that Vuetify is introducing.

[eddyerburgh]

Thanks for making this issue, the cause of this issue is the same as —#532 so I'm closing this in favor of #532.

The problem is that we set all watchers to sync, including the update watcher. This causes a re-render when the comonent updates the attrs. Then before the listeners have been updated, isUpdatingChildComponent is set to false, so when the listeners are mutated, the warning is logged.

I'm going to look into this further, but updates will be added to the other issue.