Merge pull request #185 from vuejs/feature/add-warning

chore: add warning about emitted on functional components

Author: lmiller1990

src/mount.ts

@@ -14,7 +14,6 @@ import {
   ExtractPropTypes,
   Component,
   WritableComputedOptions,
-  ComponentOptionsBase,
   ComponentPropsOptions,
   AppConfig,
   VNodeProps,
@@ -23,7 +22,7 @@ import {
 
 import { config } from './config'
 import { GlobalMountOptions } from './types'
-import { mergeGlobalProperties } from './utils'
+import { mergeGlobalProperties, isFunctionalComponent } from './utils'
 import { processSlot } from './utils/compileSlots'
 import { createWrapper, VueWrapper } from './vueWrapper'
 import { attachEmitListener } from './emitMixin'
@@ -358,7 +357,14 @@ export function mount(
   const vm = app.mount(el)
 
   const App = vm.$refs[MOUNT_COMPONENT_REF] as ComponentPublicInstance
-  return createWrapper(app, App, setProps)
+  return createWrapper(
+    app,
+    App,
+    {
+      isFunctionalComponent: isFunctionalComponent(originalComponent)
+    },
+    setProps
+  )
 }
 
 export const shallowMount: typeof mount = (component: any, options?: any) => {

src/types.ts

@@ -29,3 +29,7 @@ export type GlobalMountOptions = {
   directives?: Record<string, Directive>
   stubs?: Record<any, any>
 }
+
+export interface VueWrapperMeta {
+  isFunctionalComponent: boolean
+}

src/utils.ts

@@ -1,5 +1,6 @@
 import { GlobalMountOptions } from './types'
 import { AppConfig } from 'vue'
+
 function mergeStubs(target: Record<string, any>, source: GlobalMountOptions) {
   if (source.stubs) {
     if (Array.isArray(source.stubs)) {
@@ -12,7 +13,7 @@ function mergeStubs(target: Record<string, any>, source: GlobalMountOptions) {
   }
 }
 
-function mergeGlobalProperties(
+export function mergeGlobalProperties(
   configGlobal: GlobalMountOptions = {},
   mountGlobal: GlobalMountOptions = {}
 ): GlobalMountOptions {
@@ -36,4 +37,6 @@ function mergeGlobalProperties(
   }
 }
 
-export { mergeGlobalProperties }
+export function isFunctionalComponent(component: any) {
+  return typeof component === 'function'
+}

src/vueWrapper.ts

@@ -1,28 +1,36 @@
 import { ComponentPublicInstance, nextTick, App } from 'vue'
 import { ShapeFlags } from '@vue/shared'
-import { config } from './config'
 
+import { config } from './config'
 import { DOMWrapper } from './domWrapper'
-import { FindAllComponentsSelector, FindComponentSelector } from './types'
+import {
+  FindAllComponentsSelector,
+  FindComponentSelector,
+  VueWrapperMeta
+} from './types'
 import { createWrapperError } from './errorWrapper'
 import { TriggerOptions } from './createDomEvent'
 import { find } from './utils/find'
+import { isFunctionalComponent } from './utils'
 
 export class VueWrapper<T extends ComponentPublicInstance> {
   private componentVM: T
   private rootVM: ComponentPublicInstance
   private __app: App | null
   private __setProps: ((props: Record<string, any>) => void) | undefined
+  private __isFunctionalComponent: boolean
 
   constructor(
     app: App | null,
     vm: ComponentPublicInstance,
-    setProps?: (props: Record<string, any>) => void
+    setProps?: (props: Record<string, any>) => void,
+    meta?: VueWrapperMeta
   ) {
     this.__app = app
     this.rootVM = vm.$root!
     this.componentVM = vm as T
     this.__setProps = setProps
+    this.__isFunctionalComponent = meta.isFunctionalComponent
     // plugins hook
     config.plugins.VueWrapper.extend(this)
   }
@@ -71,10 +79,17 @@ export class VueWrapper<T extends ComponentPublicInstance> {
   emitted<T = unknown>(): Record<string, T[]>
   emitted<T = unknown>(eventName?: string): T[]
   emitted<T = unknown>(eventName?: string): T[] | Record<string, T[]> {
+    if (this.__isFunctionalComponent) {
+      console.warn(
+        '[Vue Test Utils]: capture events emitted from functional components is currently not supported.'
+      )
+    }
+
     if (eventName) {
       const emitted = (this.vm['__emitted'] as Record<string, T[]>)[eventName]
       return emitted
     }
+
     return this.vm['__emitted'] as Record<string, T[]>
   }
 
@@ -136,13 +151,17 @@ export class VueWrapper<T extends ComponentPublicInstance> {
     if (typeof selector === 'object' && 'ref' in selector) {
       const result = this.vm.$refs[selector.ref]
       if (result) {
-        return createWrapper(null, result as T)
+        return createWrapper(null, result as T, {
+          isFunctionalComponent: isFunctionalComponent(result)
+        })
       }
     }
 
     const result = find(this.vm.$.subTree, selector)
     if (result.length) {
-      return createWrapper(null, result[0])
+      return createWrapper(null, result[0], {
+        isFunctionalComponent: isFunctionalComponent(result)
+      })
     }
 
     return createWrapperError('VueWrapper')
@@ -178,7 +197,11 @@ export class VueWrapper<T extends ComponentPublicInstance> {
   }
 
   findAllComponents(selector: FindAllComponentsSelector): VueWrapper<T>[] {
-    return find(this.vm.$.subTree, selector).map((c) => createWrapper(null, c))
+    return find(this.vm.$.subTree, selector).map((c) =>
+      createWrapper(null, c, {
+        isFunctionalComponent: isFunctionalComponent(c)
+      })
+    )
   }
 
   findAll<K extends keyof HTMLElementTagNameMap>(
@@ -228,7 +251,8 @@ export class VueWrapper<T extends ComponentPublicInstance> {
 export function createWrapper<T extends ComponentPublicInstance>(
   app: App | null,
   vm: ComponentPublicInstance,
+  meta: VueWrapperMeta,
   setProps?: (props: Record<string, any>) => void
 ): VueWrapper<T> {
-  return new VueWrapper<T>(app, vm, setProps)
+  return new VueWrapper<T>(app, vm, setProps, meta)
 }

tests/emit.spec.ts

@@ -3,6 +3,17 @@ import { defineComponent, h } from 'vue'
 import { mount } from '../src'
 
 describe('emitted', () => {
+  let consoleWarnSave = console.info
+
+  beforeEach(() => {
+    consoleWarnSave = console.warn
+    console.warn = jest.fn()
+  })
+
+  afterEach(() => {
+    console.warn = consoleWarnSave
+  })
+
   it('captures events emitted via this.$emit', () => {
     const Component = defineComponent({
       render() {
@@ -121,4 +132,16 @@ describe('emitted', () => {
 
     expect(wrapper.emitted('hello')).toHaveLength(2)
   })
+
+  it('gives a useful warning for functional components', () => {
+    const Component = (_, ctx) => {
+      return h('button', { onClick: () => ctx.emit('hello', 'foo', 'bar') })
+    }
+
+    mount(Component).emitted()
+
+    expect(console.warn).toHaveBeenCalledWith(
+      '[Vue Test Utils]: capture events emitted from functional components is currently not supported.'
+    )
+  })
 })