fix: throw error if unsupported options passed in vue < 2.3 (vuejs#910)

Author: eddyerburgh

packages/create-instance/add-mocks.js

@@ -3,11 +3,15 @@ import $$Vue from 'vue'
 import { warn } from 'shared/util'
 
 export default function addMocks (
-  mockedProperties: Object = {},
+  mockedProperties: Object | false = {},
   Vue: Component
 ): void {
+  if (mockedProperties === false) {
+    return
+  }
   Object.keys(mockedProperties).forEach(key => {
     try {
+      // $FlowIgnore
       Vue.prototype[key] = mockedProperties[key]
     } catch (e) {
       warn(
@@ -16,6 +20,7 @@ export default function addMocks (
         `the property as a read-only value`
       )
     }
+    // $FlowIgnore
     $$Vue.util.defineReactive(Vue, key, mockedProperties[key])
   })
 }

packages/create-instance/create-instance.js

@@ -25,6 +25,22 @@ function compileTemplateForSlots (slots: Object): void {
   })
 }
 
+function vueExtendUnsupportedOption (option: string) {
+  return `options.${option} is not supported for ` +
+  `components created with Vue.extend in Vue < 2.3. ` +
+  `You can set ${option} to false to mount the component.`
+}
+
+// these options aren't supported if Vue is version < 2.3
+// for components using Vue.extend. This is due to a bug
+// that means the mixins we use to add properties are not applied
+// correctly
+const UNSUPPORTED_VERSION_OPTIONS = [
+  'mocks',
+  'stubs',
+  'localVue'
+]
+
 export default function createInstance (
   component: Component,
   options: Options,
@@ -34,6 +50,18 @@ export default function createInstance (
   // Remove cached constructor
   delete component._Ctor
 
+  if (
+    vueVersion < 2.3 &&
+    typeof component === 'function' &&
+    component.options
+  ) {
+    UNSUPPORTED_VERSION_OPTIONS.forEach((option) => {
+      if (options[option]) {
+        throwError(vueExtendUnsupportedOption(option))
+      }
+    })
+  }
+
   // instance options are options that are passed to the
   // root instance when it's instantiated
   const instanceOptions = extractInstanceOptions(options)

packages/shared/merge-options.js

@@ -2,6 +2,9 @@
 import { normalizeStubs } from './normalize'
 
 function getOption (option, config?: Object): any {
+  if (option === false) {
+    return false
+  }
   if (option || (config && Object.keys(config).length > 0)) {
     if (option instanceof Function) {
       return option

packages/shared/normalize.js

@@ -2,6 +2,9 @@ import { isPlainObject } from './validators'
 import { throwError } from './util'
 
 export function normalizeStubs (stubs = {}) {
+  if (stubs === false) {
+    return false
+  }
   if (isPlainObject(stubs)) {
     return stubs
   }

packages/test-utils/src/shallow-mount.js

@@ -30,7 +30,7 @@ export default function shallowMount (
   // In Vue.extends, Vue adds a recursive component to the options
   // This stub will override the component added by Vue
   // $FlowIgnore
-  if (!options.stubs[component.name]) {
+  if (options.stubs && !options.stubs[component.name]) {
     // $FlowIgnore
     options.stubs[component.name] = createBlankStub(component, component.name)
   }

packages/test-utils/types/index.d.ts

@@ -125,11 +125,11 @@ interface MountOptions<V extends Vue> extends ComponentOptions<V> {
   attachToDocument?: boolean
   context?: VNodeData
   localVue?: typeof Vue
-  mocks?: object
+  mocks?: object | false
   parentComponent?: Component
   slots?: Slots
   scopedSlots?: Record<string, string>
-  stubs?: Stubs,
+  stubs?: Stubs | false,
   attrs?: Record<string, string>
   listeners?: Record<string, Function | Function[]>
   sync?: boolean

test/specs/mount.spec.js

@@ -135,24 +135,26 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {
     expect(wrapper.html()).to.equal(`<div>foo</div>`)
   })
 
-  it('overrides methods', () => {
-    const stub = sinon.stub()
-    const TestComponent = Vue.extend({
-      template: '<div />',
-      methods: {
-        callStub () {
-          stub()
+  itDoNotRunIf(
+    vueVersion < 2.3,
+    'overrides methods', () => {
+      const stub = sinon.stub()
+      const TestComponent = Vue.extend({
+        template: '<div />',
+        methods: {
+          callStub () {
+            stub()
+          }
         }
-      }
-    })
-    mount(TestComponent, {
-      methods: {
-        callStub () {}
-      }
-    }).vm.callStub()
+      })
+      mount(TestComponent, {
+        methods: {
+          callStub () {}
+        }
+      }).vm.callStub()
 
-    expect(stub).not.called
-  })
+      expect(stub).not.called
+    })
 
   it.skip('overrides component prototype', () => {
     const mountSpy = sinon.spy()
@@ -268,22 +270,24 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {
     expect(wrapper.vm.$options.listeners).to.equal(undefined)
   })
 
-  it('injects store correctly', () => {
-    const localVue = createLocalVue()
-    localVue.use(Vuex)
-    const store = new Vuex.Store()
-    const wrapper = mount(ComponentAsAClass, {
-      store,
-      localVue
+  itDoNotRunIf(
+    vueVersion < 2.3,
+    'injects store correctly', () => {
+      const localVue = createLocalVue()
+      localVue.use(Vuex)
+      const store = new Vuex.Store()
+      const wrapper = mount(ComponentAsAClass, {
+        store,
+        localVue
+      })
+      wrapper.vm.getters
+      mount(
+        {
+          template: '<div>{{$store.getters}}</div>'
+        },
+        { store, localVue }
+      )
     })
-    wrapper.vm.getters
-    mount(
-      {
-        template: '<div>{{$store.getters}}</div>'
-      },
-      { store, localVue }
-    )
-  })
 
   it('propagates errors when they are thrown', () => {
     const TestComponent = {

test/specs/mounting-options/context.spec.js

@@ -45,7 +45,7 @@ describeWithMountingMethods('options.context', mountingMethod => {
       render: h => h('div')
     })
     const context = {}
-    const fn = () => mountingMethod(Component, { context })
+    const fn = () => mountingMethod(Component, { context, stubs: false, mocks: false })
     expect(fn).not.to.throw()
   })
 

test/specs/mounting-options/localVue.spec.js

@@ -5,7 +5,7 @@ import {
   vueVersion
 } from '~resources/utils'
 import { createLocalVue } from '~vue/test-utils'
-import { itSkipIf } from 'conditional-specs'
+import { itSkipIf, itRunIf } from 'conditional-specs'
 import Vuex from 'vuex'
 
 describeWithMountingMethods('options.localVue', mountingMethod => {
@@ -154,4 +154,24 @@ describeWithMountingMethods('options.localVue', mountingMethod => {
       localVue
     })
   })
+
+  itRunIf(
+    vueVersion < 2.3,
+    'throws an error if used with an extended component in Vue 2.3', () => {
+      const TestComponent = Vue.extend({
+        template: '<div></div>'
+      })
+      const message =
+    `[vue-test-utils]: options.localVue is not supported for components ` +
+    `created with Vue.extend in Vue < 2.3. You can set localVue to false ` +
+    `to mount the component.`
+
+      const fn = () => mountingMethod(TestComponent, {
+        localVue: createLocalVue(),
+        stubs: false,
+        mocks: false
+      })
+      expect(fn).to.throw()
+        .with.property('message', message)
+    })
 })

test/specs/mounting-options/mocks.spec.js

@@ -3,7 +3,7 @@ import Vue from 'vue'
 import Component from '~resources/components/component.vue'
 import ComponentWithVuex from '~resources/components/component-with-vuex.vue'
 import { describeWithMountingMethods, vueVersion } from '~resources/utils'
-import { itDoNotRunIf, itSkipIf } from 'conditional-specs'
+import { itDoNotRunIf, itSkipIf, itRunIf } from 'conditional-specs'
 
 describeWithMountingMethods('options.mocks', mountingMethod => {
   let configMocksSave
@@ -200,4 +200,22 @@ describeWithMountingMethods('options.mocks', mountingMethod => {
       mountingMethod.name === 'renderToString' ? wrapper : wrapper.html()
     expect(HTML).to.contain('locallyMockedValue')
   })
+
+  itRunIf(
+    vueVersion < 2.3,
+    'throws an error if used with an extended component in Vue 2.3', () => {
+      const TestComponent = Vue.extend({
+        template: '<div></div>'
+      })
+      const message =
+    `[vue-test-utils]: options.mocks is not supported for components ` +
+    `created with Vue.extend in Vue < 2.3. You can set mocks to false ` +
+    `to mount the component.`
+      const fn = () => mountingMethod(TestComponent, {
+        mocks: { something: 'true' },
+        stubs: false
+      })
+      expect(fn).to.throw()
+        .with.property('message', message)
+    })
 })

test/specs/mounting-options/stubs.spec.js

@@ -6,7 +6,7 @@ import { createLocalVue, config } from '~vue/test-utils'
 import { config as serverConfig } from '~vue/server-test-utils'
 import Vue from 'vue'
 import { describeWithMountingMethods, vueVersion } from '~resources/utils'
-import { itDoNotRunIf, itSkipIf } from 'conditional-specs'
+import { itDoNotRunIf, itSkipIf, itRunIf } from 'conditional-specs'
 
 describeWithMountingMethods('options.stub', mountingMethod => {
   let info
@@ -512,4 +512,24 @@ describeWithMountingMethods('options.stub', mountingMethod => {
         .with.property('message', error)
     })
   })
+
+  itRunIf(
+    vueVersion < 2.3,
+    'throws an error if used with an extended component in Vue 2.3', () => {
+      const TestComponent = Vue.extend({
+        template: '<div></div>'
+      })
+      const message =
+    `[vue-test-utils]: options.stubs is not supported for components ` +
+    `created with Vue.extend in Vue < 2.3. You can set stubs to false ` +
+    `to mount the component.`
+      const fn = () => mountingMethod(TestComponent, {
+        stubs: {
+          something: 'true'
+        },
+        mocks: false
+      })
+      expect(fn).to.throw()
+        .with.property('message', message)
+    })
 })

test/specs/wrapper/is.spec.js

@@ -67,7 +67,10 @@ describeWithShallowAndMount('is', mountingMethod => {
   })
 
   it('returns true if root node matches Component extending class component', () => {
-    const wrapper = mountingMethod(ComponentAsAClass)
+    const wrapper = mountingMethod(ComponentAsAClass, {
+      mocks: false,
+      stubs: false
+    })
 
     expect(wrapper.is(ComponentAsAClass)).to.equal(true)
   })