fix: always provide access to global property (#2386)

createVMProxy function has been fixed to also return global properties.

Fixes #2140

Author: taku-y-9308

src/vueWrapper.ts

@@ -32,6 +32,13 @@ function createVMProxy<T extends ComponentPublicInstance>(
       } else if (key in setupState) {
         // second if the key is acccessible from the setupState
         return Reflect.get(setupState, key, receiver)
+      } else if (key in vm.$.appContext.config.globalProperties) {
+        // third if the key is a global property
+        return Reflect.get(
+          vm.$.appContext.config.globalProperties,
+          key,
+          receiver
+        )
       } else {
         // vm.$.ctx is the internal context of the vm
         // with all variables, methods and props

tests/components/OptionComponent.vue

@@ -0,0 +1,14 @@
+<script>
+export default {
+  data() {
+    return {
+      message: 'Hello world!'
+    }
+  }
+}
+</script>
+
+<template>
+  <div>{{ message }} (Options API)</div>
+  <div>{{ foo }}</div>
+</template>

tests/components/OptionSetupComponent.vue

@@ -0,0 +1,18 @@
+<script>
+export default {
+  setup() {
+    const description = "Options API with setup() function";
+    return { description };
+  },
+  data() {
+    return {
+      message: "Hello world!",
+    };
+  },
+};
+</script>
+
+<template>
+  <div>{{ message }} ({{ description }})</div>
+  <div>{{ foo }}</div>
+</template>

tests/components/OptionSetupWithoutReturnComponent.vue

@@ -0,0 +1,18 @@
+<script>
+import { onUnmounted } from 'vue'
+
+export default {
+  setup() {
+    onUnmounted(() => { console.log('unmounted') })
+  },
+  data() {
+    return {
+      message: 'Hello world!'
+    }
+  }
+}
+</script>
+
+<template>
+  <div>{{ message }} (Options API component with a setup() function that does not return)</div>
+</template>

tests/mountingOptions/global.plugins.spec.ts

@@ -2,6 +2,10 @@ import { describe, expect, test, it, vi } from 'vitest'
 import { h, App } from 'vue'
 
 import { mount } from '../../src'
+import ScriptSetup from '../components/ScriptSetup.vue'
+import Option from '../components/OptionComponent.vue'
+import OptionsSetup from '../components/OptionSetupComponent.vue'
+import OptionsSetupWithoutReturn from '../components/OptionSetupWithoutReturnComponent.vue'
 
 describe('mounting options: plugins', () => {
   it('installs a plugin via `plugins`', () => {
@@ -51,6 +55,41 @@ describe('mounting options: plugins', () => {
 
     expect(installed).toHaveBeenCalledWith(options, testString)
   })
+
+  describe('provides access to a global property', () => {
+    class Plugin {
+      static install(app: App) {
+        app.config.globalProperties.foo = 'bar'
+      }
+    }
+    it('provides access to a global property from a Composition API component', () => {
+      const wrapper = mount(ScriptSetup, {
+        global: { plugins: [Plugin] }
+      })
+      expect((wrapper.vm as any).foo).toBeDefined()
+    })
+
+    it('provides access to a global property from an Options API component', () => {
+      const wrapper = mount(Option, {
+        global: { plugins: [Plugin] }
+      })
+      expect((wrapper.vm as any).foo).toBeDefined()
+    })
+
+    it('provides access to a global property from an Options API component with a setup() function', () => {
+      const wrapper = mount(OptionsSetup, {
+        global: { plugins: [Plugin] }
+      })
+      expect((wrapper.vm as any).foo).toBeDefined()
+    })
+
+    it('provides access to a global property from an Options API component with a setup() function that does not return', () => {
+      const wrapper = mount(OptionsSetupWithoutReturn, {
+        global: { plugins: [Plugin] }
+      })
+      expect((wrapper.vm as any).foo).toBeDefined()
+    })
+  })
 })
 
 test('installs plugins with and without options', () => {