feat: allow mocks and methods to be set in config object (#531)

Author: lmiller1990

docs/.eslintrc

@@ -14,6 +14,7 @@
   },
   "rules": {
     "no-unused-vars": 0,
-    "no-undef": 0
+    "no-undef": 0,
+    "no-labels": 0
   }
 }

docs/en/api/config.md

@@ -24,3 +24,39 @@ import VueTestUtils from '@vue/test-utils'
 
 VueTestUtils.config.stubs['my-component'] = '<div />'
 ```
+
+### `mocks`
+
+- type: `Object`
+- default: `{}`
+
+Like `stubs`, the values passed to `config.mocks` are used by default. Any values passed to the mounting options `mocks` object will take priority over the ones declared in `config.mocks`.
+
+Example:
+
+```js
+import VueTestUtils from '@vue/test-utils'
+
+VueTestUtils.config.mocks['$store'] = {
+  state: {
+    id: 1
+  }
+}
+```
+
+### `methods`
+
+- type: `Object`
+- default: `{}`
+
+You can configure default methods using the `config` object. This can be useful for plugins that inject methods to components, like [VeeValidate](https://vee-validate.logaretm.com/). You can override methods set in `config` by passing `methods` in the mounting options.
+
+Example:
+
+```js
+import VueTestUtils from '@vue/test-utils'
+
+VueTestUtils.config.methods['errors'] = () => {
+  any: () => false
+}
+```

flow/options.flow.js

@@ -1,6 +1,7 @@
 declare type Options = { // eslint-disable-line no-undef
     attachToDocument?: boolean,
     mocks?: Object,
+    methods?: Object,
     slots?: Object,
     scopedSlots?: Object,
     localVue?: Component,

packages/shared/merge-options.js

@@ -1,16 +1,16 @@
 // @flow
 
-function getStubs (optionStubs, config) {
-  if (optionStubs ||
-    (config.stubs && Object.keys(config.stubs).length > 0)) {
-    if (Array.isArray(optionStubs)) {
+function getOptions (key, options, config) {
+  if (options ||
+    (config[key] && Object.keys(config[key]).length > 0)) {
+    if (Array.isArray(options)) {
       return [
-        ...optionStubs,
-        ...Object.keys(config.stubs || {})]
+        ...options,
+        ...Object.keys(config[key] || {})]
     } else {
       return {
-        ...config.stubs,
-        ...optionStubs
+        ...config[key],
+        ...options
       }
     }
   }
@@ -22,6 +22,9 @@ export function mergeOptions (
 ): Options {
   return {
     ...options,
-    stubs: getStubs(options.stubs, config)
+    stubs: getOptions('stubs', options.stubs, config),
+    mocks: getOptions('mocks', options.mocks, config),
+    methods: getOptions('methods', options.methods, config)
   }
 }
+

packages/test-utils/src/config.js

@@ -5,5 +5,7 @@ export default {
   stubs: {
     transition: TransitionStub,
     'transition-group': TransitionGroupStub
-  }
+  },
+  mocks: {},
+  methods: {}
 }

test/specs/config.spec.js

@@ -2,7 +2,8 @@ import {
   mount,
   config,
   TransitionStub,
-  TransitionGroupStub
+  TransitionGroupStub,
+  createLocalVue
 } from '~vue/test-utils'
 
 describe('config', () => {
@@ -33,6 +34,44 @@ describe('config', () => {
     expect(wrapper.contains(TransitionGroupStub)).to.equal(true)
   })
 
+  it('mocks a global variable', () => {
+    const localVue = createLocalVue()
+    const t = 'real value'
+    localVue.prototype.$t = t
+
+    const testComponent = {
+      template: `
+        <div>{{ $t }}</div>
+      `
+    }
+
+    config.mocks['$t'] = 'mock value'
+
+    const wrapper = mount(testComponent, {
+      localVue, t
+    })
+
+    expect(wrapper.vm.$t).to.equal('mock value')
+    expect(wrapper.text()).to.equal('mock value')
+
+    localVue.prototype.$t = undefined
+  })
+
+  it('overrides a method', () => {
+    const testComponent = {
+      template: `
+        <div>{{ val() }}</div>
+      `
+    }
+
+    config.methods['val'] = () => 'method'
+
+    const wrapper = mount(testComponent)
+
+    expect(wrapper.vm.val()).to.equal('method')
+    expect(wrapper.text()).to.equal('method')
+  })
+
   it('doesn\'t stub transition when config.stubs.transition is set to false', () => {
     const testComponent = {
       template: `

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

@@ -0,0 +1,29 @@
+import { config } from '~vue/test-utils'
+import {
+  describeWithMountingMethods
+} from '~resources/utils'
+
+describeWithMountingMethods('options.methods', (mountingMethod) => {
+  it('prioritize mounting options over config', () => {
+    config.methods['val'] = () => 'methodFromConfig'
+
+    const TestComponent = {
+      template: `
+        <div>{{ val() }}</div>
+      `
+    }
+
+    const wrapper = mountingMethod(TestComponent, {
+      methods: {
+        val () {
+          return 'methodFromOptions'
+        }
+      }
+    })
+    const HTML = mountingMethod.name === 'renderToString'
+      ? wrapper
+      : wrapper.html()
+    console.log(wrapper)
+    expect(HTML).to.contain('methodFromOptions')
+  })
+})

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

@@ -1,4 +1,4 @@
-import { createLocalVue } from '~vue/test-utils'
+import { createLocalVue, config } from '~vue/test-utils'
 import Component from '~resources/components/component.vue'
 import ComponentWithVuex from '~resources/components/component-with-vuex.vue'
 import {
@@ -7,6 +7,17 @@ import {
 } from '~resources/utils'
 
 describeWithMountingMethods('options.mocks', (mountingMethod) => {
+  let configMocksSave
+
+  beforeEach(() => {
+    configMocksSave = config.mocks
+    config.mocks = {}
+  })
+
+  afterEach(() => {
+    config.mocks = configMocksSave
+  })
+
   it('adds variables to vm when passed', () => {
     const TestComponent = {
       template: `
@@ -127,6 +138,27 @@ describeWithMountingMethods('options.mocks', (mountingMethod) => {
     error.restore()
   })
 
+  it('prioritize mounting options over config', () => {
+    config.mocks['$global'] = 'globallyMockedValue'
+
+    const TestComponent = {
+      template: `
+        <div>{{ $global }}</div>
+      `
+    }
+
+    const wrapper = mountingMethod(TestComponent, {
+      mocks: {
+        '$global': 'locallyMockedValue'
+      }
+    })
+    const HTML = mountingMethod.name === 'renderToString'
+      ? wrapper
+      : wrapper.html()
+    console.log(wrapper)
+    expect(HTML).to.contain('locallyMockedValue')
+  })
+
   it('logs that a property cannot be overwritten if there are problems writing', () => {
     const error = sinon.stub(console, 'error')
     const localVue = createLocalVue()