[enzyme] [new] & [fix]: render: handle Fiber strings and numbers

 - [enzyme] [fix] `render`: handle Fiber strings and numbers
 - [enzyme] [new] `Utils`: add `loadCheerioRoot`

Fixes #2098

Author: ottosichert

packages/enzyme-test-suite/test/Utils-spec.jsx

@@ -14,6 +14,7 @@ import {
   isEmptyValue,
   renderedDive,
   isCustomComponent,
+  loadCheerioRoot,
 } from 'enzyme/build/Utils';
 import getAdapter from 'enzyme/build/getAdapter';
 import EnzymeAdapter from 'enzyme/build/EnzymeAdapter';
@@ -1073,4 +1074,17 @@ describe('Utils', () => {
       expect(() => isCustomComponent({}, {})).to.throw(Error);
     });
   });
+
+  describe('loadCheerioRoot', () => {
+    it('always returns a Cheerio instance', () => {
+      expect(loadCheerioRoot()).to.have.property('cheerio', '[cheerio object]');
+      expect(loadCheerioRoot(null)).to.have.property('cheerio', '[cheerio object]');
+      expect(loadCheerioRoot('')).to.have.property('cheerio', '[cheerio object]');
+      expect(loadCheerioRoot('foo')).to.have.property('cheerio', '[cheerio object]');
+      expect(loadCheerioRoot('123')).to.have.property('cheerio', '[cheerio object]');
+      expect(loadCheerioRoot('<div>bar</div>')).to.have.property('cheerio', '[cheerio object]');
+      expect(loadCheerioRoot('leading <span>text</span>')).to.have.property('cheerio', '[cheerio object]');
+      expect(loadCheerioRoot('<div>malformed</><<html')).to.have.property('cheerio', '[cheerio object]');
+    });
+  });
 });

packages/enzyme-test-suite/test/staticRender-spec.jsx

@@ -78,7 +78,51 @@ describeWithDOM('render', () => {
       });
 
       const context = { name: 'foo' };
-      expect(() => render(<SimpleComponent />, { context })).to.not.throw(Error);
+      expect(() => render(<SimpleComponent />, { context })).not.to.throw();
+    });
+  });
+
+  describe('rendering non-elements', () => {
+    it('can render strings', () => {
+      const StringComponent = createClass({
+        render() {
+          return 'foo';
+        },
+      });
+
+      const getWrapper = (options) => render(<StringComponent />, options);
+      if (is('>= 16')) {
+        expect(getWrapper).to.not.throw();
+
+        const wrapper = getWrapper();
+        expect(wrapper.text()).to.equal('foo');
+        expect(wrapper.html()).to.equal('foo');
+        expect(String(wrapper)).to.equal('foo');
+        expect(wrapper).to.have.lengthOf(1);
+      } else {
+        expect(getWrapper).to.throw();
+      }
+    });
+
+    it('can render numbers', () => {
+      const NumberComponent = createClass({
+        render() {
+          return 42;
+        },
+      });
+
+      const getWrapper = (options) => render(<NumberComponent />, options);
+      if (is('>= 16')) {
+        expect(getWrapper).to.not.throw();
+
+        const wrapper = getWrapper();
+        expect(wrapper.text()).to.equal('42');
+        expect(wrapper.html()).to.equal('42');
+        expect(String(wrapper)).to.equal('42');
+        expect(wrapper).to.have.lengthOf(1);
+      } else {
+        expect(getWrapper).to.throw();
+      }
     });
   });
 

packages/enzyme/package.json

@@ -36,7 +36,7 @@
   "license": "MIT",
   "dependencies": {
     "array.prototype.flat": "^1.2.1",
-    "cheerio": "^1.0.0-rc.2",
+    "cheerio": "^1.0.0-rc.3",
     "enzyme-shallow-equal": "^1.0.0",
     "function.prototype.name": "^1.1.0",
     "has": "^1.0.3",

packages/enzyme/src/ReactWrapper.js

@@ -1,4 +1,3 @@
-import cheerio from 'cheerio';
 import flat from 'array.prototype.flat';
 import has from 'has';
 
@@ -15,6 +14,7 @@ import {
   cloneElement,
   renderedDive,
   isCustomComponent,
+  loadCheerioRoot,
 } from './Utils';
 import getAdapter from './getAdapter';
 import { debugNodes } from './Debug';
@@ -650,7 +650,7 @@ class ReactWrapper {
    */
   render() {
     const html = this.html();
-    return html === null ? cheerio() : cheerio.load('')(html);
+    return loadCheerioRoot(html);
   }
 
   /**

packages/enzyme/src/ShallowWrapper.js

@@ -1,5 +1,4 @@
 import flat from 'array.prototype.flat';
-import cheerio from 'cheerio';
 import has from 'has';
 import shallowEqual from 'enzyme-shallow-equal';
 
@@ -20,6 +19,7 @@ import {
   cloneElement,
   spyMethod,
   isEmptyValue,
+  loadCheerioRoot,
 } from './Utils';
 import getAdapter from './getAdapter';
 import { debugNodes } from './Debug';
@@ -1103,7 +1103,8 @@ class ShallowWrapper {
    * @returns {CheerioWrapper}
    */
   render() {
-    return this.type() === null ? cheerio() : cheerio.load('')(this.html());
+    const html = this.html();
+    return loadCheerioRoot(html);
   }
 
   /**

packages/enzyme/src/Utils.js

@@ -6,6 +6,8 @@ import functionName from 'function.prototype.name';
 import has from 'has';
 import flat from 'array.prototype.flat';
 import trim from 'string.prototype.trim';
+import cheerio from 'cheerio';
+import { isHtml } from 'cheerio/lib/utils';
 
 import { get } from './configuration';
 import { childrenOfNode } from './RSTTraversal';
@@ -350,3 +352,16 @@ export function renderedDive(nodes) {
     return isEmptyValue(n);
   });
 }
+
+export function loadCheerioRoot(html) {
+  if (!html) {
+    return cheerio.root();
+  }
+
+  if (!isHtml(html)) {
+    // use isDocument=false to create fragment
+    return cheerio.load(html, null, false).root();
+  }
+
+  return cheerio.load('')(html);
+}

packages/enzyme/src/render.js

@@ -1,5 +1,5 @@
-import cheerio from 'cheerio';
 import getAdapter from './getAdapter';
+import { loadCheerioRoot } from './Utils';
 
 /**
  * Renders a react component into static HTML and provides a cheerio wrapper around it. This is
@@ -19,5 +19,5 @@ export default function render(node, options = {}) {
   const adapter = getAdapter(options);
   const renderer = adapter.createRenderer({ mode: 'string', ...options });
   const html = renderer.render(node, options.context);
-  return cheerio.load('')(html);
+  return loadCheerioRoot(html);
 }