Improved handling for mixed children case

Author: Brian Vaughn

packages/react-test-renderer/src/ReactTestHostConfig.js

@@ -86,6 +86,11 @@ export function removeChild(
   parentInstance: Instance | Container,
   child: Instance | TextInstance,
 ): void {
+  // Detect and ignore ReactDOM.createPortal() usage.
+  // Test renderer's toJSON() method knows how to handle this case.
+  if (parentInstance instanceof HTMLElement) {
+    return;
+  }
   const index = parentInstance.children.indexOf(child);
   parentInstance.children.splice(index, 1);
 }

packages/react-test-renderer/src/ReactTestRenderer.js

@@ -73,14 +73,18 @@ function toJSON(inst: Instance | TextInstance): ReactTestRendererNode {
       const {children, ...props} = inst.props;
       /* eslint-enable */
       let renderedChildren = null;
-      if (inst.children && inst.children.length) {
-        renderedChildren = inst.children.map(toJSON);
-      } else if (inst.props != null && inst.props.children != null) {
-        // The element's children are from another renderer (e.g. ReactDOM.createPortal)
+      if (inst.props != null && inst.props.children != null) {
+        // At least some of this element's children are from another renderer
+        // (e.g. ReactDOM.createPortal)
+        // In this case, treat all children as potentially from the other renderer.
+        // If we don't, the JSON representation may contain overlaps.
         renderedChildren = React.Children.toArray(inst.props.children).map(
           reactElementToJSON,
         );
+      } else if (inst.children && inst.children.length) {
+        renderedChildren = inst.children.map(toJSON);
       }
+
       const json: ReactTestRendererJSON = {
         type: inst.type,
         props: props,
@@ -97,10 +101,14 @@ function toJSON(inst: Instance | TextInstance): ReactTestRendererNode {
 
 function reactElementToJSON(inst: any): ReactTestRendererNode {
   if (typeof inst === 'object') {
+    /* eslint-disable no-unused-vars */
+    // We don't include the `children` prop in JSON.
+    // Instead, we will include the actual rendered children.
+    const {children, ...props} = inst.props != null ? inst.props : {};
     const type = typeOf(inst);
     return {
       type: type == null ? 'unknown' : type.toString(),
-      props: inst.props || {},
+      props,
       children: React.Children.toArray(
         inst.children || inst.props.children,
       ).map(reactElementToJSON),

packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js

@@ -17,10 +17,20 @@ jest.resetModules();
 const ReactTestRenderer = require('react-test-renderer');
 
 describe('ReactTestRenderer', () => {
-  it('should support ReactDOM portal', () => {
+  it('should support ReactDOM portal usage', () => {
     const container = document.createElement('div');
-    const rendered = ReactTestRenderer.create(
-      <div>{ReactDOM.createPortal(<span>Hi!</span>, container)}</div>,
+    let rendered = ReactTestRenderer.create(
+      <div>
+        {ReactDOM.createPortal(<span>Rendered by ReactDOM</span>, container)}
+      </div>,
+    );
+    expect(rendered.toJSON()).toMatchSnapshot();
+
+    rendered.update(
+      <div>
+        <span>Rendered by ReactTestRenderer</span>
+        {ReactDOM.createPortal(<span>Rendered by ReactDOM</span>, container)}
+      </div>,
     );
     expect(rendered.toJSON()).toMatchSnapshot();
   });

packages/react-test-renderer/src/__tests__/__snapshots__/ReactTestRenderer-test.js.snap

@@ -1,16 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ReactTestRenderer should support ReactDOM portal 1`] = `
+exports[`ReactTestRenderer should support ReactDOM portal usage 1`] = `
 <div>
   Object {
     "children": Array [
       Object {
         "children": Array [
-          "Hi!",
+          "Rendered by ReactDOM",
         ],
-        "props": Object {
-          "children": "Hi!",
-        },
+        "props": Object {},
+        "type": "Symbol(react.element)",
+      },
+    ],
+    "props": Object {},
+    "type": "Symbol(react.portal)",
+  }
+</div>
+`;
+
+exports[`ReactTestRenderer should support ReactDOM portal usage 2`] = `
+<div>
+  Object {
+    "children": Array [
+      "Rendered by ReactTestRenderer",
+    ],
+    "props": Object {},
+    "type": "Symbol(react.element)",
+  }
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          "Rendered by ReactDOM",
+        ],
+        "props": Object {},
         "type": "Symbol(react.element)",
       },
     ],