[Fix] render: handle Fiber strings and numbers

- Fix enzymejs#2098
- Introduce `loadCheerioRoot` util
- Use util in `render`, `mount` and `shallow`

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

@@ -82,6 +82,42 @@ describeWithDOM('render', () => {
     });
   });
 
+  describeIf(is('>= 16'), 'React Fiber', () => {
+    it('can render strings', () => {
+      const StringComponent = createClass({
+        render() {
+          return 'foo';
+        },
+      });
+
+      const getWrapper = options => render(<StringComponent />, options);
+      expect(getWrapper).to.not.throw(Error);
+
+      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);
+    });
+
+    it('can render numbers', () => {
+      const NumberComponent = createClass({
+        render() {
+          return 42;
+        },
+      });
+
+      const getWrapper = options => render(<NumberComponent />, options);
+      expect(getWrapper).to.not.throw(Error);
+
+      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);
+    });
+  });
+
   describeIf(is('> 16.6'), 'suspense fallback option', () => {
     it('throws if options.suspenseFallback is specified', () => {
       class DynamicComponent extends React.Component {

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);
 }