From 36e30323cebaf08a4b1419a351e0bcc872b0fb67 Mon Sep 17 00:00:00 2001
From: eddyerburgh <edward.yerburgh@gmail.com>
Date: Sun, 29 Jul 2018 12:43:09 +0100
Subject: [PATCH 1/8] refactor: remove window dependency from scoped slots

---
 .../create-instance/create-scoped-slots.js    | 32 ++++++----------
 .../mounting-options/scopedSlots.spec.js      | 38 ++++---------------
 2 files changed, 19 insertions(+), 51 deletions(-)

diff --git a/packages/create-instance/create-scoped-slots.js b/packages/create-instance/create-scoped-slots.js
index 6211fd320..d77ba2ab2 100644
--- a/packages/create-instance/create-scoped-slots.js
+++ b/packages/create-instance/create-scoped-slots.js
@@ -36,25 +36,12 @@ function getVueTemplateCompilerHelpers (): { [name: string]: Function } {
 }
 
 function validateEnvironment (): void {
-  if (window.navigator.userAgent.match(/PhantomJS/i)) {
-    throwError(
-      `the scopedSlots option does not support PhantomJS. ` +
-        `Please use Puppeteer, or pass a component.`
-    )
-  }
   if (vueVersion < 2.5) {
     throwError(`the scopedSlots option is only supported in ` + `vue@2.5+.`)
   }
 }
 
-function validateTempldate (template: string): void {
-  if (template.trim().substr(0, 9) === '<template') {
-    throwError(
-      `the scopedSlots option does not support a template ` +
-        `tag as the root element.`
-    )
-  }
-}
+const scopedSlotRe = /<[^>]+ slot-scope=\"(.+)\"/
 
 export default function createScopedSlots (
   scopedSlotsOption: ?{ [slotName: string]: string }
@@ -67,13 +54,18 @@ export default function createScopedSlots (
   const helpers = getVueTemplateCompilerHelpers()
   for (const name in scopedSlotsOption) {
     const template = scopedSlotsOption[name]
-    validateTempldate(template)
     const render = compileToFunctions(template).render
-    const domParser = new window.DOMParser()
-    const _document = domParser.parseFromString(template, 'text/html')
-    const slotScope = _document.body.firstChild.getAttribute(
-      'slot-scope'
-    )
+    const match = template.match(scopedSlotRe)
+
+    if (!match) {
+      throwError(
+        `the root tag in a scopedSlot template must have a ` +
+        `slot-scope attribute`
+      )
+    }
+
+    // $FlowIgnore
+    const slotScope = match[1]
     const isDestructuring = isDestructuringSlotScope(slotScope)
     scopedSlots[name] = function (props) {
       if (isDestructuring) {
diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js
index 05259800d..8b7d44b20 100644
--- a/test/specs/mounting-options/scopedSlots.spec.js
+++ b/test/specs/mounting-options/scopedSlots.spec.js
@@ -14,7 +14,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
   })
 
   itDoNotRunIf(
-    vueVersion < 2.5 || isRunningPhantomJS,
+    vueVersion < 2.5,
     'mounts component scoped slots in render function',
     () => {
       const destructuringWrapper = mountingMethod(
@@ -56,7 +56,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
   )
 
   itDoNotRunIf(
-    vueVersion < 2.5 || isRunningPhantomJS,
+    vueVersion < 2.5,
     'mounts component scoped slots',
     () => {
       const wrapper = mountingMethod(ComponentWithScopedSlots, {
@@ -64,7 +64,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         scopedSlots: {
           destructuring:
             '<p slot-scope="{ index, item }">{{index}},{{item}}</p>',
-          list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>',
+          list: '<template  slot-scope="foo"><p>{{foo.index}},{{foo.text}}</p></template>',
           single: '<p slot-scope="bar">{{bar.text}}</p>',
           noProps: '<p slot-scope="baz">baz</p>'
         }
@@ -105,25 +105,6 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
     }
   )
 
-  itDoNotRunIf(
-    vueVersion < 2.5 || isRunningPhantomJS,
-    'throws exception when it is seted to a template tag at top',
-    () => {
-      const fn = () => {
-        mountingMethod(ComponentWithScopedSlots, {
-          scopedSlots: {
-            single: '<template></template>'
-          }
-        })
-      }
-      const message =
-        '[vue-test-utils]: the scopedSlots option does not support a template tag as the root element.'
-      expect(fn)
-        .to.throw()
-        .with.property('message', message)
-    }
-  )
-
   itDoNotRunIf(
     vueVersion >= 2.5 || isRunningPhantomJS,
     'throws exception when vue version < 2.5',
@@ -143,23 +124,18 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
     }
   )
 
-  itDoNotRunIf(
-    vueVersion < 2.5,
-    'throws exception when using PhantomJS',
+  it(
+    'throws exception when template does not include slot-scope attribute',
     () => {
-      if (window.navigator.userAgent.match(/Chrome|PhantomJS/i)) {
-        return
-      }
-      window = { navigator: { userAgent: 'PhantomJS' }} // eslint-disable-line no-native-reassign
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
           scopedSlots: {
-            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
+            list: '<p>{{foo.index}},{{foo.text}}</p>'
           }
         })
       }
       const message =
-        '[vue-test-utils]: the scopedSlots option does not support PhantomJS. Please use Puppeteer, or pass a component.'
+        '[vue-test-utils]: the root tag in a scopedSlot template must have a slot-scope attribute'
       expect(fn)
         .to.throw()
         .with.property('message', message)

From 94fbb26d56e58499626656bdf9e48f9201081e67 Mon Sep 17 00:00:00 2001
From: eddyerburgh <edward.yerburgh@gmail.com>
Date: Sun, 29 Jul 2018 14:27:33 +0100
Subject: [PATCH 2/8] feat: support JSX scoped slots

---
 .babelrc                                      |  2 +-
 package.json                                  |  1 +
 .../create-instance/create-scoped-slots.js    | 39 ++++++------
 .../mounting-options/scopedSlots.spec.js      | 63 +++++++++++--------
 yarn.lock                                     |  6 ++
 5 files changed, 64 insertions(+), 47 deletions(-)

diff --git a/.babelrc b/.babelrc
index 9f1cf787f..4d755394a 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
 {
   "presets": ["env", "stage-2", "flow-vue"],
-  "plugins": ["transform-decorators-legacy"],
+  "plugins": ["transform-decorators-legacy", "transform-vue-jsx"],
   "comments": false
 }
diff --git a/package.json b/package.json
index 91a211ea3..596e39545 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "babel-eslint": "^8.2.2",
     "babel-loader": "^7.1.3",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-flow-vue": "^1.0.0",
diff --git a/packages/create-instance/create-scoped-slots.js b/packages/create-instance/create-scoped-slots.js
index d77ba2ab2..777bb9f70 100644
--- a/packages/create-instance/create-scoped-slots.js
+++ b/packages/create-instance/create-scoped-slots.js
@@ -32,19 +32,20 @@ function getVueTemplateCompilerHelpers (): { [name: string]: Function } {
   names.forEach(name => {
     helpers[name] = vue._renderProxy[name]
   })
+  helpers.$createElement = vue._renderProxy.$createElement
   return helpers
 }
 
 function validateEnvironment (): void {
-  if (vueVersion < 2.5) {
-    throwError(`the scopedSlots option is only supported in ` + `vue@2.5+.`)
+  if (vueVersion < 2.1) {
+    throwError(`the scopedSlots option is only supported in ` + `vue@2.1+.`)
   }
 }
 
 const scopedSlotRe = /<[^>]+ slot-scope=\"(.+)\"/
 
 export default function createScopedSlots (
-  scopedSlotsOption: ?{ [slotName: string]: string }
+  scopedSlotsOption: ?{ [slotName: string]: string | Function }
 ): { [slotName: string]: (props: Object) => VNode | Array<VNode>} {
   const scopedSlots = {}
   if (!scopedSlotsOption) {
@@ -52,26 +53,24 @@ export default function createScopedSlots (
   }
   validateEnvironment()
   const helpers = getVueTemplateCompilerHelpers()
-  for (const name in scopedSlotsOption) {
-    const template = scopedSlotsOption[name]
-    const render = compileToFunctions(template).render
-    const match = template.match(scopedSlotRe)
+  for (const s in scopedSlotsOption) {
+    const slot = scopedSlotsOption[s]
+    const isFn = typeof slot === 'function'
+    const renderFn = isFn
+      ? slot
+      : compileToFunctions(slot).renderFn
 
-    if (!match) {
-      throwError(
-        `the root tag in a scopedSlot template must have a ` +
-        `slot-scope attribute`
-      )
-    }
+    const hasSlotScopeAttr = !isFn && slot.match(scopedSlotRe)
+    // // $FlowIgnore
+    const slotScope = hasSlotScopeAttr && hasSlotScopeAttr[1]
 
-    // $FlowIgnore
-    const slotScope = match[1]
-    const isDestructuring = isDestructuringSlotScope(slotScope)
-    scopedSlots[name] = function (props) {
-      if (isDestructuring) {
-        return render.call({ ...helpers, ...props })
+    scopedSlots[s] = function (props) {
+      if (isFn) {
+        return renderFn.call({ ...helpers }, props)
+      } else if (slotScope && !isDestructuringSlotScope(slotScope)) {
+        return renderFn.call({ ...helpers, [slotScope]: props })
       } else {
-        return render.call({ ...helpers, [slotScope]: props })
+        return renderFn.call({ ...helpers, ...props })
       }
     }
   }
diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js
index 8b7d44b20..c1513329a 100644
--- a/test/specs/mounting-options/scopedSlots.spec.js
+++ b/test/specs/mounting-options/scopedSlots.spec.js
@@ -1,7 +1,6 @@
 import {
   describeWithShallowAndMount,
-  vueVersion,
-  isRunningPhantomJS
+  vueVersion
 } from '~resources/utils'
 import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
 import { itDoNotRunIf } from 'conditional-specs'
@@ -38,7 +37,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
       const notDestructuringWrapper = mountingMethod(
         {
           render: function () {
-            return this.$scopedSlots.default({
+            return this.$scopedSlots.named({
               index: 1,
               item: 'foo'
             })
@@ -46,7 +45,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         },
         {
           scopedSlots: {
-            default:
+            named:
               '<p slot-scope="props">{{props.index}},{{props.item}}</p>'
           }
         }
@@ -64,7 +63,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         scopedSlots: {
           destructuring:
             '<p slot-scope="{ index, item }">{{index}},{{item}}</p>',
-          list: '<template  slot-scope="foo"><p>{{foo.index}},{{foo.text}}</p></template>',
+          list: '<template slot-scope="foo"><p>{{foo.index}},{{foo.text}}</p></template>',
           single: '<p slot-scope="bar">{{bar.text}}</p>',
           noProps: '<p slot-scope="baz">baz</p>'
         }
@@ -105,37 +104,49 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
     }
   )
 
-  itDoNotRunIf(
-    vueVersion >= 2.5 || isRunningPhantomJS,
-    'throws exception when vue version < 2.5',
-    () => {
-      const fn = () => {
-        mountingMethod(ComponentWithScopedSlots, {
-          scopedSlots: {
-            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
-          }
-        })
+  it('handles JSX', () => {
+    const wrapper = mountingMethod({
+      template: '<div><slot name="single" :text="foo"></slot></div>',
+      data: () => ({
+        foo: 'bar'
+      })
+    }, {
+      scopedSlots: {
+        single ({ text }) {
+          return <p>{{ text }}</p>
+        }
       }
-      const message =
-        '[vue-test-utils]: the scopedSlots option is only supported in vue@2.5+.'
-      expect(fn)
-        .to.throw()
-        .with.property('message', message)
-    }
-  )
+    })
+    expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
+  })
 
-  it(
-    'throws exception when template does not include slot-scope attribute',
+  it('handles no slot-scope', () => {
+    const wrapper = mountingMethod({
+      template: '<div><slot name="single" :text="foo" :i="123"></slot></div>',
+      data: () => ({
+        foo: 'bar'
+      })
+    }, {
+      scopedSlots: {
+        single: '<p>{{text}},{{i}}</p>'
+      }
+    })
+    expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
+  })
+
+  itDoNotRunIf(
+    vueVersion > 2.0,
+    'throws exception when vue version < 2.1',
     () => {
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
           scopedSlots: {
-            list: '<p>{{foo.index}},{{foo.text}}</p>'
+            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
           }
         })
       }
       const message =
-        '[vue-test-utils]: the root tag in a scopedSlot template must have a slot-scope attribute'
+        '[vue-test-utils]: the scopedSlots option is only supported in vue@2.1+.'
       expect(fn)
         .to.throw()
         .with.property('message', message)
diff --git a/yarn.lock b/yarn.lock
index b78e59e32..e8333a4cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1790,6 +1790,12 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-plugin-transform-vue-jsx@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.7.0.tgz#d40492e6692a36b594f7e9a1928f43e969740960"
+  dependencies:
+    esutils "^2.0.2"
+
 babel-plugin-transform-vue-jsx@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-4.0.1.tgz#2c8bddce87a6ef09eaa59869ff1bfbeeafc5f88d"

From 998b77b843243f19e2fdc0ccd037dc62810f18b1 Mon Sep 17 00:00:00 2001
From: eddyerburgh <edward.yerburgh@gmail.com>
Date: Sun, 29 Jul 2018 14:43:08 +0100
Subject: [PATCH 3/8] refactor: rename functions

---
 flow/options.flow.js                            |  2 +-
 packages/create-instance/create-scoped-slots.js | 17 +++++++++--------
 test/specs/mounting-options/scopedSlots.spec.js |  4 ++--
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/flow/options.flow.js b/flow/options.flow.js
index d154c1f14..c95fb78bf 100644
--- a/flow/options.flow.js
+++ b/flow/options.flow.js
@@ -5,7 +5,7 @@ declare type Options = {
   mocks?: Object,
   methods?: { [key: string]: Function },
   slots?: SlotsObject,
-  scopedSlots?: { [key: string]: string },
+  scopedSlots?: { [key: string]: string | Function },
   localVue?: Component,
   provide?: Object,
   stubs?: Stubs,
diff --git a/packages/create-instance/create-scoped-slots.js b/packages/create-instance/create-scoped-slots.js
index 777bb9f70..5f4138616 100644
--- a/packages/create-instance/create-scoped-slots.js
+++ b/packages/create-instance/create-scoped-slots.js
@@ -38,15 +38,17 @@ function getVueTemplateCompilerHelpers (): { [name: string]: Function } {
 
 function validateEnvironment (): void {
   if (vueVersion < 2.1) {
-    throwError(`the scopedSlots option is only supported in ` + `vue@2.1+.`)
+    throwError(`the scopedSlots option is only supported in vue@2.1+.`)
   }
 }
 
-const scopedSlotRe = /<[^>]+ slot-scope=\"(.+)\"/
+const slotScopeRe = /<[^>]+ slot-scope=\"(.+)\"/
 
 export default function createScopedSlots (
   scopedSlotsOption: ?{ [slotName: string]: string | Function }
-): { [slotName: string]: (props: Object) => VNode | Array<VNode>} {
+): {
+  [slotName: string]: (props: Object) => VNode | Array<VNode>
+} {
   const scopedSlots = {}
   if (!scopedSlotsOption) {
     return scopedSlots
@@ -56,14 +58,13 @@ export default function createScopedSlots (
   for (const s in scopedSlotsOption) {
     const slot = scopedSlotsOption[s]
     const isFn = typeof slot === 'function'
-    const renderFn = isFn
+    // Type check in render function to silence flow
+    const renderFn = typeof slot === 'function'
       ? slot
-      : compileToFunctions(slot).renderFn
+      : compileToFunctions(slot).render
 
-    const hasSlotScopeAttr = !isFn && slot.match(scopedSlotRe)
-    // // $FlowIgnore
+    const hasSlotScopeAttr = !isFn && slot.match(slotScopeRe)
     const slotScope = hasSlotScopeAttr && hasSlotScopeAttr[1]
-
     scopedSlots[s] = function (props) {
       if (isFn) {
         return renderFn.call({ ...helpers }, props)
diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js
index c1513329a..58a7c3cd5 100644
--- a/test/specs/mounting-options/scopedSlots.spec.js
+++ b/test/specs/mounting-options/scopedSlots.spec.js
@@ -13,7 +13,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
   })
 
   itDoNotRunIf(
-    vueVersion < 2.5,
+    vueVersion < 2.1,
     'mounts component scoped slots in render function',
     () => {
       const destructuringWrapper = mountingMethod(
@@ -55,7 +55,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
   )
 
   itDoNotRunIf(
-    vueVersion < 2.5,
+    vueVersion < 2.1,
     'mounts component scoped slots',
     () => {
       const wrapper = mountingMethod(ComponentWithScopedSlots, {

From 95c061f055150f6936525c0d7ac48c827dc7750e Mon Sep 17 00:00:00 2001
From: eddyerburgh <edward.yerburgh@gmail.com>
Date: Sun, 29 Jul 2018 16:24:37 +0100
Subject: [PATCH 4/8] refactor: handle template as root element

---
 docs/api/options.md                           | 48 +++++++---
 .../create-instance/create-scoped-slots.js    | 26 ++++--
 .../mounting-options/scopedSlots.spec.js      | 92 +++++++++++++------
 3 files changed, 119 insertions(+), 47 deletions(-)

diff --git a/docs/api/options.md b/docs/api/options.md
index 1707e78fb..2ace5a6bd 100644
--- a/docs/api/options.md
+++ b/docs/api/options.md
@@ -69,30 +69,52 @@ expect(wrapper.find('div')).toBe(true)
 
 ## scopedSlots
 
-- type: `{ [name: string]: string }`
+- type: `{ [name: string]: string|Function }`
 
-Provide an object of scoped slots contents to the component. The key corresponds to the slot name. The value can be a template string.
+Provide an object of scoped slots to the component. The key corresponds to the slot name.
 
-There are three limitations.
+You can set the name of the props using the slot-scope attribute:
 
-* This option is only supported in vue@2.5+.
+```js
+shallowMount(Component, {
+  scopedSlots: {
+    foo: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
+  }
+})
+```
 
-* You can not use `<template>` tag as the root element in the `scopedSlots` option.
+Otherwise props are available as a `props` object when the slot is evaluated:
 
-* This does not support PhantomJS.  
-You can use [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer) as an alternative.
+```js
+shallowMount(Component, {
+  scopedSlots: {
+    default: '<p>{{props.index}},{{props.text}}</p>'
+  }
+})
+```
 
-Example:
+You can also pass a function that takes the props as an argument:
 
 ```js
-const wrapper = shallowMount(Component, {
+shallowMount(Component, {
+  scopedSlots: {
+    foo: function(props) {
+      return this.$createElement('div', props.index)
+    }
+  }
+})
+```
+
+Or you can use JSX. If write JSX in a method, `this.$createElement` is auto-injected by babel-plugin-transform-vue-jsx:
+
+```js
+shallowMount(Component, {
   scopedSlots: {
-    foo: '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
+    foo(props) {
+      return <div>{{ props.text }}</div>
+    }
   }
 })
-expect(wrapper.find('#fooWrapper').html()).toBe(
-  `<div id="fooWrapper"><p>0,text1</p><p>1,text2</p><p>2,text3</p></div>`
-)
 ```
 
 ## stubs
diff --git a/packages/create-instance/create-scoped-slots.js b/packages/create-instance/create-scoped-slots.js
index 5f4138616..9ab0b0d69 100644
--- a/packages/create-instance/create-scoped-slots.js
+++ b/packages/create-instance/create-scoped-slots.js
@@ -44,6 +44,13 @@ function validateEnvironment (): void {
 
 const slotScopeRe = /<[^>]+ slot-scope=\"(.+)\"/
 
+// Hide warning about <template> disallowed as root element
+function customWarn (msg) {
+  if (msg.indexOf('Cannot use <template> as component root element') === -1) {
+    console.error(msg)
+  }
+}
+
 export default function createScopedSlots (
   scopedSlotsOption: ?{ [slotName: string]: string | Function }
 ): {
@@ -55,24 +62,29 @@ export default function createScopedSlots (
   }
   validateEnvironment()
   const helpers = getVueTemplateCompilerHelpers()
-  for (const s in scopedSlotsOption) {
-    const slot = scopedSlotsOption[s]
+  for (const scopedSlotName in scopedSlotsOption) {
+    const slot = scopedSlotsOption[scopedSlotName]
     const isFn = typeof slot === 'function'
     // Type check in render function to silence flow
     const renderFn = typeof slot === 'function'
       ? slot
-      : compileToFunctions(slot).render
+      : compileToFunctions(slot, { warn: customWarn }).render
 
     const hasSlotScopeAttr = !isFn && slot.match(slotScopeRe)
     const slotScope = hasSlotScopeAttr && hasSlotScopeAttr[1]
-    scopedSlots[s] = function (props) {
+    scopedSlots[scopedSlotName] = function (props) {
+      let res
       if (isFn) {
-        return renderFn.call({ ...helpers }, props)
+        res = renderFn.call({ ...helpers }, props)
       } else if (slotScope && !isDestructuringSlotScope(slotScope)) {
-        return renderFn.call({ ...helpers, [slotScope]: props })
+        res = renderFn.call({ ...helpers, [slotScope]: props })
+      } else if (slotScope && isDestructuringSlotScope(slotScope)) {
+        res = renderFn.call({ ...helpers, ...props })
       } else {
-        return renderFn.call({ ...helpers, ...props })
+        res = renderFn.call({ ...helpers, props })
       }
+      // res is Array if <template> is root element
+      return Array.isArray(res) ? res[0] : res
     }
   }
   return scopedSlots
diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js
index 58a7c3cd5..2c049d21d 100644
--- a/test/specs/mounting-options/scopedSlots.spec.js
+++ b/test/specs/mounting-options/scopedSlots.spec.js
@@ -14,6 +14,40 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
 
   itDoNotRunIf(
     vueVersion < 2.1,
+    'handles templates as the root node', () => {
+      const wrapper = mountingMethod({
+        template: '<div><slot name="single" :text="foo" :i="123"></slot></div>',
+        data: () => ({
+          foo: 'bar'
+        })
+      }, {
+        scopedSlots: {
+          single: '<template><p>{{props.text}},{{props.i}}</p></template>'
+        }
+      })
+      expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
+    })
+
+  itDoNotRunIf(
+    vueVersion < 2.1,
+    'handles render functions', () => {
+      const wrapper = mountingMethod({
+        template: '<div><slot name="single" :text="foo" /></div>',
+        data: () => ({
+          foo: 'bar'
+        })
+      }, {
+        scopedSlots: {
+          single: function (props) {
+            return this.$createElement('p', props.text)
+          }
+        }
+      })
+      expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
+    })
+
+  itDoNotRunIf(
+    vueVersion < 2.5,
     'mounts component scoped slots in render function',
     () => {
       const destructuringWrapper = mountingMethod(
@@ -28,7 +62,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         {
           scopedSlots: {
             default:
-              '<p slot-scope="{ index, item }">{{index}},{{item}}</p>'
+              '<template slot-scope="{ index, item }"><p>{{index}},{{item}}</p></template>'
           }
         }
       )
@@ -46,7 +80,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         {
           scopedSlots: {
             named:
-              '<p slot-scope="props">{{props.index}},{{props.item}}</p>'
+              '<p slot-scope="foo">{{foo.index}},{{foo.item}}</p>'
           }
         }
       )
@@ -55,7 +89,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
   )
 
   itDoNotRunIf(
-    vueVersion < 2.1,
+    vueVersion < 2.5,
     'mounts component scoped slots',
     () => {
       const wrapper = mountingMethod(ComponentWithScopedSlots, {
@@ -104,35 +138,39 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
     }
   )
 
-  it('handles JSX', () => {
-    const wrapper = mountingMethod({
-      template: '<div><slot name="single" :text="foo"></slot></div>',
-      data: () => ({
-        foo: 'bar'
-      })
-    }, {
-      scopedSlots: {
-        single ({ text }) {
-          return <p>{{ text }}</p>
+  itDoNotRunIf(
+    vueVersion < 2.5,
+    'handles JSX', () => {
+      const wrapper = mountingMethod({
+        template: '<div><slot name="single" :text="foo"></slot></div>',
+        data: () => ({
+          foo: 'bar'
+        })
+      }, {
+        scopedSlots: {
+          single ({ text }) {
+            return <p>{{ text }}</p>
+          }
         }
-      }
+      })
+      expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
     })
-    expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
-  })
 
-  it('handles no slot-scope', () => {
-    const wrapper = mountingMethod({
-      template: '<div><slot name="single" :text="foo" :i="123"></slot></div>',
-      data: () => ({
-        foo: 'bar'
+  itDoNotRunIf(
+    vueVersion < 2.5,
+    'handles no slot-scope', () => {
+      const wrapper = mountingMethod({
+        template: '<div><slot name="single" :text="foo" :i="123"></slot></div>',
+        data: () => ({
+          foo: 'bar'
+        })
+      }, {
+        scopedSlots: {
+          single: '<p>{{props.text}},{{props.i}}</p>'
+        }
       })
-    }, {
-      scopedSlots: {
-        single: '<p>{{text}},{{i}}</p>'
-      }
+      expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
     })
-    expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
-  })
 
   itDoNotRunIf(
     vueVersion > 2.0,

From 86a1470a5e2a9771e7fd1bf0c80e89c1a9e60d4d Mon Sep 17 00:00:00 2001
From: eddyerburgh <edward.yerburgh@gmail.com>
Date: Sun, 29 Jul 2018 16:36:53 +0100
Subject: [PATCH 5/8] test: fix lint errors

---
 docs/api/options.md                             | 6 +++---
 test/specs/mounting-options/scopedSlots.spec.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/api/options.md b/docs/api/options.md
index 2ace5a6bd..c2c3b5148 100644
--- a/docs/api/options.md
+++ b/docs/api/options.md
@@ -98,7 +98,7 @@ You can also pass a function that takes the props as an argument:
 ```js
 shallowMount(Component, {
   scopedSlots: {
-    foo: function(props) {
+    foo: function (props) {
       return this.$createElement('div', props.index)
     }
   }
@@ -110,8 +110,8 @@ Or you can use JSX. If write JSX in a method, `this.$createElement` is auto-inje
 ```js
 shallowMount(Component, {
   scopedSlots: {
-    foo(props) {
-      return <div>{{ props.text }}</div>
+    foo (props) {
+      return <div>{ props.text }</div>
     }
   }
 })
diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js
index 2c049d21d..b1b651141 100644
--- a/test/specs/mounting-options/scopedSlots.spec.js
+++ b/test/specs/mounting-options/scopedSlots.spec.js
@@ -149,7 +149,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
       }, {
         scopedSlots: {
           single ({ text }) {
-            return <p>{{ text }}</p>
+            return <p>{ text }</p>
           }
         }
       })

From 4c7a3aea6c22bc9d2b821f064abf69b3abc30366 Mon Sep 17 00:00:00 2001
From: eddyerburgh <edward.yerburgh@gmail.com>
Date: Sun, 29 Jul 2018 16:46:24 +0100
Subject: [PATCH 6/8] fix: add updated package-lock

---
 package.json | 6 +++---
 yarn.lock    | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 596e39545..6824c9f56 100644
--- a/package.json
+++ b/package.json
@@ -62,12 +62,12 @@
     "rollup": "^0.58.2",
     "sinon": "^2.3.2",
     "sinon-chai": "^2.10.0",
-    "vue": "^2.5.16",
+    "vue": "2.5.16",
     "vue-class-component": "^6.1.2",
     "vue-loader": "^13.6.2",
     "vue-router": "^3.0.1",
-    "vue-server-renderer": "^2.5.16",
-    "vue-template-compiler": "^2.5.16",
+    "vue-server-renderer": "2.5.16",
+    "vue-template-compiler": "2.5.16",
     "vuepress": "^0.10.0",
     "vuepress-theme-vue": "^1.0.3",
     "vuetify": "^0.16.9",
diff --git a/yarn.lock b/yarn.lock
index e8333a4cf..626643886 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9706,7 +9706,7 @@ vue-router@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
 
-vue-server-renderer@^2.5.16:
+vue-server-renderer@2.5.16, vue-server-renderer@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.5.16.tgz#279ef8e37e502a0de3a9ae30758cc04a472eaac0"
   dependencies:
@@ -9733,7 +9733,7 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.5.16:
+vue-template-compiler@2.5.16, vue-template-compiler@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz#93b48570e56c720cdf3f051cc15287c26fbd04cb"
   dependencies:
@@ -9744,7 +9744,7 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@^2.5.16:
+vue@2.5.16, vue@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
 

From 656b12d839d733403f7fcf47c6bce9a02c10c154 Mon Sep 17 00:00:00 2001
From: eddyerburgh <edward.yerburgh@gmail.com>
Date: Sun, 29 Jul 2018 17:12:20 +0100
Subject: [PATCH 7/8] fix: add babel syntax jsx

---
 package.json | 1 +
 yarn.lock    | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/package.json b/package.json
index 6824c9f56..1af27ed8a 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
     "babel-loader": "^7.1.3",
+    "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-polyfill": "^6.23.0",
diff --git a/yarn.lock b/yarn.lock
index 626643886..723355b1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1536,6 +1536,10 @@ babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"

From 55619f44ea57efe6c8cfa8de65e6c130d4c9ac57 Mon Sep 17 00:00:00 2001
From: eddyerburgh <edward.yerburgh@gmail.com>
Date: Sun, 29 Jul 2018 18:01:31 +0100
Subject: [PATCH 8/8] refactor: reword comments

---
 packages/create-instance/create-scoped-slots.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/create-instance/create-scoped-slots.js b/packages/create-instance/create-scoped-slots.js
index 9ab0b0d69..fe45fc102 100644
--- a/packages/create-instance/create-scoped-slots.js
+++ b/packages/create-instance/create-scoped-slots.js
@@ -65,7 +65,7 @@ export default function createScopedSlots (
   for (const scopedSlotName in scopedSlotsOption) {
     const slot = scopedSlotsOption[scopedSlotName]
     const isFn = typeof slot === 'function'
-    // Type check in render function to silence flow
+    // Type check to silence flow (can't use isFn)
     const renderFn = typeof slot === 'function'
       ? slot
       : compileToFunctions(slot, { warn: customWarn }).render
@@ -83,7 +83,7 @@ export default function createScopedSlots (
       } else {
         res = renderFn.call({ ...helpers, props })
       }
-      // res is Array if <template> is root element
+      // res is Array if <template> is a root element
       return Array.isArray(res) ? res[0] : res
     }
   }