feat: toArray support Fragment

package.json

@@ -34,6 +34,7 @@
     "react-dom": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
+    "@types/enzyme": "^3.10.5",
     "@types/jest": "^24.0.23",
     "@types/react": "^16.9.3",
     "@types/react-dom": "^16.9.1",
@@ -52,6 +53,7 @@
     "add-dom-event-listener": "^1.1.0",
     "babel-runtime": "6.x",
     "prop-types": "^15.5.10",
+    "react-is": "^16.12.0",
     "react-lifecycles-compat": "^3.0.4",
     "shallowequal": "^1.1.0"
   }

src/Children/toArray.ts

@@ -1,9 +1,18 @@
 import React from 'react';
+import { isFragment } from 'react-is';
 
-export default function toArray(children: React.ReactNode): React.ReactElement[] {
-  const ret = [];
-  React.Children.forEach(children, c => {
-    ret.push(c);
+export default function toArray(
+  children: React.ReactNode,
+): React.ReactElement[] {
+  let ret: React.ReactElement[] = [];
+
+  React.Children.forEach(children, (child: any) => {
+    if (isFragment(child) && child.props) {
+      ret = ret.concat(toArray(child.props.children));
+    } else {
+      ret.push(child);
+    }
   });
+
   return ret;
 }

tests/toArray.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import toArray from '../src/Children/toArray';
+
+describe('toArray', () => {
+  it('basic', () => {
+    const wrapper = mount(
+      <ul>
+        <li key="1">1</li>
+        <li key="2">2</li>
+        <li key="3">3</li>
+      </ul>,
+    );
+
+    const children = toArray(wrapper.props().children);
+    expect(children).toHaveLength(3);
+    expect(children.map(c => c.key)).toEqual(['1', '2', '3']);
+  });
+
+  it('Array', () => {
+    const wrapper = mount(
+      <ul>
+        <li key="1">1</li>
+        {[<li key="2">2</li>, <li key="3">3</li>]}
+      </ul>,
+    );
+
+    const children = toArray(wrapper.props().children);
+    expect(children).toHaveLength(3);
+    expect(children.map(c => c.key)).toEqual(['1', '2', '3']);
+  });
+
+  it('Fragment', () => {
+    const wrapper = mount(
+      <ul>
+        <li key="1">1</li>
+        <>
+          <li key="2">2</li>
+          <li key="3">3</li>
+        </>
+        <React.Fragment>
+          <>
+            <li key="4">4</li>
+            <li key="5">5</li>
+          </>
+        </React.Fragment>
+      </ul>,
+    );
+
+    const children = toArray(wrapper.props().children);
+    expect(children).toHaveLength(5);
+    expect(children.map(c => c.key)).toEqual(['1', '2', '3', '4', '5']);
+  });
+});