fix: allow mounting functional components (#118)

* fix: allow mounting functional components

* Apply suggestions from code review

Co-authored-by: Carlos Rodrigues <[email protected]>

Co-authored-by: Carlos Rodrigues <[email protected]>

src/mount.ts

@@ -6,6 +6,7 @@ import {
   VNodeNormalizedChildren,
   transformVNodeArgs,
   reactive,
+  FunctionalComponent,
   ComponentPublicInstance,
   ComponentOptionsWithObjectProps,
   ComponentOptionsWithArrayProps,
@@ -53,6 +54,11 @@ type ExtractComponent<T> = T extends { new (): infer PublicInstance }
   ? PublicInstance
   : any
 
+// Functional component
+export function mount<TestedComponent extends FunctionalComponent>(
+  originalComponent: TestedComponent,
+  options?: MountingOptions<any>
+): VueWrapper<ComponentPublicInstance>
 // Component declared with defineComponent
 export function mount<TestedComponent extends ComponentPublicInstance>(
   originalComponent: { new (): TestedComponent } & Component,
@@ -80,7 +86,14 @@ export function mount(
   originalComponent: any,
   options?: MountingOptions<any>
 ): VueWrapper<any> {
-  const component = { ...originalComponent }
+  // normalise the incoming component
+  const component =
+    typeof originalComponent === 'function'
+      ? {
+          setup: (_, { attrs, slots }) => () =>
+            h(originalComponent, attrs, slots)
+        }
+      : { ...originalComponent }
 
   const el = document.createElement('div')
   el.id = MOUNT_ELEMENT_ID

tests/functionalComponents.spec.ts

@@ -0,0 +1,57 @@
+import { mount } from '../src'
+import { h } from 'vue'
+import Hello from './components/Hello.vue'
+
+describe('functionalComponents', () => {
+  it('mounts a functional component', () => {
+    const Foo = (props: { msg: string }) =>
+      h('div', { class: 'foo' }, props.msg)
+
+    const wrapper = mount(Foo, {
+      props: {
+        msg: 'foo'
+      }
+    })
+
+    expect(wrapper.html()).toEqual('<div class="foo">foo</div>')
+  })
+
+  it('renders the slots of a functional component', () => {
+    const Foo = (props, { slots }) => h('div', { class: 'foo' }, slots)
+
+    const wrapper = mount(Foo, {
+      slots: {
+        default: 'just text'
+      }
+    })
+
+    expect(wrapper.html()).toEqual('<div class="foo">just text</div>')
+  })
+
+  it('asserts classes', () => {
+    const Foo = (props, { slots }) => h('div', { class: 'foo' }, slots)
+
+    const wrapper = mount(Foo, {
+      attrs: {
+        class: 'extra_classes'
+      }
+    })
+
+    expect(wrapper.classes()).toContain('extra_classes')
+    expect(wrapper.classes()).toContain('foo')
+  })
+
+  it('uses `find`', () => {
+    const Foo = () => h('div', { class: 'foo' }, h(Hello))
+    const wrapper = mount(Foo)
+
+    expect(wrapper.find('#root').exists()).toBe(true)
+  })
+
+  it('uses `findComponent`', () => {
+    const Foo = () => h('div', { class: 'foo' }, h(Hello))
+    const wrapper = mount(Foo)
+
+    expect(wrapper.findComponent(Hello).exists()).toBe(true)
+  })
+})