fix: find functional components in shallow (#408)

Author: eddyerburgh

dist/vue-test-utils.js

@@ -22,8 +22,8 @@
     "setup": "node build/install-hooks.js",
     "test": "npm run lint && npm run lint:docs && npm run flow && npm run test:types && npm run test:unit && npm run test:unit:karma",
     "test:compat": "test/test.sh",
-    "test:unit": "npm run build:test && cross-env BABEL_ENV=test && mocha-webpack --webpack-config build/webpack.test.config.js test/unit/specs --recursive --require test/unit/setup/mocha.setup.js",
-    "test:unit:karma": "npm run build:test && cross-env BABEL_ENV=test TARGET=browser karma start test/unit/setup/karma.conf.js --single-run",
+    "test:unit": "npm run build:test && cross-env BABEL_ENV=test && mocha-webpack --webpack-config build/webpack.test.config.js test/specs --recursive --require test/setup/mocha.setup.js",
+    "test:unit:karma": "npm run build:test && cross-env BABEL_ENV=test TARGET=browser karma start test/setup/karma.conf.js --single-run",
     "test:types": "tsc -p types",
     "release": "bash build/release.sh",
     "release:note": "node build/gen-release-note.js"

package.json

@@ -70,6 +70,10 @@ export function vmFunctionalCtorMatchesSelector (component: VNode, Ctor: Object)
     throwError('find for functional components is not support in Vue < 2.3')
   }
 
+  if (!Ctor) {
+    return false
+  }
+
   if (!component[FUNCTIONAL_OPTIONS]) {
     return false
   }
@@ -86,7 +90,10 @@ export default function findVueComponents (
     const nodes = root._vnode
     ? findAllFunctionalComponentsFromVnode(root._vnode)
     : findAllFunctionalComponentsFromVnode(root)
-    return nodes.filter(node => vmFunctionalCtorMatchesSelector(node, selector._Ctor))
+    return nodes.filter(node =>
+      vmFunctionalCtorMatchesSelector(node, selector._Ctor) ||
+      node[FUNCTIONAL_OPTIONS].name === selector.name
+    )
   }
   const components = root._isVue
     ? findAllVueComponentsFromVm(root)

src/lib/find-vue-components.js

@@ -35,7 +35,8 @@ function getCoreProperties (component: Component): Object {
     staticStyle: component.staticStyle,
     style: component.style,
     normalizedStyle: component.normalizedStyle,
-    nativeOn: component.nativeOn
+    nativeOn: component.nativeOn,
+    functional: component.functional
   }
 }
 function createStubFromString (templateString: string, originalComponent: Component): Object {
@@ -51,7 +52,7 @@ function createStubFromString (templateString: string, originalComponent: Compon
 function createBlankStub (originalComponent: Component) {
   return {
     ...getCoreProperties(originalComponent),
-    render: () => {}
+    render: h => h('')
   }
 }
 
@@ -126,6 +127,7 @@ function stubComponents (components: Object, stubbedComponents: Object) {
   Object.keys(components).forEach(component => {
     // Remove cached constructor
     delete components[component]._Ctor
+    console.log(components[component].name)
     if (!components[component].name) {
       components[component].name = component
     }

src/lib/stub-components.js

@@ -1,4 +1,7 @@
+/* global describe, it*/
+
 import Vue from 'vue'
+import { shallow, mount } from '~vue-test-utils'
 
 export const vueVersion = Number(`${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`)
 
@@ -17,3 +20,29 @@ export function listenersSupported () {
 export function functionalSFCsSupported () {
   return vueVersion >= 2.5
 }
+
+export function describeWithShallowAndMount (spec, cb) {
+  ;[mount, shallow].forEach(method => {
+    describe(`${spec} with ${method.name}`, () => cb(method))
+  })
+}
+
+describeWithShallowAndMount.skip = function (spec, cb) {
+  ;[mount, shallow].forEach(method => {
+    describe.skip(`${spec} with ${method.name}`, () => cb(method))
+  })
+}
+
+describeWithShallowAndMount.only = function (spec, cb) {
+  ;[mount, shallow].forEach(method => {
+    describe.only(`${spec} with ${method.name}`, () => cb(method))
+  })
+}
+
+export function itSkipIf (predicate, spec, cb) {
+  if (predicate) {
+    it.skip(spec, cb)
+  } else {
+    it(spec, cb)
+  }
+}

test/resources/test-utils.js

@@ -1,12 +1,12 @@
-const webpackConfig = require('../../../build/webpack.test.config.js')
+const webpackConfig = require('../../build/webpack.test.config.js')
 
 module.exports = function (config) {
   config.set({
     browsers: ['ChromeHeadless'],
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec'],
     files: [
-      '../../../node_modules/babel-polyfill/dist/polyfill.js',
+      '../../node_modules/babel-polyfill/dist/polyfill.js',
       '../specs/**/*.+(vue|js)'
     ],
     preprocessors: {