Merge pull request #215 from koba04/add-unmount-into-shallow-render

Add ShallowWrapper#unmount

Author: lelandrichardson

docs/README.md

@@ -30,6 +30,7 @@
     * [closest(selector)](/docs/api/ShallowWrapper/closest.md)
     * [shallow()](/docs/api/ShallowWrapper/shallow.md)
     * [render()](/docs/api/ShallowWrapper/render.md)
+    * [unmount()](/docs/api/ShallowWrapper/unmount.md)
     * [text()](/docs/api/ShallowWrapper/text.md)
     * [html()](/docs/api/ShallowWrapper/html.md)
     * [get(index)](/docs/api/ShallowWrapper/get.md)

docs/api/ShallowWrapper/unmount.md

@@ -0,0 +1,34 @@
+# `.unmount() => Self`
+
+A method that unmounts the component. This can be used to simulate a component going through
+an unmount/mount lifecycle.
+
+#### Returns
+
+`ShallowWrapper`: Returns itself.
+
+
+
+#### Example
+
+```jsx
+const spy = sinon.spy();
+
+class Foo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.componentWillUnmount = spy;
+  }
+  render() {
+    return (
+      <div className={this.props.id}>
+        {this.props.id}
+      </div>
+    );
+  }
+}
+const wrapper = shallow(<Foo id="foo" />);
+expect(spy.calledOnce).to.equal(false);
+wrapper.unmount();
+expect(spy.calledOnce).to.equal(true);
+```

docs/api/shallow.md

@@ -103,6 +103,9 @@ Shallow renders the current node and returns a shallow wrapper around it.
 #### [`.render() => CheerioWrapper`](ShallowWrapper/render.md)
 Returns a CheerioWrapper of the current node's subtree.
 
+#### [`.unmount() => ShallowWrapper`](ShallowWrapper/unmount.md)
+A method that un-mounts the component.
+
 #### [`.text() => String`](ShallowWrapper/text.md)
 Returns a string representation of the text nodes in the current render tree.
 

src/ShallowWrapper.js

@@ -324,6 +324,16 @@ export default class ShallowWrapper {
     return this.type() === null ? cheerio() : cheerio.load(this.html()).root();
   }
 
+  /**
+   * A method that unmounts the component. This can be used to simulate a component going through
+   * and unmount/mount lifecycle.
+   * @returns {ShallowWrapper}
+   */
+  unmount() {
+    this.renderer.unmount();
+    return this;
+  }
+
   /**
    * Used to simulate events. Pass an eventname and (optionally) event arguments. This method of
    * testing events should be met with some skepticism.

src/react-compat.js

@@ -1,5 +1,6 @@
 /* eslint react/no-deprecated: 0 */
 import { REACT013 } from './version';
+import objectAssign from 'object.assign';
 
 let TestUtils;
 let createShallowRenderer;
@@ -80,27 +81,27 @@ if (REACT013) {
   // shallow rendering when it's just a DOM element.
   createShallowRenderer = function createRendererCompatible() {
     const renderer = TestUtils.createRenderer();
+    const originalRender = renderer.render;
+    const originalRenderOutput = renderer.getRenderOutput;
     let isDOM = false;
     let _node;
-    return {
-      _instance: renderer._instance,
+    return objectAssign(renderer, {
       render(node, context) {
         if (typeof node.type === 'string') {
           isDOM = true;
           _node = node;
         } else {
           isDOM = false;
-          renderer.render(node, context);
-          this._instance = renderer._instance;
+          return originalRender.call(this, node, context);
         }
       },
       getRenderOutput() {
         if (isDOM) {
           return _node;
         }
-        return renderer.getRenderOutput();
+        return originalRenderOutput.call(this);
       },
-    };
+    });
   };
   renderIntoDocument = TestUtils.renderIntoDocument;
   childrenToArray = React.Children.toArray;

test/ShallowWrapper-spec.js

@@ -1644,6 +1644,30 @@ describe('shallow', () => {
 
   });
 
+  describe('.unmount()', () => {
+    it('should call componentWillUnmount()', () => {
+      const spy = sinon.spy();
+
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props);
+          this.componentWillUnmount = spy;
+        }
+        render() {
+          return (
+            <div className={this.props.id}>
+              {this.props.id}
+            </div>
+          );
+        }
+      }
+      const wrapper = shallow(<Foo id="foo" />);
+      expect(spy.calledOnce).to.equal(false);
+      wrapper.unmount();
+      expect(spy.calledOnce).to.equal(true);
+    });
+  });
+
   describe('.render()', () => {
 
     it('should return a cheerio wrapper around the current node', () => {