feat(render): add render method (#477)

Author: eddyerburgh

flow/modules.flow.js

@@ -19,3 +19,7 @@ declare module 'vue-template-compiler' {
 declare module 'vue-server-renderer' {
   declare module.exports: any;
 }
+
+declare module 'cheerio' {
+  declare module.exports: any;
+}

packages/server-test-utils/package.json

@@ -23,15 +23,17 @@
   },
   "homepage": "https://github.com/vuejs/vue-test-utils#readme",
   "dependencies": {
-    "@vue/test-utils": "^1.0.0-beta.12"
+    "@vue/test-utils": "^1.0.0-beta.12",
+    "cheerio": "0.22.0"
   },
   "devDependencies": {
     "chalk": "^2.1.0",
     "conventional-changelog": "^1.1.3",
-    "rollup": "^0.56.3",
+    "rollup": "^0.57.1",
     "rollup-plugin-buble": "^0.19.2",
     "rollup-plugin-commonjs": "^8.3.0",
     "rollup-plugin-flow-no-whitespace": "^1.0.0",
+    "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-node-resolve": "^3.0.3",
     "typescript": "^2.6.2"
   },

packages/server-test-utils/scripts/build.js

@@ -5,6 +5,7 @@ const buble = require('rollup-plugin-buble')
 const nodeResolve = require('rollup-plugin-node-resolve')
 const commonjs = require('rollup-plugin-commonjs')
 const chalk = require('chalk')
+const json = require('rollup-plugin-json')
 
 function success (text) {
   console.log(chalk.green(`${text} ✔`))
@@ -34,9 +35,10 @@ const rollupOptions = process.env.NODE_ENV === 'test' ? rollupOptionsTest : roll
 rollupOptions.forEach(options => {
   rollup({
     input: resolve('src/index.js'),
-    external: ['vue', 'vue-template-compiler', 'vue-server-renderer'],
+    external: ['vue', 'vue-template-compiler', 'vue-server-renderer', 'cheerio'],
     plugins: [
       flow(),
+      json(),
       buble({
         objectAssign: 'Object.assign'
       }),

packages/server-test-utils/src/index.js

@@ -1,7 +1,9 @@
 import renderToString from './renderToString'
+import render from './render'
 import config from './config'
 
 export default {
   renderToString,
-  config
+  config,
+  render
 }

packages/server-test-utils/src/render.js

@@ -0,0 +1,9 @@
+// @flow
+
+import renderToString from './renderToString'
+import cheerio from 'cheerio'
+
+export default function render (component: Component, options: Options = {}): string {
+  const renderedString = renderToString(component, options)
+  return cheerio.load('')(renderedString)
+}

packages/server-test-utils/types/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "lib": ["es2015",  "es2017", "dom"],
     "module": "es2015",
     "moduleResolution": "node",
     "strict": true,

packages/test-utils/types/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "lib": ["es2015",  "es2017", "dom"],
     "module": "es2015",
     "moduleResolution": "node",
     "strict": true,

test/specs/render.spec.js

@@ -0,0 +1,12 @@
+import { render } from '~vue/server-test-utils'
+
+describe('render', () => {
+  it('returns a cheerio wrapper of the rendered component', () => {
+    const TestComponent = {
+      template: '<div><h2>Test</h2><p></p><p></p></div>'
+    }
+    const wrapper = render(TestComponent)
+    expect(wrapper.find('h2').text()).to.equal('Test')
+    expect(wrapper.find('p').length).to.equal(2)
+  })
+})

test/specs/renderToString.spec.js

@@ -1,15 +1,15 @@
-// import { renderToString } from '~vue/test-utils'
-// import Component from '~resources/components/component.vue'
-// import {
-//   isRunningJSDOM,
-//   itDoNotRunIf
-// } from '~resources/utils'
-//
-// describe('renderToString', () => {
-//   itDoNotRunIf(isRunningJSDOM,
-//     'throws error when not run in node', () => {
-//       const fn = () => renderToString(Component)
-//       const message = '[vue-test-utils]: renderToString must be run in node. It cannot be run in a browser'
-//       expect(fn).to.throw().with.property('message', message)
-//     })
-// })
+import { renderToString } from '~vue/server-test-utils'
+import Component from '~resources/components/component.vue'
+import {
+  isRunningJSDOM,
+  itDoNotRunIf
+} from '~resources/utils'
+
+describe.skip('renderToString', () => {
+  itDoNotRunIf(isRunningJSDOM,
+    'throws error when not run in node', () => {
+      const fn = () => renderToString(Component)
+      const message = '[vue-test-utils]: renderToString must be run in node. It cannot be run in a browser'
+      expect(fn).to.throw().with.property('message', message)
+    })
+})