From a3a3e80f7144a0fcee9c67c16d79b5ce43b34deb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Renato=20de=20Le=C3=A3o?= <renatodeleao@gmail.com>
Date: Wed, 4 Jan 2023 10:24:26 +0000
Subject: [PATCH] fix: exclude Options API components with setup() from the
 proxy mock workaround

* test: add failing global mocks scenario
* fix: exclude OAPI components with setup() from the proxy mock workaround
* refactor: wrap <script setup> assertion into isScriptSetup util and use it
- drop hasSetupState check, if a component is <script setup> it always has setup state
- do note that isScriptSetup and hasSetupState check for different things. I tried to replaced hasSetupScript with isScriptSetup but some specs around expose started to fail so we are required to keep it for now.
---
 src/mount.ts                        |  7 +++++--
 src/utils.ts                        | 11 +++++++++++
 tests/mountingOptions/mocks.spec.ts | 25 +++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/mount.ts b/src/mount.ts
index 27735767c..a19add731 100644
--- a/src/mount.ts
+++ b/src/mount.ts
@@ -33,7 +33,7 @@ import { MountingOptions, Slot } from './types'
 import {
   getComponentsFromStubs,
   getDirectivesFromStubs,
-  hasSetupState,
+  isScriptSetup,
   isFunctionalComponent,
   isObject,
   isObjectComponent,
@@ -482,7 +482,10 @@ export function mount(
         // otherwise we run into a proxy set error
         // due to https://github.com/vuejs/core/commit/f73925d76a76ee259749b8b48cb68895f539a00f#diff-ea4d1ddabb7e22e17e80ada458eef70679af4005df2a1a6b73418fec897603ceR404
         // introduced in Vue v3.2.45
-        if (hasSetupState(this)) {
+        // Also ensures not to include option API components in this block
+        // since they can also have setup state but need to be patched using
+        // the regular method.
+        if (isScriptSetup(this)) {
           // add the mocks to setupState
           for (const [k, v] of Object.entries(
             global.mocks as { [key: string]: any }
diff --git a/src/utils.ts b/src/utils.ts
index be0cad37b..058124ec6 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -185,6 +185,7 @@ export function getDirectivesFromStubs(
       .map(([key, value]) => [key.substring(1), value])
   ) as Record<string, Directive>
 }
+
 export function hasSetupState(
   vm: ComponentPublicInstance
 ): vm is ComponentPublicInstance & {
@@ -195,3 +196,13 @@ export function hasSetupState(
     (vm.$ as unknown as { devtoolsRawSetupState: any }).devtoolsRawSetupState
   )
 }
+
+export function isScriptSetup(
+  vm: ComponentPublicInstance
+): vm is ComponentPublicInstance & {
+  $: { setupState: Record<string, unknown> }
+} {
+  return (
+    vm && (vm.$ as unknown as { setupState: any }).setupState.__isScriptSetup
+  )
+}
diff --git a/tests/mountingOptions/mocks.spec.ts b/tests/mountingOptions/mocks.spec.ts
index 2d9d410b1..c07bb5937 100644
--- a/tests/mountingOptions/mocks.spec.ts
+++ b/tests/mountingOptions/mocks.spec.ts
@@ -101,4 +101,29 @@ describe('mocks', () => {
     expect(wrapper.text()).toContain('hello')
     expect(wrapper.text()).toContain('mocked')
   })
+
+  it('mocks a global function in an option component which includes the setup() option', () => {
+    const ComponentWithI18nAndSetupOption = defineComponent({
+      setup: () => ({
+        hello: 'hello'
+      }),
+      template: `
+        <div>{{ hello }}</div>
+        <!-- this emulates components that use a global function like $t for i18n -->
+        <!-- this function can be mocked using global.mocks -->
+        <div>{{ $t('world') }}</div>
+      `
+    })
+
+    const wrapper = mount(ComponentWithI18nAndSetupOption, {
+      global: {
+        mocks: {
+          $t: () => 'mocked'
+        }
+      }
+    })
+
+    expect(wrapper.text()).toContain('hello')
+    expect(wrapper.text()).toContain('mocked')
+  })
 })