Always run React.Fragment tests (#11430)

packages/react-dom/src/__tests__/ReactDOMServerIntegration-test.js

@@ -316,6 +316,7 @@ function resetModules() {
 
   // TODO: can we express this test with only public API?
   ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
+  require('shared/ReactFeatureFlags').enableReactFragment = true;
 
   PropTypes = require('prop-types');
   React = require('react');
@@ -326,6 +327,7 @@ function resetModules() {
   // Resetting is important because we want to avoid any shared state
   // influencing the tests.
   jest.resetModuleRegistry();
+  require('shared/ReactFeatureFlags').enableReactFragment = true;
   ReactDOMServer = require('react-dom/server');
 }
 
@@ -404,56 +406,54 @@ describe('ReactDOMServerIntegration', () => {
       expect(parent.childNodes[2].tagName).toBe('P');
     });
 
-    if (ReactFeatureFlags.enableReactFragment) {
-      itRenders('a fragment with one child', async render => {
-        let e = await render(<React.Fragment><div>text1</div></React.Fragment>);
-        let parent = e.parentNode;
-        expect(parent.childNodes[0].tagName).toBe('DIV');
-      });
+    itRenders('a fragment with one child', async render => {
+      let e = await render(<React.Fragment><div>text1</div></React.Fragment>);
+      let parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+    });
 
-      itRenders('a fragment with several children', async render => {
-        let Header = props => {
-          return <p>header</p>;
-        };
-        let Footer = props => {
-          return <React.Fragment><h2>footer</h2><h3>about</h3></React.Fragment>;
-        };
-        let e = await render(
+    itRenders('a fragment with several children', async render => {
+      let Header = props => {
+        return <p>header</p>;
+      };
+      let Footer = props => {
+        return <React.Fragment><h2>footer</h2><h3>about</h3></React.Fragment>;
+      };
+      let e = await render(
+        <React.Fragment>
+          <div>text1</div>
+          <span>text2</span>
+          <Header />
+          <Footer />
+        </React.Fragment>,
+      );
+      let parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+      expect(parent.childNodes[3].tagName).toBe('H2');
+      expect(parent.childNodes[4].tagName).toBe('H3');
+    });
+
+    itRenders('a nested fragment', async render => {
+      let e = await render(
+        <React.Fragment>
           <React.Fragment>
             <div>text1</div>
-            <span>text2</span>
-            <Header />
-            <Footer />
-          </React.Fragment>,
-        );
-        let parent = e.parentNode;
-        expect(parent.childNodes[0].tagName).toBe('DIV');
-        expect(parent.childNodes[1].tagName).toBe('SPAN');
-        expect(parent.childNodes[2].tagName).toBe('P');
-        expect(parent.childNodes[3].tagName).toBe('H2');
-        expect(parent.childNodes[4].tagName).toBe('H3');
-      });
-
-      itRenders('a nested fragment', async render => {
-        let e = await render(
+          </React.Fragment>
+          <span>text2</span>
           <React.Fragment>
             <React.Fragment>
-              <div>text1</div>
+              <React.Fragment>{null}<p /></React.Fragment>{false}
             </React.Fragment>
-            <span>text2</span>
-            <React.Fragment>
-              <React.Fragment>
-                <React.Fragment>{null}<p /></React.Fragment>{false}
-              </React.Fragment>
-            </React.Fragment>
-          </React.Fragment>,
-        );
-        let parent = e.parentNode;
-        expect(parent.childNodes[0].tagName).toBe('DIV');
-        expect(parent.childNodes[1].tagName).toBe('SPAN');
-        expect(parent.childNodes[2].tagName).toBe('P');
-      });
-    }
+          </React.Fragment>
+        </React.Fragment>,
+      );
+      let parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+    });
 
     itRenders('an iterable', async render => {
       const threeDivIterable = {
@@ -487,9 +487,7 @@ describe('ReactDOMServerIntegration', () => {
       // but server returns empty HTML. So we compare parent text.
       expect((await render(<div>{''}</div>)).textContent).toBe('');
 
-      if (ReactFeatureFlags.enableReactFragment) {
-        expect(await render(<React.Fragment />)).toBe(null);
-      }
+      expect(await render(<React.Fragment />)).toBe(null);
       expect(await render([])).toBe(null);
       expect(await render(false)).toBe(null);
       expect(await render(true)).toBe(null);

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

@@ -29,6 +29,9 @@ describe('ReactJSXElementValidator', () => {
   beforeEach(() => {
     jest.resetModules();
 
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableReactFragment = true;
+
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
@@ -87,50 +90,48 @@ describe('ReactJSXElementValidator', () => {
     );
   });
 
-  if (ReactFeatureFlags.enableReactFragment) {
-    it('warns for fragments with illegal attributes', () => {
-      spyOn(console, 'error');
+  it('warns for fragments with illegal attributes', () => {
+    spyOn(console, 'error');
 
-      class Foo extends React.Component {
-        render() {
-          return <React.Fragment a={1} b={2}>hello</React.Fragment>;
-        }
+    class Foo extends React.Component {
+      render() {
+        return <React.Fragment a={1} b={2}>hello</React.Fragment>;
       }
+    }
 
-      ReactTestUtils.renderIntoDocument(<Foo />);
+    ReactTestUtils.renderIntoDocument(<Foo />);
 
-      expectDev(console.error.calls.count()).toBe(1);
-      expectDev(console.error.calls.argsFor(0)[0]).toContain('Invalid prop `');
-      expectDev(console.error.calls.argsFor(0)[0]).toContain(
-        '` supplied to `React.Fragment`. React.Fragment ' +
-          'can only have `key` and `children` props.',
-      );
-    });
+    expectDev(console.error.calls.count()).toBe(1);
+    expectDev(console.error.calls.argsFor(0)[0]).toContain('Invalid prop `');
+    expectDev(console.error.calls.argsFor(0)[0]).toContain(
+      '` supplied to `React.Fragment`. React.Fragment ' +
+        'can only have `key` and `children` props.',
+    );
+  });
 
-    it('warns for fragments with refs', () => {
-      spyOn(console, 'error');
+  it('warns for fragments with refs', () => {
+    spyOn(console, 'error');
 
-      class Foo extends React.Component {
-        render() {
-          return (
-            <React.Fragment
-              ref={bar => {
-                this.foo = bar;
-              }}>
-              hello
-            </React.Fragment>
-          );
-        }
+    class Foo extends React.Component {
+      render() {
+        return (
+          <React.Fragment
+            ref={bar => {
+              this.foo = bar;
+            }}>
+            hello
+          </React.Fragment>
+        );
       }
+    }
 
-      ReactTestUtils.renderIntoDocument(<Foo />);
+    ReactTestUtils.renderIntoDocument(<Foo />);
 
-      expectDev(console.error.calls.count()).toBe(1);
-      expectDev(console.error.calls.argsFor(0)[0]).toContain(
-        'Invalid attribute `ref` supplied to `React.Fragment`.',
-      );
-    });
-  }
+    expectDev(console.error.calls.count()).toBe(1);
+    expectDev(console.error.calls.argsFor(0)[0]).toContain(
+      'Invalid attribute `ref` supplied to `React.Fragment`.',
+    );
+  });
 
   it('warns for keys for iterables of elements in rest args', () => {
     spyOn(console, 'error');
@@ -155,33 +156,31 @@ describe('ReactJSXElementValidator', () => {
     );
   });
 
-  if (ReactFeatureFlags.enableReactFragment) {
-    it('does not warn for fragments of multiple elements without keys', () => {
-      ReactTestUtils.renderIntoDocument(
-        <React.Fragment>
-          <span>1</span>
-          <span>2</span>
-        </React.Fragment>,
-      );
-    });
+  it('does not warn for fragments of multiple elements without keys', () => {
+    ReactTestUtils.renderIntoDocument(
+      <React.Fragment>
+        <span>1</span>
+        <span>2</span>
+      </React.Fragment>,
+    );
+  });
 
-    it('warns for fragments of multiple elements with same key', () => {
-      spyOn(console, 'error');
+  it('warns for fragments of multiple elements with same key', () => {
+    spyOn(console, 'error');
 
-      ReactTestUtils.renderIntoDocument(
-        <React.Fragment>
-          <span key="a">1</span>
-          <span key="a">2</span>
-          <span key="b">3</span>
-        </React.Fragment>,
-      );
+    ReactTestUtils.renderIntoDocument(
+      <React.Fragment>
+        <span key="a">1</span>
+        <span key="a">2</span>
+        <span key="b">3</span>
+      </React.Fragment>,
+    );
 
-      expectDev(console.error.calls.count()).toBe(1);
-      expectDev(console.error.calls.argsFor(0)[0]).toContain(
-        'Encountered two children with the same key, `a`.',
-      );
-    });
-  }
+    expectDev(console.error.calls.count()).toBe(1);
+    expectDev(console.error.calls.argsFor(0)[0]).toContain(
+      'Encountered two children with the same key, `a`.',
+    );
+  });
 
   it('does not warn for arrays of elements with keys', () => {
     spyOn(console, 'error');