-
Notifications
You must be signed in to change notification settings - Fork 671
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(renderToString) Add renderToString method (#435)
- Loading branch information
1 parent
6ea4b10
commit da7aadc
Showing
29 changed files
with
556 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
}) | ||
}) | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
// @flow | ||
|
||
import Vue from 'vue' | ||
import createInstance from './lib/create-instance' | ||
import './lib/polyfills/object-assign-polyfill' | ||
import { throwError } from './lib/util' | ||
|
||
Vue.config.productionTip = false | ||
Vue.config.devtools = false | ||
|
||
export default function renderToString (component: Component, options: Options = {}): string { | ||
let renderer | ||
try { | ||
renderer = require('vue-server-renderer').createRenderer() | ||
} catch (e) {} | ||
|
||
if (!renderer) { | ||
throwError('renderToString must be run in node. It cannot be run in a browser') | ||
} | ||
// Remove cached constructor | ||
delete component._Ctor | ||
|
||
if (options.attachToDocument) { | ||
throwError('you cannot use attachToDocument with renderToString') | ||
} | ||
|
||
const vm = createInstance(component, options) | ||
|
||
let renderedString = '' | ||
|
||
// $FlowIgnore | ||
renderer.renderToString(vm, (err, res) => { | ||
if (err) { | ||
console.log(err) | ||
} | ||
renderedString = res | ||
}) | ||
return renderedString | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
const testsContext = require.context('../specs', true, /\.spec\.(js|vue)$/) | ||
|
||
testsContext.keys().forEach(testsContext) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.