Add fragment validation function

packages/react/src/React.js

@@ -17,6 +17,7 @@ import {
   createFactory,
   cloneElement,
   isValidElement,
+  isValidFragmentElement,
 } from './ReactElement';
 import {
   createElementWithValidation,
@@ -44,6 +45,7 @@ const React = {
   cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
   createFactory: __DEV__ ? createFactoryWithValidation : createFactory,
   isValidElement: isValidElement,
+  isValidFragmentElement: isValidFragmentElement,
 
   version: ReactVersion,
 

packages/react/src/ReactElement.js

@@ -6,7 +6,7 @@
  */
 
 import warning from 'fbjs/lib/warning';
-import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
 
@@ -368,3 +368,13 @@ export function isValidElement(object) {
     object.$$typeof === REACT_ELEMENT_TYPE
   );
 }
+
+/**
+ * Verifies the object is a ReactFragmentElement.
+ * @param {?object} object
+ * @return {boolean} True if `object` is a valid fragment component.
+ * @final
+ */
+export function isValidFragmentElement(object) {
+  return isValidElement(object) && object.type === REACT_FRAGMENT_TYPE;
+}

packages/react/src/ReactElementValidator.js

@@ -273,7 +273,6 @@ function validateFragmentProps(fragment) {
       getStackAddendum(),
     );
   }
-
   currentlyValidatingElement = null;
 }
 

packages/react/src/__tests__/ReactElement-test.js

@@ -314,6 +314,52 @@ describe('ReactElement', () => {
     expect(React.isValidElement(JSON.parse(jsonElement))).toBe(true);
   });
 
+  // NOTE: We're explicitly not using JSX here. This is intended to test
+  // classic JS without JSX.
+  it('identifies valid fragment elements', () => {
+    // because we set global.Symbol = undefined in the beforeEach of some tests
+    // so we can't use `Object.keys` together with `for of` syntax
+    // in the 'validateFragmentProps' function of ReactElementValidator.js
+    // it will throw TypeError: can not read property 'interator' of undefined
+    // so we have to set it to orgin value
+    global.Symbol = originalSymbol;
+
+    class Component extends React.Component {
+      render() {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.createElement('div'),
+        );
+      }
+    }
+
+    expect(
+      React.isValidFragmentElement(
+        React.createElement(React.Fragment, null, React.createElement('div')),
+      ),
+    ).toEqual(true);
+
+    expect(
+      React.isValidFragmentElement(React.createElement(Component)),
+    ).toEqual(false);
+    expect(React.isValidFragmentElement(null)).toEqual(false);
+    expect(React.isValidFragmentElement(true)).toEqual(false);
+    expect(React.isValidFragmentElement({})).toEqual(false);
+    expect(React.isValidFragmentElement('string')).toEqual(false);
+    expect(React.isValidFragmentElement(React.createFactory('div'))).toEqual(
+      false,
+    );
+    expect(React.isValidFragmentElement(Component)).toEqual(false);
+    expect(
+      React.isValidFragmentElement({type: React.Fragment, props: {}}),
+    ).toEqual(false);
+
+    const jsonElement = JSON.stringify(React.createElement(React.Fragment));
+    expect(jsonElement).not.toHaveProperty('type');
+    expect(React.isValidFragmentElement(JSON.parse(jsonElement))).toBe(true);
+  });
+
   // NOTE: We're explicitly not using JSX here. This is intended to test
   // classic JS without JSX.
   it('is indistinguishable from a plain object', () => {

packages/react/src/__tests__/ReactJSXElement-test.js

@@ -165,6 +165,21 @@ describe('ReactJSXElement', () => {
     expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
   });
 
+  it('identifies valid fragment elements', () => {
+    expect(React.isValidFragmentElement(<React.Fragment />)).toEqual(true);
+
+    expect(React.isValidFragmentElement(<div />)).toEqual(false);
+    expect(React.isValidFragmentElement(<Component />)).toEqual(false);
+    expect(React.isValidFragmentElement(null)).toEqual(false);
+    expect(React.isValidFragmentElement(true)).toEqual(false);
+    expect(React.isValidFragmentElement({})).toEqual(false);
+    expect(React.isValidFragmentElement('string')).toEqual(false);
+    expect(React.isValidFragmentElement(Component)).toEqual(false);
+    expect(React.isValidFragmentElement({type: 'div', props: {}})).toEqual(
+      false,
+    );
+  });
+
   it('is indistinguishable from a plain object', () => {
     const element = <div className="foo" />;
     const object = {};