feat(renderToString) Add renderToString method (#435)

Author: eddyerburgh

docs/en/README.md

@@ -18,6 +18,7 @@
 * [API](api/README.md)
   * [mount](api/mount.md)
   * [shallow](api/shallow.md)
+  * [renderToString](api/renderToString.md)
   * [Mounting Options](api/options.md)
     - [context](api/options.md#context)
     - [slots](api/options.md#slots)

docs/en/SUMMARY.md

@@ -14,6 +14,7 @@
 * [API](api/README.md)
   * [mount](api/mount.md)
   * [shallow](api/shallow.md)
+  * [renderToString](api/renderToString.md)
   * [Mounting Options](api/options.md)
     - [context](api/options.md#context)
     - [slots](api/options.md#slots)

docs/en/api/README.md

@@ -2,6 +2,7 @@
 
 * [mount](./mount.md)
 * [shallow](./shallow.md)
+* [renderToString](./renderToString.md)
 * [Mounting Options](./options.md)
   - [context](./options.md#context)
   - [slots](./options.md#slots)

docs/en/api/renderToString.md

@@ -0,0 +1,103 @@
+# `renderToString(component {, options}])`
+
+- **Arguments:**
+
+  - `{Component} component`
+  - `{Object} options`
+    - `{Object} context`
+      - `{Array<Component|Object>|Component} children`
+    - `{Object} slots`
+        - `{Array<Componet|Object>|Component|String} default`
+        - `{Array<Componet|Object>|Component|String} named`
+    - `{Object} mocks`
+    - `{Object|Array<string>} stubs`
+    - `{Vue} localVue`
+
+- **Returns:** `{string}`
+
+- **Options:**
+
+See [options](./options.md)
+
+- **Usage:**
+
+Renders a component to HTML.
+
+`renderToString` uses [`vue-server-renderer`](https://ssr.vuejs.org/en/basic.html) under the hood, to render a component to HTML.
+
+**Without options:**
+
+```js
+import { renderToString } from '@vue/test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+  it('renders a div', () => {
+    const renderedString = renderToString(Foo)
+    expect(renderedString).toContain('<div></div>')
+  })
+})
+```
+
+**With Vue options:**
+
+```js
+import { renderToString } from '@vue/test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+  it('renders a div', () => {
+    const renderedString = renderToString(Foo, {
+      propsData: {
+        color: 'red'
+      }
+    })
+    expect(renderedString).toContain('red')
+  })
+})
+```
+
+**Default and named slots:**
+
+```js
+import { renderToString } from '@vue/test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+import FooBar from './FooBar.vue'
+
+describe('Foo', () => {
+  it('renders a div', () => {
+    const renderedString = renderToString(Foo, {
+      slots: {
+        default: [Bar, FooBar],
+        fooBar: FooBar, // Will match <slot name="FooBar" />,
+        foo: '<div />'
+      }
+    })
+    expect(renderedString).toContain('<div></div>')
+  })
+})
+```
+
+**Stubbing global properties:**
+
+```js
+import { renderToString } from '@vue/test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+  it('renders a div', () => {
+    const $route = { path: 'http://www.example-path.com' }
+    const renderedString = renderToString(Foo, {
+      mocks: {
+        $route
+      }
+    })
+    expect(renderedString).toContain($route.path)
+  })
+})
+```

flow/modules.flow.js

@@ -15,3 +15,7 @@ declare module 'lodash/cloneDeep' {
 declare module 'vue-template-compiler' {
   declare module.exports: any;
 }
+
+declare module 'vue-server-renderer' {
+  declare module.exports: any;
+}

package.json

@@ -88,6 +88,7 @@
     "vue-class-component": "^6.1.2",
     "vue-loader": "^13.6.2",
     "vue-router": "^3.0.1",
+    "vue-server-renderer": "2.5.13",
     "vue-template-compiler": "^2.5.13",
     "vuetify": "^0.16.9",
     "vuex": "^3.0.1",
@@ -96,6 +97,7 @@
   },
   "peerDependencies": {
     "vue": "2.x",
+    "vue-server-renderer": "2.x",
     "vue-template-compiler": "^2.x"
   },
   "dependencies": {

scripts/test-compat.sh

@@ -4,7 +4,7 @@ set -e
 
 test_version_number(){
   echo "running unit tests with Vue $1"
-  yarn add vue@$1 vue-template-compiler@$1
+  yarn add vue@$1 vue-template-compiler@$1 vue-server-renderer@$1
   yarn test:unit
   yarn test:unit:karma
 }

src/index.js

@@ -1,5 +1,6 @@
 import shallow from './shallow'
 import mount from './mount'
+import renderToString from './renderToString'
 import createLocalVue from './create-local-vue'
 import TransitionStub from './components/TransitionStub'
 import TransitionGroupStub from './components/TransitionGroupStub'
@@ -11,6 +12,7 @@ export default {
   config,
   mount,
   shallow,
+  renderToString,
   TransitionStub,
   TransitionGroupStub,
   RouterLinkStub

src/lib/add-slots.js

@@ -54,6 +54,9 @@ function addSlots (vm: Component, slots: Object): void {
 
     if (Array.isArray(slots[key])) {
       slots[key].forEach((slotValue) => {
+        if (!isValidSlot(slotValue)) {
+          throwError('slots[key] must be a Component, string or an array of Components')
+        }
         addSlotToVm(vm, key, slotValue)
       })
     } else {

src/mount.js

@@ -11,8 +11,8 @@ import errorHandler from './lib/error-handler'
 import { findAllVueComponentsFromVm } from './lib/find-vue-components'
 
 Vue.config.productionTip = false
-Vue.config.errorHandler = errorHandler
 Vue.config.devtools = false
+Vue.config.errorHandler = errorHandler
 
 export default function mount (component: Component, options: Options = {}): VueWrapper {
   // Remove cached constructor