False positive prop mutation error

[MechJosh0]

Version

1.0.0-beta.25

The issue is also inside 1.0.0-beta.20 which is the real version we use, but we cannot upgrade to .25 due to #1026, but the bug is inside .25 as well. Reproduction repo uses .25.

Reproduction link

https://github.com/MechJosh0/vue-test-utils-prop-error

Steps to reproduce

npm run test:unit

Output

PASS  src/components/__tests__/Container.spec.js
  @/components/Container
    interaction
      √ it should display a child-block (33ms)

  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: "mode"
    
    found in
    
    ---> <SimpleButton>
           <Anonymous>
             <Root>

What is expected?

No error.

What is actually happening?

Producing an error saying that the prop mode is being mutated when it is in fact not.

[donnysim]

Version
1.0.0-beta.25

Just got a similar problem (jsx). Below samples are reduced to problematic parts only.

const wrapper = shallowMount(Select);

wrapper.vm._onDropdownOpened();

_onDropdownOpened() {
  this.isDropdownOpen = true;
},

complains about

[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: "popupClass"
    
    found in
    
    ---> <OgPopper>
           <OgMultiSelect>
             <Root>

which makes no sense, if I comment out this.isDropdownOpen = true; the warning is gone.

the Select render function is

render(h) {
  return <og-popper
    value={this.isDropdownOpen}
    popupClass={['og-multi-select-dropdown', { 'og-multi-select-dropdown--multi': this.multiple }]}
  />;
}

If I remove value={this.isDropdownOpen} from render - no warn, if I remove popupClass from render- no warn. No warnings/error when running in web. For the og-popper component, I can remove all references to popupClass and it still get this warning.

Now, if popupClass is not an object, like

popupClass={'og-multi-select-dropdown'}
// or 
popupClass="og-multi-select-dropdown"

I get no warnings or errors and everything goes fine. As alternative, tried passing a frozen object, cloned array/object - still shows the warning.

[MechJosh0]

@donnysim Yep, same situation here. I can remove random bits of code that seem totally unrelated to the error shown and the error will go away.

We have the same situation with another prop as well (so we have this bug on 2 props) but I haven't provided this in the repo as they're both the same issue and I assume fixing this will fix the other one too.

[eddyerburgh]

This issue isn caused by how Vue Test Utils implements synchrnous updates. It will be fixed after Vue 2.5.18 is released, which includes synchronous update mode in core.

A temporary workaround is to run your tests asynchronously:

it("renders", () => {
  let wrapper = shallowMount(demo, { sync: false });
  wrapper.setData({selectedDate: testDate})
  setTimeout(() => {
    wrapper.vm.selectedDate.should.be.equal(testDate)
  done()  
  })
});

[VladZen]

This also happened to me while using wrapper.trigger('click'). Version is 1.0.0-beta.26.