Fixes shallow rendering of component children (fixes #5292)

src/test/ReactTestUtils.js

@@ -375,10 +375,32 @@ ReactShallowRenderer.prototype.getMountedInstance = function() {
 };
 
 var NoopInternalComponent = function(element) {
-  this._renderedOutput = element;
+  if (element && element.props && element.props.children) {
+    var children = NoopInternalChildren(element.props.children);
+    var props = assign({}, element.props, { children: children });
+    this._renderedOutput = assign({}, element, { props: props });
+  } else {
+    this._renderedOutput = element;
+  }
   this._currentElement = element;
 };
 
+var NoopInternalChildren = function(children) {
+  if (Array.isArray(children)) {
+    return children.map(NoopInternalChildren);
+  } else if (children === Object(children)) {
+    return NoopInternalChild(children);
+  }
+  return children;
+};
+
+var NoopInternalChild = function(child) {
+  var props = child.props && child.props.children ? assign({}, child.props, {
+    children: NoopInternalChildren(child.props.children),
+  }) : child.props;
+  return assign({}, child, { _owner: null }, { props: props });
+};
+
 NoopInternalComponent.prototype = {
 
   mountComponent: function() {

src/test/__tests__/ReactTestUtils-test.js

@@ -209,6 +209,44 @@ describe('ReactTestUtils', function() {
     expect(result).toEqual(<div>foo</div>);
   });
 
+  it('can shallow render components with stateful children', function() {
+    var Component = React.createClass({
+      getInitialState: function() {
+        return {
+          body: (
+            <ul className="bar">
+              <li><div>Item 1</div></li>
+              <li>Item 2</li>
+              Item 3
+            </ul>
+          ),
+        };
+      },
+
+      render: function() {
+        return (
+          <div className="foo">
+            {this.state.body}
+          </div>
+        );
+      },
+    });
+
+    var shallowRenderer = ReactTestUtils.createRenderer();
+    shallowRenderer.render(<Component />);
+    var result = shallowRenderer.getRenderOutput();
+
+    expect(result).toEqual(
+      <div className="foo">
+        <ul className="bar">
+          <li><div>Item 1</div></li>
+          <li>Item 2</li>
+          Item 3
+        </ul>
+      </div>
+    );
+  });
+
   it('can scryRenderedDOMComponentsWithClass with TextComponent', function() {
     var Wrapper = React.createClass({
       render: function() {