From d11f04b1e958c0c6d19709da0ae1e815ad76462f Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Wed, 17 Nov 2021 22:20:39 +1000
Subject: [PATCH 1/9] update

---
 tests/components/PropWithSymbol.vue | 13 +++++++++++++
 tests/props.spec.ts                 | 23 +++++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 tests/components/PropWithSymbol.vue

diff --git a/tests/components/PropWithSymbol.vue b/tests/components/PropWithSymbol.vue
new file mode 100644
index 000000000..e24f8cf2e
--- /dev/null
+++ b/tests/components/PropWithSymbol.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>Symbol: {{$props.sym}}</div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  sym?: Symbol
+}
+
+withDefaults(defineProps<Props>(), {
+  sym: () => Symbol()
+})
+</script>
diff --git a/tests/props.spec.ts b/tests/props.spec.ts
index 968ef48fd..b28e5a930 100644
--- a/tests/props.spec.ts
+++ b/tests/props.spec.ts
@@ -1,5 +1,6 @@
 import { mount } from '../src'
 import WithProps from './components/WithProps.vue'
+import PropWithSymbol from './components/PropWithSymbol.vue'
 import Hello from './components/Hello.vue'
 import { defineComponent, h } from 'vue'
 
@@ -224,4 +225,26 @@ describe('props', () => {
 
     expect(wrapper.text()).toEqual('hello')
   })
+
+  it('works with Symbol as default', () => {
+    const Comp = defineComponent({
+      template: `<div>Symbol: {{ sym }}</div>`,
+      props: {
+        sym: {
+          type: Symbol,
+          default: () => Symbol()
+        }
+      }
+    })
+
+    const wrapper = mount(Comp, { shallow: true })
+
+    expect(wrapper.html()).toBe('<div>Symbol: Symbol()</div>')
+  })
+
+  it('works with Symbol as default from SFC', () => {
+    const wrapper = mount(PropWithSymbol, { shallow: true })
+
+    expect(wrapper.html()).toBe('<div>Symbol: Symbol()</div>')
+  })
 })

From 84670a656f2c1f335b73bdb5c212dae542fb77af Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Wed, 17 Nov 2021 22:52:34 +1000
Subject: [PATCH 2/9] repro

---
 tests/props.spec.ts | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/tests/props.spec.ts b/tests/props.spec.ts
index b28e5a930..5fa068757 100644
--- a/tests/props.spec.ts
+++ b/tests/props.spec.ts
@@ -1,4 +1,4 @@
-import { mount } from '../src'
+import { mount, shallowMount } from '../src'
 import WithProps from './components/WithProps.vue'
 import PropWithSymbol from './components/PropWithSymbol.vue'
 import Hello from './components/Hello.vue'
@@ -237,13 +237,22 @@ describe('props', () => {
       }
     })
 
-    const wrapper = mount(Comp, { shallow: true })
+    const wrapper = shallowMount(Comp)
 
     expect(wrapper.html()).toBe('<div>Symbol: Symbol()</div>')
   })
 
-  it('works with Symbol as default from SFC', () => {
-    const wrapper = mount(PropWithSymbol, { shallow: true })
+  it.only('works with symbol as default from SFC', () => {
+    const App = defineComponent({
+      template: `<PropWithSymbol :sym="sym" />`,
+      components: { PropWithSymbol },
+      data() {
+        return {
+          sym: Symbol()
+        }
+      }
+    })
+    const wrapper = shallowMount(App)
 
     expect(wrapper.html()).toBe('<div>Symbol: Symbol()</div>')
   })

From 4ddcd224f2ccac733a17aa398fcf0d82dd5b4fee Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Thu, 18 Nov 2021 09:43:46 +1000
Subject: [PATCH 3/9] fix

---
 src/stubs.ts        | 29 +++++++++++++++++++++++------
 tests/props.spec.ts |  2 +-
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/stubs.ts b/src/stubs.ts
index a2747fc98..107b7e0cb 100644
--- a/src/stubs.ts
+++ b/src/stubs.ts
@@ -21,7 +21,7 @@ import { Stub, Stubs } from './types'
 
 interface StubOptions {
   name: string
-  propsDeclaration?: ComponentPropsOptions
+  propsDeclaration: ComponentPropsOptions
   renderStubDefaultSlot?: boolean
 }
 
@@ -50,8 +50,23 @@ export const createStub = ({
   const anonName = 'anonymous-stub'
   const tag = name ? `${hyphenate(name)}-stub` : anonName
 
-  const render = (ctx: ComponentPublicInstance) => {
-    return h(tag, ctx.$props, renderStubDefaultSlot ? ctx.$slots : undefined)
+  const render = (ctx: ComponentPublicInstance<ComponentPropsOptions>) => {
+    // https://github.com/vuejs/vue-test-utils-next/issues/1076
+    // Passing a symbol as a static prop is not legal, since Vue will try to do
+    // something like `el.setAttribute('val', Symbol())` which is not valid and
+    // causes an error.
+    // Only a problem when shallow mounting. For this reason we iterate of the
+    // props that will be passed and remove any that are symbols.
+    let propsWithoutSymbols = Object.keys(ctx.$props).reduce<typeof ctx.$props>((acc, key) => {
+      const $props = ctx.$props as Record<string, any>
+      if (typeof $props[key] === 'symbol') {
+        return acc
+      }
+      return {...acc, [key]: $props[key]}
+    }, {}) as typeof ctx.$props
+
+    // @ts-ignore
+    return h(tag, propsWithoutSymbols, renderStubDefaultSlot ? ctx.$slots : undefined)
   }
 
   return defineComponent({
@@ -62,7 +77,7 @@ export const createStub = ({
   })
 }
 
-const createTransitionStub = ({ name }: StubOptions) => {
+const createTransitionStub = ({ name, propsDeclaration }: StubOptions) => {
   const render = (ctx: ComponentPublicInstance) => {
     return h(name, {}, ctx.$slots)
   }
@@ -164,7 +179,8 @@ export function stubComponents(
     if (type === Transition && 'transition' in stubs && stubs['transition']) {
       return [
         createTransitionStub({
-          name: 'transition-stub'
+          name: 'transition-stub',
+          propsDeclaration: {}
         }),
         undefined,
         children
@@ -179,7 +195,8 @@ export function stubComponents(
     ) {
       return [
         createTransitionStub({
-          name: 'transition-group-stub'
+          name: 'transition-group-stub',
+          propsDeclaration: {}
         }),
         undefined,
         children
diff --git a/tests/props.spec.ts b/tests/props.spec.ts
index 5fa068757..370597b84 100644
--- a/tests/props.spec.ts
+++ b/tests/props.spec.ts
@@ -254,6 +254,6 @@ describe('props', () => {
     })
     const wrapper = shallowMount(App)
 
-    expect(wrapper.html()).toBe('<div>Symbol: Symbol()</div>')
+    expect(wrapper.html()).toBe('<prop-with-symbol-stub></prop-with-symbol-stub>')
   })
 })

From e0f372fb809269cb60a48de1474493929f7faf65 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Thu, 18 Nov 2021 10:01:51 +1000
Subject: [PATCH 4/9] fix bug with symbols

---
 src/stubs.ts        | 25 ++++++++++--------
 tests/props.spec.ts | 62 +++++++++++++++++++++++++++++----------------
 2 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/stubs.ts b/src/stubs.ts
index 107b7e0cb..52ee8803f 100644
--- a/src/stubs.ts
+++ b/src/stubs.ts
@@ -7,7 +7,8 @@ import {
   defineComponent,
   VNodeTypes,
   ConcreteComponent,
-  ComponentPropsOptions
+  ComponentPropsOptions,
+  ComponentObjectPropsOptions
 } from 'vue'
 import { hyphenate } from './utils/vueShared'
 import { matchName } from './utils/matchName'
@@ -42,6 +43,17 @@ const shouldNotStub = (type: ConcreteComponent) => doNotStubComponents.has(type)
 export const addToDoNotStubComponents = (type: ConcreteComponent) =>
   doNotStubComponents.add(type)
 
+const removeSymbols = <T = ComponentPropsOptions>(props: T): T  => {
+  // props are always normalized to object syntax
+  const $props = props as unknown as ComponentObjectPropsOptions
+  return Object.keys($props).reduce((acc, key) => {
+    if (typeof $props[key] === 'symbol') {
+      return acc
+    }
+    return {...acc, [key]: $props[key]}
+  }, {}) as T
+}
+
 export const createStub = ({
   name,
   propsDeclaration,
@@ -50,22 +62,15 @@ export const createStub = ({
   const anonName = 'anonymous-stub'
   const tag = name ? `${hyphenate(name)}-stub` : anonName
 
-  const render = (ctx: ComponentPublicInstance<ComponentPropsOptions>) => {
+  const render = (ctx: ComponentPublicInstance) => {
     // https://github.com/vuejs/vue-test-utils-next/issues/1076
     // Passing a symbol as a static prop is not legal, since Vue will try to do
     // something like `el.setAttribute('val', Symbol())` which is not valid and
     // causes an error.
     // Only a problem when shallow mounting. For this reason we iterate of the
     // props that will be passed and remove any that are symbols.
-    let propsWithoutSymbols = Object.keys(ctx.$props).reduce<typeof ctx.$props>((acc, key) => {
-      const $props = ctx.$props as Record<string, any>
-      if (typeof $props[key] === 'symbol') {
-        return acc
-      }
-      return {...acc, [key]: $props[key]}
-    }, {}) as typeof ctx.$props
+    const propsWithoutSymbols = removeSymbols(ctx.$props)
 
-    // @ts-ignore
     return h(tag, propsWithoutSymbols, renderStubDefaultSlot ? ctx.$slots : undefined)
   }
 
diff --git a/tests/props.spec.ts b/tests/props.spec.ts
index 370597b84..511b5c131 100644
--- a/tests/props.spec.ts
+++ b/tests/props.spec.ts
@@ -226,34 +226,52 @@ describe('props', () => {
     expect(wrapper.text()).toEqual('hello')
   })
 
-  it('works with Symbol as default', () => {
-    const Comp = defineComponent({
-      template: `<div>Symbol: {{ sym }}</div>`,
-      props: {
-        sym: {
-          type: Symbol,
-          default: () => Symbol()
+  describe('edge case with symbol props and stubs', () => {
+    it('works with Symbol as default', () => {
+      const Comp = defineComponent({
+        template: `<div>Symbol: {{ sym }}</div>`,
+        props: {
+          sym: {
+            type: Symbol,
+            default: () => Symbol()
+          }
         }
-      }
-    })
+      })
 
-    const wrapper = shallowMount(Comp)
+      const wrapper = shallowMount(Comp)
 
-    expect(wrapper.html()).toBe('<div>Symbol: Symbol()</div>')
-  })
+      expect(wrapper.html()).toBe('<div>Symbol: Symbol()</div>')
+    })
 
-  it.only('works with symbol as default from SFC', () => {
-    const App = defineComponent({
-      template: `<PropWithSymbol :sym="sym" />`,
-      components: { PropWithSymbol },
-      data() {
-        return {
-          sym: Symbol()
+    it('works with Symbol an array syntax', () => {
+      const Comp = defineComponent({
+        name: 'Comp',
+        template: `<div>Symbol: {{ sym }}</div>`,
+        props: ['sym']
+      })
+
+      const wrapper = shallowMount({
+        render () {
+          return h(Comp, { sym: Symbol() })
         }
-      }
+      })
+
+      expect(wrapper.html()).toBe('<comp-stub></comp-stub>')
     })
-    const wrapper = shallowMount(App)
 
-    expect(wrapper.html()).toBe('<prop-with-symbol-stub></prop-with-symbol-stub>')
+    it('works with symbol as default from SFC', () => {
+      const App = defineComponent({
+        template: `<PropWithSymbol :sym="sym" />`,
+        components: { PropWithSymbol },
+        data() {
+          return {
+            sym: Symbol()
+          }
+        }
+      })
+      const wrapper = shallowMount(App)
+
+      expect(wrapper.html()).toBe('<prop-with-symbol-stub></prop-with-symbol-stub>')
+    })
   })
 })

From f051b60821ec49c9aca3241945e6ce99ee961544 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Thu, 18 Nov 2021 10:25:06 +1000
Subject: [PATCH 5/9] lint

---
 src/stubs.ts                        | 10 +++++++---
 tests/components/PropWithSymbol.vue |  2 +-
 tests/props.spec.ts                 |  6 ++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/stubs.ts b/src/stubs.ts
index 52ee8803f..6f1822e00 100644
--- a/src/stubs.ts
+++ b/src/stubs.ts
@@ -43,14 +43,14 @@ const shouldNotStub = (type: ConcreteComponent) => doNotStubComponents.has(type)
 export const addToDoNotStubComponents = (type: ConcreteComponent) =>
   doNotStubComponents.add(type)
 
-const removeSymbols = <T = ComponentPropsOptions>(props: T): T  => {
+const removeSymbols = <T = ComponentPropsOptions>(props: T): T => {
   // props are always normalized to object syntax
   const $props = props as unknown as ComponentObjectPropsOptions
   return Object.keys($props).reduce((acc, key) => {
     if (typeof $props[key] === 'symbol') {
       return acc
     }
-    return {...acc, [key]: $props[key]}
+    return { ...acc, [key]: $props[key] }
   }, {}) as T
 }
 
@@ -71,7 +71,11 @@ export const createStub = ({
     // props that will be passed and remove any that are symbols.
     const propsWithoutSymbols = removeSymbols(ctx.$props)
 
-    return h(tag, propsWithoutSymbols, renderStubDefaultSlot ? ctx.$slots : undefined)
+    return h(
+      tag,
+      propsWithoutSymbols,
+      renderStubDefaultSlot ? ctx.$slots : undefined
+    )
   }
 
   return defineComponent({
diff --git a/tests/components/PropWithSymbol.vue b/tests/components/PropWithSymbol.vue
index e24f8cf2e..aea5e64fc 100644
--- a/tests/components/PropWithSymbol.vue
+++ b/tests/components/PropWithSymbol.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>Symbol: {{$props.sym}}</div>
+  <div>Symbol: {{ $props.sym }}</div>
 </template>
 
 <script lang="ts" setup>
diff --git a/tests/props.spec.ts b/tests/props.spec.ts
index 511b5c131..772cd5f40 100644
--- a/tests/props.spec.ts
+++ b/tests/props.spec.ts
@@ -251,7 +251,7 @@ describe('props', () => {
       })
 
       const wrapper = shallowMount({
-        render () {
+        render() {
           return h(Comp, { sym: Symbol() })
         }
       })
@@ -271,7 +271,9 @@ describe('props', () => {
       })
       const wrapper = shallowMount(App)
 
-      expect(wrapper.html()).toBe('<prop-with-symbol-stub></prop-with-symbol-stub>')
+      expect(wrapper.html()).toBe(
+        '<prop-with-symbol-stub></prop-with-symbol-stub>'
+      )
     })
   })
 })

From 63514b4d14ee44e66399f21063db10eb7fc4b225 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 13 Dec 2021 19:29:14 +1000
Subject: [PATCH 6/9] render symbol in stub

---
 src/stubs.ts        | 4 ++--
 tests/props.spec.ts | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/stubs.ts b/src/stubs.ts
index 6f1822e00..dab6ddcd8 100644
--- a/src/stubs.ts
+++ b/src/stubs.ts
@@ -48,7 +48,7 @@ const removeSymbols = <T = ComponentPropsOptions>(props: T): T => {
   const $props = props as unknown as ComponentObjectPropsOptions
   return Object.keys($props).reduce((acc, key) => {
     if (typeof $props[key] === 'symbol') {
-      return acc
+      return {...acc, [key]: $props[key]?.toString()}
     }
     return { ...acc, [key]: $props[key] }
   }, {}) as T
@@ -86,7 +86,7 @@ export const createStub = ({
   })
 }
 
-const createTransitionStub = ({ name, propsDeclaration }: StubOptions) => {
+const createTransitionStub = ({ name }: StubOptions) => {
   const render = (ctx: ComponentPublicInstance) => {
     return h(name, {}, ctx.$slots)
   }
diff --git a/tests/props.spec.ts b/tests/props.spec.ts
index 772cd5f40..f4788c3e1 100644
--- a/tests/props.spec.ts
+++ b/tests/props.spec.ts
@@ -243,7 +243,7 @@ describe('props', () => {
       expect(wrapper.html()).toBe('<div>Symbol: Symbol()</div>')
     })
 
-    it('works with Symbol an array syntax', () => {
+    it('works with symbol as array syntax', () => {
       const Comp = defineComponent({
         name: 'Comp',
         template: `<div>Symbol: {{ sym }}</div>`,
@@ -256,7 +256,7 @@ describe('props', () => {
         }
       })
 
-      expect(wrapper.html()).toBe('<comp-stub></comp-stub>')
+      expect(wrapper.html()).toBe('<comp-stub sym="Symbol()"></comp-stub>')
     })
 
     it('works with symbol as default from SFC', () => {
@@ -272,7 +272,7 @@ describe('props', () => {
       const wrapper = shallowMount(App)
 
       expect(wrapper.html()).toBe(
-        '<prop-with-symbol-stub></prop-with-symbol-stub>'
+        '<prop-with-symbol-stub sym="Symbol()"></prop-with-symbol-stub>'
       )
     })
   })

From deee71ed8acd3efe83ee277e58048af62c63265a Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 13 Dec 2021 19:31:25 +1000
Subject: [PATCH 7/9] lint

---
 src/stubs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stubs.ts b/src/stubs.ts
index dab6ddcd8..e1e488913 100644
--- a/src/stubs.ts
+++ b/src/stubs.ts
@@ -48,7 +48,7 @@ const removeSymbols = <T = ComponentPropsOptions>(props: T): T => {
   const $props = props as unknown as ComponentObjectPropsOptions
   return Object.keys($props).reduce((acc, key) => {
     if (typeof $props[key] === 'symbol') {
-      return {...acc, [key]: $props[key]?.toString()}
+      return { ...acc, [key]: $props[key]?.toString() }
     }
     return { ...acc, [key]: $props[key] }
   }, {}) as T

From 232bf57c86eac2f6aaf969ea40748141b05343ac Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 13 Dec 2021 22:25:46 +1000
Subject: [PATCH 8/9] revert un-needed changes

---
 src/stubs.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/stubs.ts b/src/stubs.ts
index e1e488913..79aea4c47 100644
--- a/src/stubs.ts
+++ b/src/stubs.ts
@@ -22,7 +22,7 @@ import { Stub, Stubs } from './types'
 
 interface StubOptions {
   name: string
-  propsDeclaration: ComponentPropsOptions
+  propsDeclaration?: ComponentPropsOptions
   renderStubDefaultSlot?: boolean
 }
 
@@ -43,7 +43,7 @@ const shouldNotStub = (type: ConcreteComponent) => doNotStubComponents.has(type)
 export const addToDoNotStubComponents = (type: ConcreteComponent) =>
   doNotStubComponents.add(type)
 
-const removeSymbols = <T = ComponentPropsOptions>(props: T): T => {
+const stringifySymbols = (props: ComponentPropsOptions) => {
   // props are always normalized to object syntax
   const $props = props as unknown as ComponentObjectPropsOptions
   return Object.keys($props).reduce((acc, key) => {
@@ -51,7 +51,7 @@ const removeSymbols = <T = ComponentPropsOptions>(props: T): T => {
       return { ...acc, [key]: $props[key]?.toString() }
     }
     return { ...acc, [key]: $props[key] }
-  }, {}) as T
+  }, {})
 }
 
 export const createStub = ({
@@ -68,8 +68,8 @@ export const createStub = ({
     // something like `el.setAttribute('val', Symbol())` which is not valid and
     // causes an error.
     // Only a problem when shallow mounting. For this reason we iterate of the
-    // props that will be passed and remove any that are symbols.
-    const propsWithoutSymbols = removeSymbols(ctx.$props)
+    // props that will be passed and stringify any that are symbols.
+    const propsWithoutSymbols = stringifySymbols(ctx.$props)
 
     return h(
       tag,
@@ -189,7 +189,6 @@ export function stubComponents(
       return [
         createTransitionStub({
           name: 'transition-stub',
-          propsDeclaration: {}
         }),
         undefined,
         children
@@ -205,7 +204,6 @@ export function stubComponents(
       return [
         createTransitionStub({
           name: 'transition-group-stub',
-          propsDeclaration: {}
         }),
         undefined,
         children

From a54b1dadb937e9aa2ba3eeb0331974f888c2f927 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 13 Dec 2021 22:25:58 +1000
Subject: [PATCH 9/9] prettier

---
 src/stubs.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stubs.ts b/src/stubs.ts
index 79aea4c47..c1d0c555a 100644
--- a/src/stubs.ts
+++ b/src/stubs.ts
@@ -188,7 +188,7 @@ export function stubComponents(
     if (type === Transition && 'transition' in stubs && stubs['transition']) {
       return [
         createTransitionStub({
-          name: 'transition-stub',
+          name: 'transition-stub'
         }),
         undefined,
         children
@@ -203,7 +203,7 @@ export function stubComponents(
     ) {
       return [
         createTransitionStub({
-          name: 'transition-group-stub',
+          name: 'transition-group-stub'
         }),
         undefined,
         children