Merge pull request #196 from airbnb/ljharb/type_null

Ensure that `ShallowWrapper` and `ReactWrapper` handle a null child correctly

docs/api/ShallowWrapper/type.md

@@ -1,14 +1,14 @@
-# `.type() => String|Function`
+# `.type() => String|Function|null`
 
 Returns the type of the current node of this wrapper. If it's a composite component, this will be
-the component constructor. If it's native DOM node, it will be a string of the tag name.
+the component constructor. If it's native DOM node, it will be a string of the tag name. If it's `null`, it will be `null`.
 
 Note: can only be called on a wrapper of a single node.
 
 
 #### Returns
 
-`String|Function`: The type of the current node
+`String|Function|null`: The type of the current node
 
 
 
@@ -23,3 +23,13 @@ expect(wrapper.type()).to.equal('div');
 const wrapper = shallow(<Foo />);
 expect(wrapper.type()).to.equal(Foo);
 ```
+
+```jsx
+class Null extends React.Component {
+  render() {
+    return null;
+  }
+}
+const wrapper = shallow(<Null />);
+expect(wrapper.type()).to.equal(null);
+```

src/ReactWrapper.js

@@ -342,7 +342,10 @@ export default class ReactWrapper {
    * @returns {String}
    */
   html() {
-    return this.single(n => findDOMNode(n).outerHTML.replace(/\sdata-reactid+="[^"]+"/g, ''));
+    return this.single(n => {
+      const node = findDOMNode(n);
+      return node === null ? null : node.outerHTML.replace(/\sdata-reactid+="[^"]+"/g, '');
+    });
   }
 
   /**
@@ -353,7 +356,8 @@ export default class ReactWrapper {
    * @returns {CheerioWrapper}
    */
   render() {
-    return cheerio.load(this.html()).root();
+    const html = this.html();
+    return html === null ? cheerio() : cheerio.load(html).root();
   }
 
   /**

src/ShallowWrapper.js

@@ -310,7 +310,7 @@ export default class ShallowWrapper {
    * @returns {String}
    */
   html() {
-    return this.single(renderToStaticMarkup);
+    return this.single(n => this.type() === null ? null : renderToStaticMarkup(n));
   }
 
   /**
@@ -321,7 +321,7 @@ export default class ShallowWrapper {
    * @returns {CheerioWrapper}
    */
   render() {
-    return cheerio.load(this.html()).root();
+    return this.type() === null ? cheerio() : cheerio.load(this.html()).root();
   }
 
   /**

test/ReactWrapper-spec.js

@@ -1763,4 +1763,18 @@ describeWithDOM('mount', () => {
     });
   });
 
+  it('works with components that return null', () => {
+    class Foo extends React.Component {
+      render() {
+        return null;
+      }
+    }
+    const wrapper = mount(<Foo />);
+    expect(wrapper).to.have.length(1);
+    expect(wrapper.type()).to.equal(Foo);
+    expect(wrapper.html()).to.equal(null);
+    const rendered = wrapper.render();
+    expect(rendered.length).to.equal(0);
+    expect(rendered.html()).to.equal(null);
+  });
 });

test/ShallowWrapper-spec.js

@@ -1670,4 +1670,18 @@ describe('shallow', () => {
 
   });
 
+  it('works with components that return null', () => {
+    class Foo extends React.Component {
+      render() {
+        return null;
+      }
+    }
+    const wrapper = shallow(<Foo />);
+    expect(wrapper).to.have.length(1);
+    expect(wrapper.html()).to.equal(null);
+    expect(wrapper.type()).to.equal(null);
+    const rendered = wrapper.render();
+    expect(rendered.length).to.equal(0);
+    expect(rendered.html()).to.equal(null);
+  });
 });