#631 - Silent "Avoid mutating a prop directly" warning when updating prop

docs/api/config.md

@@ -94,3 +94,17 @@ import VueTestUtils from '@vue/test-utils'
 
 VueTestUtils.config.logModifiedComponents = false
 ```
+
+### `silentWarnings`
+
+- type: `Boolean`
+- default: `true`
+
+It suppresses warnings triggered by Vue while mutating component's observables (e.g. props). When set to `false`, all warnings are visible in the console. This is a configurable way which relies on `Vue.config.silent`.
+Example:
+
+```js
+import VueTestUtils from '@vue/test-utils'
+
+VueTestUtils.config.silentWarnings = false
+```

packages/test-utils/src/config.js

@@ -9,5 +9,6 @@ export default {
   mocks: {},
   methods: {},
   provide: {},
-  logModifiedComponents: true
+  logModifiedComponents: true,
+  silentWarnings: true
 }

packages/test-utils/src/wrapper.js

@@ -9,6 +9,7 @@ import {
   NAME_SELECTOR,
   FUNCTIONAL_OPTIONS
 } from './consts'
+import config from './config'
 import {
   vmCtorMatchesName,
   vmCtorMatchesSelector,
@@ -507,6 +508,8 @@ export default class Wrapper implements BaseWrapper {
    * Sets vm props
    */
   setProps (data: Object) {
+    const originalConfig = Vue.config.silent
+    Vue.config.silent = config.silentWarnings
     if (this.isFunctionalComponent) {
       throwError('wrapper.setProps() cannot be called on a functional component')
     }
@@ -541,6 +544,7 @@ export default class Wrapper implements BaseWrapper {
     // $FlowIgnore : Problem with possibly null this.vm
     this.vnode = this.vm._vnode
     orderWatchers(this.vm || this.vnode.context.$root)
+    Vue.config.silent = originalConfig
   }
 
   /**

test/specs/config.spec.js

@@ -2,6 +2,7 @@ import {
   describeWithShallowAndMount,
   vueVersion
 } from '~resources/utils'
+import ComponentWithProps from '~resources/components/component-with-props.vue'
 import {
   itDoNotRunIf,
   itSkipIf
@@ -10,15 +11,17 @@ import { config, TransitionStub, TransitionGroupStub, createLocalVue } from '~vu
 import Vue from 'vue'
 
 describeWithShallowAndMount('config', (mountingMethod) => {
-  let configStubsSave
-  let consoleError
-  let configLogSave
+  let configStubsSave,
+    consoleError,
+    configLogSave,
+    configSilentWarningsSave
 
   beforeEach(() => {
     TransitionGroupStub.name = 'another-temp-name'
     TransitionStub.name = 'a-temp-name'
     configStubsSave = config.stubs
     configLogSave = config.logModifiedComponents
+    configSilentWarningsSave = config.silentWarnings
     consoleError = sinon.stub(console, 'error')
   })
 
@@ -27,6 +30,7 @@ describeWithShallowAndMount('config', (mountingMethod) => {
     TransitionStub.name = 'transition'
     config.stubs = configStubsSave
     config.logModifiedComponents = configLogSave
+    config.silentWarnings = configSilentWarningsSave
     consoleError.restore()
   })
 
@@ -137,6 +141,38 @@ describeWithShallowAndMount('config', (mountingMethod) => {
     expect(wrapper.contains(TransitionStub)).to.equal(false)
   })
 
+  it('doesn\'t throw Vue warning when silentWarnings is set to true', () => {
+    config.silentWarnings = true
+    const localVue = createLocalVue()
+    const wrapper = mountingMethod(ComponentWithProps, {
+      propsData: {
+        prop1: 'example'
+      },
+      localVue
+    })
+    expect(wrapper.vm.prop1).to.equal('example')
+    wrapper.setProps({
+      prop1: 'new value'
+    })
+    expect(consoleError.called).to.equal(false)
+  })
+
+  it('does throw Vue warning when silentWarnings is set to false', () => {
+    config.silentWarnings = false
+    const localVue = createLocalVue()
+    const wrapper = mountingMethod(ComponentWithProps, {
+      propsData: {
+        prop1: 'example'
+      },
+      localVue
+    })
+    expect(wrapper.vm.prop1).to.equal('example')
+    wrapper.setProps({
+      prop1: 'new value'
+    })
+    expect(consoleError.called).to.equal(true)
+  })
+
   itSkipIf(
     vueVersion < 2.3,
     'does not log when component is extended if logModifiedComponents is false', () => {