diff --git a/docs/README.md b/docs/README.md index 4433eb9f2..ee989ff6e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -61,6 +61,7 @@ * [parents()](/docs/api/ReactWrapper/parents.md) * [parent()](/docs/api/ReactWrapper/parent.md) * [closest(selector)](/docs/api/ReactWrapper/closest.md) + * [render()](/docs/api/ReactWrapper/render.md) * [text()](/docs/api/ReactWrapper/text.md) * [html()](/docs/api/ReactWrapper/html.md) * [get(index)](/docs/api/ReactWrapper/get.md) diff --git a/docs/api/ReactWrapper/render.md b/docs/api/ReactWrapper/render.md new file mode 100644 index 000000000..47766d654 --- /dev/null +++ b/docs/api/ReactWrapper/render.md @@ -0,0 +1,39 @@ +# `.render() => CheerioWrapper` + +Returns a CheerioWrapper around the rendered HTML of the current node's subtree. + +Note: can only be called on a wrapper of a single node. + + +#### Returns + +`String`: The resulting HTML string + + + +#### Examples + +```jsx +class Foo extends React.Component { + render() { + return (
); + } +} +``` + +```jsx +class Bar extends React.Component { + render() { + return ( +
+ +
+ ); + } +} +``` + +```jsx +const wrapper = mount(); +expect(wrapper.find(Foo).render().find('.in-foo')).to.have.length(1); +``` diff --git a/docs/api/mount.md b/docs/api/mount.md index cb14bbb02..a62a929c4 100644 --- a/docs/api/mount.md +++ b/docs/api/mount.md @@ -88,6 +88,9 @@ Get a wrapper with the direct parent of the current node. #### [`.closest(selector) => ReactWrapper`](ReactWrapper/closest.md) Get a wrapper with the first ancestor of the current node to match the provided selector. +#### [`.render() => CheerioWrapper`](ReactWrapper/render.md) +Returns a CheerioWrapper of the current node's subtree. + #### [`.text() => String`](ReactWrapper/text.md) Returns a string representation of the text nodes in the current render tree. diff --git a/src/ReactWrapper.js b/src/ReactWrapper.js index 071edc814..a6b77cf6d 100644 --- a/src/ReactWrapper.js +++ b/src/ReactWrapper.js @@ -1,4 +1,5 @@ import React from 'react'; +import cheerio from 'cheerio'; import { flatten, unique, compact } from 'underscore'; import createWrapperComponent from './ReactWrapperComponent'; import { @@ -304,6 +305,17 @@ export default class ReactWrapper { return this.single(n => findDOMNode(n).outerHTML.replace(/\sdata-reactid+="[^"]+"/g, '')); } + /** + * Returns the current node rendered to HTML and wrapped in a CheerioWrapper. + * + * NOTE: can only be called on a wrapper of a single node. + * + * @returns {CheerioWrapper} + */ + render() { + return cheerio.load(this.html()).root(); + } + /** * Used to simulate events. Pass an eventname and (optionally) event arguments. This method of * testing events should be met with some skepticism. diff --git a/src/__tests__/ReactWrapper-spec.js b/src/__tests__/ReactWrapper-spec.js index 0ff8df3d4..c7ef9505b 100644 --- a/src/__tests__/ReactWrapper-spec.js +++ b/src/__tests__/ReactWrapper-spec.js @@ -1464,4 +1464,25 @@ describeWithDOM('mount', () => { }); }); + describe('.render()', () => { + it('should return a cheerio wrapper around the current node', () => { + class Foo extends React.Component { + render() { + return (
); + } + } + class Bar extends React.Component { + render() { + return ( +
+ +
+ ); + } + } + const wrapper = mount(); + expect(wrapper.render().find('.in-foo')).to.have.length(1); + }); + }); + });