#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', () => {