diff --git a/docs/README.md b/docs/README.md index b975edff8..b39021fdb 100644 --- a/docs/README.md +++ b/docs/README.md @@ -60,6 +60,7 @@ * [parent()](/docs/api/ReactWrapper/parent.md) * [closest(selector)](/docs/api/ReactWrapper/closest.md) * [text()](/docs/api/ReactWrapper/text.md) + * [html()](/docs/api/ReactWrapper/html.md) * [get(index)](/docs/api/ReactWrapper/get.md) * [at(index)](/docs/api/ReactWrapper/at.md) * [first()](/docs/api/ReactWrapper/first.md) diff --git a/docs/api/ReactWrapper/html.md b/docs/api/ReactWrapper/html.md new file mode 100644 index 000000000..6fb610ba4 --- /dev/null +++ b/docs/api/ReactWrapper/html.md @@ -0,0 +1,54 @@ +# `.html() => String` + +Returns a string of the rendered HTML markup of the current render tree. + +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.html()).to.equal( + `
` +); +expect(wrapper.find(Foo).html()).to.equal( + `
` +); +``` + +```jsx +const wrapper = mount(
important
); +expect(wrapper.html()).to.equal('
important
'); +``` + + +#### Related Methods + +[`.text() => String`](text.md) diff --git a/docs/api/mount.md b/docs/api/mount.md index 1df67b51f..eaeeeafa3 100644 --- a/docs/api/mount.md +++ b/docs/api/mount.md @@ -91,6 +91,9 @@ Get a wrapper with the first ancestor of the current node to match the provided #### [`.text() => String`](ReactWrapper/text.md) Returns a string representation of the text nodes in the current render tree. +#### [`.html() => String`](ReactWrapper/html.md) +Returns a static HTML rendering of the current node. + #### [`.get(index) => ReactWrapper`](ReactWrapper/get.md) Returns the node at the provided index of the current wrapper. diff --git a/src/ReactWrapper.js b/src/ReactWrapper.js index ce80b4319..f17b2da24 100644 --- a/src/ReactWrapper.js +++ b/src/ReactWrapper.js @@ -285,6 +285,17 @@ export default class ReactWrapper { return this.single(n => findDOMNode(n).textContent); } + /** + * Returns the HTML of the node. + * + * NOTE: can only be called on a wrapper of a single node. + * + * @returns {String} + */ + html() { + return this.single(n => findDOMNode(n).outerHTML.replace(/\sdata-reactid+="[^"]+"/g, '')); + } + /** * 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 7596b7a53..e1632b95b 100644 --- a/src/__tests__/ReactWrapper-spec.js +++ b/src/__tests__/ReactWrapper-spec.js @@ -1202,4 +1202,42 @@ describeWithDOM('mount', () => { expect(wrapper.ref('secondRef').text()).to.equal('Second'); }); }); + + describe('.html()', () => { + it('should return html of straight DOM elements', () => { + const wrapper = mount( +
+ Hello World! +
+ ); + expect(wrapper.html()).to.equal( + `
Hello World!
` + ); + }); + + it('should render out nested composite components', () => { + class Foo extends React.Component { + render() { + return (
); + } + } + class Bar extends React.Component { + render() { + return ( +
+ +
+ ); + } + } + const wrapper = mount(); + expect(wrapper.html()).to.equal( + `
` + ); + expect(wrapper.find(Foo).html()).to.equal( + `
` + ); + }); + }); + });