Merge pull request #156 from airbnb/lmr--render-on-react-wrapper

Add render method to ReactWrapper

Author: lelandrichardson

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)

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 (<div className="in-foo" />);
+  }
+}
+```
+
+```jsx
+class Bar extends React.Component {
+  render() {
+    return (
+      <div className="in-bar">
+        <Foo />
+      </div>
+    );
+  }
+}
+```
+
+```jsx
+const wrapper = mount(<Bar />);
+expect(wrapper.find(Foo).render().find('.in-foo')).to.have.length(1);
+```

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.
 

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.

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 (<div className="in-foo" />);
+        }
+      }
+      class Bar extends React.Component {
+        render() {
+          return (
+            <div className="in-bar">
+              <Foo />
+            </div>
+          );
+        }
+      }
+      const wrapper = mount(<Bar />);
+      expect(wrapper.render().find('.in-foo')).to.have.length(1);
+    });
+  });
+
 });