Merge pull request #49 from vuejs/feature/mocks

feat: mocks mounting option

src/components/RouterLinkStub.ts

@@ -0,0 +1,17 @@
+import { defineComponent, h } from 'vue'
+
+// TODO: Borrow typings from vue-router-next
+export const RouterLinkStub = defineComponent({
+  name: 'RouterLinkStub',
+
+  props: {
+    to: {
+      type: [String, Object],
+      required: true
+    }
+  },
+
+  render() {
+    return h('a', undefined, this.$slots.default())
+  }
+})

src/index.ts

@@ -1,3 +1,4 @@
 import { mount } from './mount'
+import { RouterLinkStub } from './components/RouterLinkStub'
 
-export { mount }
+export { mount, RouterLinkStub }

src/mount.ts

@@ -8,7 +8,8 @@ import {
   ComponentOptions,
   Plugin,
   Directive,
-  Component
+  Component,
+  getCurrentInstance
 } from 'vue'
 
 import { VueWrapper, createWrapper } from './vue-wrapper'
@@ -28,8 +29,10 @@ interface MountingOptions<Props> {
   global?: {
     plugins?: Plugin[]
     mixins?: ComponentOptions[]
+    mocks?: Record<string, any>
     provide?: Record<any, any>
-    components?: Record<string, Component>
+    // TODO how to type `defineComponent`? Using `any` for now.
+    components?: Record<string, Component | object>
     directives?: Record<string, Directive>
   }
   stubs?: Record<string, any>
@@ -78,6 +81,19 @@ export function mount<P>(
   // create the vm
   const vm = createApp(Parent(options && options.props))
 
+  // global mocks mixin
+  if (options?.global?.mocks) {
+    const mixin = {
+      beforeCreate() {
+        for (const [k, v] of Object.entries(options.global?.mocks)) {
+          this[k] = v
+        }
+      }
+    }
+
+    vm.mixin(mixin)
+  }
+
   // use and plugins from mounting options
   if (options?.global?.plugins) {
     for (const use of options?.global?.plugins) vm.use(use)

tests/mountingOptions/mocks.spec.ts

@@ -0,0 +1,76 @@
+import { mount, RouterLinkStub } from '../../src'
+
+describe('mocks', () => {
+  it('mocks a vuex store', async () => {
+    const Foo = {
+      template: `
+        <div>
+          count: {{ $store.state.count }}
+          <button @click="$store.dispatch('inc')" />
+        </div>
+      `
+    }
+    const $store = {
+      state: {
+        count: 1
+      },
+      dispatch: jest.fn()
+    }
+
+    const wrapper = mount(Foo, {
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    expect(wrapper.html()).toContain('count: 1')
+    await wrapper.find('button').trigger('click')
+    expect($store.dispatch).toHaveBeenCalledWith('inc')
+  })
+
+  it('mocks vue-router', async () => {
+    const Foo = {
+      template: `
+        <div>
+          <RouterLink :to="url">Go to post: {{ id }}</RouterLink>
+          <button @click="submit">Go</button>
+        </div>
+      `,
+      computed: {
+        url() {
+          return `/posts/${this.$route.params.id}`
+        },
+        id() {
+          return this.$route.params.id
+        }
+      },
+      methods: {
+        submit() {
+          this.$router.push(`/posts/${this.id}`)
+        }
+      }
+    }
+
+    const $router = {
+      push: jest.fn()
+    }
+    const $route = {
+      params: {
+        id: 1
+      }
+    }
+
+    const wrapper = mount(Foo, {
+      global: {
+        components: {
+          RouterLink: RouterLinkStub
+        },
+        mocks: { $route, $router }
+      }
+    })
+
+    expect(wrapper.html()).toContain('Go to post: 1')
+    await wrapper.find('button').trigger('click')
+    expect($router.push).toHaveBeenCalledWith('/posts/1')
+  })
+})