diff --git a/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js b/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js
index ec02e33f76433..c6da4b5eccdb3 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js
@@ -64,11 +64,11 @@ describe('editing interface', () => {
 
       act(() =>
         ReactDOM.render(
-          <ClassComponent
-            array={[1, 2, 3]}
-            object={{nested: 'initial'}}
-            shallow="initial"
-          />,
+          React.createElement(ClassComponent, {
+            array: [1, 2, 3],
+            object: {nested: 'initial'},
+            shallow: 'initial',
+          }),
           document.createElement('div'),
         ),
       );
@@ -270,7 +270,10 @@ describe('editing interface', () => {
 
       act(() =>
         ReactDOM.render(
-          <ClassComponent object={{nested: 'initial'}} shallow="initial" />,
+          React.createElement(ClassComponent, {
+            object: {nested: 'initial'},
+            shallow: 'initial',
+          }),
           document.createElement('div'),
         ),
       );
@@ -489,9 +492,11 @@ describe('editing interface', () => {
 
       act(() =>
         ReactDOM.render(
-          <LegacyContextProvider>
-            <ClassComponent />
-          </LegacyContextProvider>,
+          React.createElement(
+            LegacyContextProvider,
+            null,
+            React.createElement(ClassComponent),
+          ),
           document.createElement('div'),
         ),
       );
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 1940e82a80f40..10a355d0430f3 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -62,7 +62,10 @@ describe('InspectedElementContext', () => {
     const Example = () => null;
 
     act(() =>
-      ReactDOM.render(<Example a={1} b="abc" />, document.createElement('div')),
+      ReactDOM.render(
+        React.createElement(Example, {a: 1, b: 'abc'}),
+        document.createElement('div'),
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -91,19 +94,19 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example
-          boolean_false={false}
-          boolean_true={true}
-          infinity={Infinity}
-          integer_zero={0}
-          integer_one={1}
-          float={1.23}
-          string="abc"
-          string_empty=""
-          nan={NaN}
-          value_null={null}
-          value_undefined={undefined}
-        />,
+        React.createElement(Example, {
+          boolean_false: false,
+          boolean_true: true,
+          infinity: Infinity,
+          integer_zero: 0,
+          integer_one: 1,
+          float: 1.23,
+          string: 'abc',
+          string_empty: '',
+          nan: NaN,
+          value_null: null,
+          value_undefined: undefined,
+        }),
         document.createElement('div'),
       ),
     );
@@ -178,28 +181,28 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example
-          anonymous_fn={instance.anonymousFunction}
-          array_buffer={arrayBuffer}
-          array_of_arrays={arrayOfArrays}
+        React.createElement(Example, {
+          anonymous_fn: instance.anonymousFunction,
+          array_buffer: arrayBuffer,
+          array_of_arrays: arrayOfArrays,
           // eslint-disable-next-line no-undef
-          big_int={BigInt(123)}
-          bound_fn={exampleFunction.bind(this)}
-          data_view={dataView}
-          date={new Date(123)}
-          fn={exampleFunction}
-          html_element={div}
-          immutable={immutableMap}
-          map={mapShallow}
-          map_of_maps={mapOfMaps}
-          object_of_objects={objectOfObjects}
-          react_element={<span />}
-          regexp={/abc/giu}
-          set={setShallow}
-          set_of_sets={setOfSets}
-          symbol={Symbol('symbol')}
-          typed_array={typedArray}
-        />,
+          big_int: BigInt(123),
+          bound_fn: exampleFunction.bind(this),
+          data_view: dataView,
+          date: new Date(123),
+          fn: exampleFunction,
+          html_element: div,
+          immutable: immutableMap,
+          map: mapShallow,
+          map_of_maps: mapOfMaps,
+          object_of_objects: objectOfObjects,
+          react_element: React.createElement('span'),
+          regexp: /abc/giu,
+          set: setShallow,
+          set_of_sets: setOfSets,
+          symbol: Symbol('symbol'),
+          typed_array: typedArray,
+        }),
         document.createElement('div'),
       ),
     );
@@ -333,7 +336,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example object={object} />,
+        React.createElement(Example, {object}),
         document.createElement('div'),
       ),
     );
@@ -363,7 +366,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example object={object} />,
+        React.createElement(Example, {object}),
         document.createElement('div'),
       ),
     );
@@ -390,7 +393,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example iteratable={iteratable} />,
+        React.createElement(Example, {iteratable}),
         document.createElement('div'),
       ),
     );
@@ -445,7 +448,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example data={new CustomData()} />,
+        React.createElement(Example, {data: new CustomData()}),
         document.createElement('div'),
       ),
     );
@@ -537,7 +540,10 @@ describe('InspectedElementContext', () => {
     });
 
     act(() =>
-      ReactDOM.render(<Example data={object} />, document.createElement('div')),
+      ReactDOM.render(
+        React.createElement(Example, {data: object}),
+        document.createElement('div'),
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -605,7 +611,7 @@ describe('InspectedElementContext', () => {
     const Example = ({data}) => null;
     act(() =>
       ReactDOM.render(
-        <Example data={testData} />,
+        React.createElement(Example, {data: testData}),
         document.createElement('div'),
       ),
     );
@@ -631,8 +637,8 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example
-          nestedObject={{
+        React.createElement(Example, {
+          nestedObject: {
             a: {
               b: {
                 c: [
@@ -644,8 +650,8 @@ describe('InspectedElementContext', () => {
                 ],
               },
             },
-          }}
-        />,
+          },
+        }),
         document.createElement('div'),
       ),
     );
@@ -746,7 +752,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example nestedObject={nestedObject} />,
+        React.createElement(Example, {nestedObject}),
         document.createElement('div'),
       ),
     );
@@ -802,7 +808,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example nestedObject={nestedObject} />,
+        React.createElement(Example, {nestedObject}),
         document.createElement('div'),
       ),
     );
@@ -872,17 +878,17 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example
-          arrayBuffer={arrayBuffer}
-          dataView={dataView}
-          map={map}
-          set={set}
-          mapOfMaps={mapOfMaps}
-          setOfSets={setOfSets}
-          typedArray={typedArray}
-          immutable={immutable}
-          bigInt={bigInt}
-        />,
+        React.createElement(Example, {
+          arrayBuffer: arrayBuffer,
+          dataView: dataView,
+          map: map,
+          set: set,
+          mapOfMaps: mapOfMaps,
+          setOfSets: setOfSets,
+          typedArray: typedArray,
+          immutable: immutable,
+          bigInt: bigInt,
+        }),
         document.createElement('div'),
       ),
     );
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js b/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
index 3c24be0093d63..f912638fb508e 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -11,13 +11,10 @@ describe('Store (legacy)', () => {
   let React;
   let ReactDOM;
   let store;
-
   const act = (callback: Function) => {
     callback();
-
     jest.runAllTimers(); // Flush Bridge operations
   };
-
   beforeEach(() => {
     store = global.store;
 
@@ -27,56 +24,66 @@ describe('Store (legacy)', () => {
     jest.mock('react-dom', () =>
       jest.requireActual('react-dom-15/dist/react-dom.js'),
     );
-
     React = require('react');
     ReactDOM = require('react-dom');
   });
-
   it('should not allow a root node to be collapsed', () => {
-    const Component = () => <div>Hi</div>;
-
+    const Component = () => React.createElement('div', null, 'Hi');
     act(() =>
-      ReactDOM.render(<Component count={4} />, document.createElement('div')),
+      ReactDOM.render(
+        React.createElement(Component, {
+          count: 4,
+        }),
+        document.createElement('div'),
+      ),
     );
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Component>
             <div>
     `);
-
     expect(store.roots).toHaveLength(1);
-
     const rootID = store.roots[0];
-
     expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
       'Root nodes cannot be collapsed',
     );
   });
-
   describe('collapseNodesByDefault:false', () => {
     beforeEach(() => {
       store.collapseNodesByDefault = false;
     });
-
     it('should support mount and update operations', () => {
-      const Grandparent = ({count}) => (
-        <div>
-          <Parent count={count} />
-          <Parent count={count} />
-        </div>
-      );
-      const Parent = ({count}) => (
-        <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
-        </div>
-      );
-      const Child = () => <div>Hi!</div>;
-
+      const Grandparent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(Parent, {
+            count: count,
+          }),
+          React.createElement(Parent, {
+            count: count,
+          }),
+        );
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
       const container = document.createElement('div');
-
-      act(() => ReactDOM.render(<Grandparent count={4} />, container));
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+          }),
+          container,
+        ),
+      );
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <Grandparent>
@@ -102,8 +109,14 @@ describe('Store (legacy)', () => {
                   ▾ <Child key="3">
                       <div>
       `);
-
-      act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 2,
+          }),
+          container,
+        ),
+      );
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <Grandparent>
@@ -121,27 +134,38 @@ describe('Store (legacy)', () => {
                   ▾ <Child key="1">
                       <div>
       `);
-
       act(() => ReactDOM.unmountComponentAtNode(container));
       expect(store).toMatchInlineSnapshot(``);
     });
-
     it('should support mount and update operations for multiple roots', () => {
-      const Parent = ({count}) => (
-        <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
-        </div>
-      );
-      const Child = () => <div>Hi!</div>;
-
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
       const containerA = document.createElement('div');
       const containerB = document.createElement('div');
-
       act(() => {
-        ReactDOM.render(<Parent key="A" count={3} />, containerA);
-        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'A',
+            count: 3,
+          }),
+          containerA,
+        );
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'B',
+            count: 2,
+          }),
+          containerB,
+        );
       });
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -161,10 +185,21 @@ describe('Store (legacy)', () => {
               ▾ <Child key="1">
                   <div>
       `);
-
       act(() => {
-        ReactDOM.render(<Parent key="A" count={4} />, containerA);
-        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'A',
+            count: 4,
+          }),
+          containerA,
+        );
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'B',
+            count: 1,
+          }),
+          containerB,
+        );
       });
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -184,7 +219,6 @@ describe('Store (legacy)', () => {
               ▾ <Child key="0">
                   <div>
       `);
-
       act(() => ReactDOM.unmountComponentAtNode(containerB));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -199,35 +233,46 @@ describe('Store (legacy)', () => {
               ▾ <Child key="3">
                   <div>
       `);
-
       act(() => ReactDOM.unmountComponentAtNode(containerA));
       expect(store).toMatchInlineSnapshot(``);
     });
-
     it('should not filter DOM nodes from the store tree', () => {
-      const Grandparent = ({flip}) => (
-        <div>
-          <div>
-            <Parent flip={flip} />
-          </div>
-          <Parent flip={flip} />
-          <Nothing />
-        </div>
-      );
-      const Parent = ({flip}) => (
-        <div>
-          {flip ? 'foo' : null}
-          <Child />
-          {flip && [null, 'hello', 42]}
-          {flip ? 'bar' : 'baz'}
-        </div>
-      );
-      const Child = () => <div>Hi!</div>;
+      const Grandparent = ({flip}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(
+            'div',
+            null,
+            React.createElement(Parent, {
+              flip: flip,
+            }),
+          ),
+          React.createElement(Parent, {
+            flip: flip,
+          }),
+          React.createElement(Nothing, null),
+        );
+      const Parent = ({flip}) =>
+        React.createElement(
+          'div',
+          null,
+          flip ? 'foo' : null,
+          React.createElement(Child, null),
+          flip && [null, 'hello', 42],
+          flip ? 'bar' : 'baz',
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
       const Nothing = () => null;
-
       const container = document.createElement('div');
       act(() =>
-        ReactDOM.render(<Grandparent count={4} flip={false} />, container),
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+            flip: false,
+          }),
+          container,
+        ),
       );
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -244,9 +289,14 @@ describe('Store (legacy)', () => {
                       <div>
                 <Nothing>
       `);
-
       act(() =>
-        ReactDOM.render(<Grandparent count={4} flip={true} />, container),
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+            flip: true,
+          }),
+          container,
+        ),
       );
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -263,30 +313,37 @@ describe('Store (legacy)', () => {
                       <div>
                 <Nothing>
       `);
-
       act(() => ReactDOM.unmountComponentAtNode(container));
       expect(store).toMatchInlineSnapshot(``);
     });
-
     it('should support collapsing parts of the tree', () => {
-      const Grandparent = ({count}) => (
-        <div>
-          <Parent count={count} />
-          <Parent count={count} />
-        </div>
-      );
-      const Parent = ({count}) => (
-        <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
-        </div>
-      );
-      const Child = () => <div>Hi!</div>;
-
+      const Grandparent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(Parent, {
+            count: count,
+          }),
+          React.createElement(Parent, {
+            count: count,
+          }),
+        );
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
       act(() =>
         ReactDOM.render(
-          <Grandparent count={2} />,
+          React.createElement(Grandparent, {
+            count: 2,
+          }),
           document.createElement('div'),
         ),
       );
@@ -307,11 +364,9 @@ describe('Store (legacy)', () => {
                   ▾ <Child key="1">
                       <div>
       `);
-
       const grandparentID = store.getElementIDAtIndex(0);
       const parentOneID = store.getElementIDAtIndex(2);
       const parentTwoID = store.getElementIDAtIndex(8);
-
       act(() => store.toggleIsCollapsed(parentOneID, true));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -325,7 +380,6 @@ describe('Store (legacy)', () => {
                   ▾ <Child key="1">
                       <div>
       `);
-
       act(() => store.toggleIsCollapsed(parentTwoID, true));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -334,7 +388,6 @@ describe('Store (legacy)', () => {
               ▸ <Parent>
               ▸ <Parent>
       `);
-
       act(() => store.toggleIsCollapsed(parentOneID, false));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -348,13 +401,11 @@ describe('Store (legacy)', () => {
                       <div>
               ▸ <Parent>
       `);
-
       act(() => store.toggleIsCollapsed(grandparentID, true));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▸ <Grandparent>
       `);
-
       act(() => store.toggleIsCollapsed(grandparentID, false));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -369,18 +420,19 @@ describe('Store (legacy)', () => {
               ▸ <Parent>
       `);
     });
-
     it('should support adding and removing children', () => {
-      const Root = ({children}) => <div>{children}</div>;
-      const Component = () => <div />;
-
+      const Root = ({children}) => React.createElement('div', null, children);
+      const Component = () => React.createElement('div', null);
       const container = document.createElement('div');
-
       act(() =>
         ReactDOM.render(
-          <Root>
-            <Component key="a" />
-          </Root>,
+          React.createElement(
+            Root,
+            null,
+            React.createElement(Component, {
+              key: 'a',
+            }),
+          ),
           container,
         ),
       );
@@ -391,13 +443,18 @@ describe('Store (legacy)', () => {
               ▾ <Component key="a">
                   <div>
       `);
-
       act(() =>
         ReactDOM.render(
-          <Root>
-            <Component key="a" />
-            <Component key="b" />
-          </Root>,
+          React.createElement(
+            Root,
+            null,
+            React.createElement(Component, {
+              key: 'a',
+            }),
+            React.createElement(Component, {
+              key: 'b',
+            }),
+          ),
           container,
         ),
       );
@@ -410,12 +467,15 @@ describe('Store (legacy)', () => {
               ▾ <Component key="b">
                   <div>
       `);
-
       act(() =>
         ReactDOM.render(
-          <Root>
-            <Component key="b" />
-          </Root>,
+          React.createElement(
+            Root,
+            null,
+            React.createElement(Component, {
+              key: 'b',
+            }),
+          ),
           container,
         ),
       );
@@ -427,21 +487,34 @@ describe('Store (legacy)', () => {
                   <div>
       `);
     });
-
     it('should support reordering of children', () => {
-      const Root = ({children}) => <div>{children}</div>;
-      const Component = () => <div />;
-
-      const Foo = () => <div>{[<Component key="0" />]}</div>;
-      const Bar = () => (
-        <div>{[<Component key="0" />, <Component key="1" />]}</div>
-      );
-      const foo = <Foo key="foo" />;
-      const bar = <Bar key="bar" />;
-
+      const Root = ({children}) => React.createElement('div', null, children);
+      const Component = () => React.createElement('div', null);
+      const Foo = () =>
+        React.createElement('div', null, [
+          React.createElement(Component, {
+            key: '0',
+          }),
+        ]);
+      const Bar = () =>
+        React.createElement('div', null, [
+          React.createElement(Component, {
+            key: '0',
+          }),
+          React.createElement(Component, {
+            key: '1',
+          }),
+        ]);
+      const foo = React.createElement(Foo, {
+        key: 'foo',
+      });
+      const bar = React.createElement(Bar, {
+        key: 'bar',
+      });
       const container = document.createElement('div');
-
-      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      act(() =>
+        ReactDOM.render(React.createElement(Root, null, [foo, bar]), container),
+      );
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <Root>
@@ -457,8 +530,9 @@ describe('Store (legacy)', () => {
                   ▾ <Component key="1">
                       <div>
       `);
-
-      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      act(() =>
+        ReactDOM.render(React.createElement(Root, null, [bar, foo]), container),
+      );
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <Root>
@@ -474,13 +548,11 @@ describe('Store (legacy)', () => {
                   ▾ <Component key="0">
                       <div>
       `);
-
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▸ <Root>
       `);
-
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -499,30 +571,35 @@ describe('Store (legacy)', () => {
       `);
     });
   });
-
   describe('collapseNodesByDefault:true', () => {
     beforeEach(() => {
       store.collapseNodesByDefault = true;
     });
-
     it('should support mount and update operations', () => {
-      const Parent = ({count}) => (
-        <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
-        </div>
-      );
-      const Child = () => <div>Hi!</div>;
-
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
       const container = document.createElement('div');
-
       act(() =>
         ReactDOM.render(
-          <div>
-            <Parent count={1} />
-            <Parent count={3} />
-          </div>,
+          React.createElement(
+            'div',
+            null,
+            React.createElement(Parent, {
+              count: 1,
+            }),
+            React.createElement(Parent, {
+              count: 3,
+            }),
+          ),
           container,
         ),
       );
@@ -530,13 +607,18 @@ describe('Store (legacy)', () => {
         [root]
           ▸ <div>
       `);
-
       act(() =>
         ReactDOM.render(
-          <div>
-            <Parent count={2} />
-            <Parent count={1} />
-          </div>,
+          React.createElement(
+            'div',
+            null,
+            React.createElement(Parent, {
+              count: 2,
+            }),
+            React.createElement(Parent, {
+              count: 1,
+            }),
+          ),
           container,
         ),
       );
@@ -544,27 +626,38 @@ describe('Store (legacy)', () => {
         [root]
           ▸ <div>
       `);
-
       act(() => ReactDOM.unmountComponentAtNode(container));
       expect(store).toMatchInlineSnapshot(``);
     });
-
     it('should support mount and update operations for multiple roots', () => {
-      const Parent = ({count}) => (
-        <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
-        </div>
-      );
-      const Child = () => <div>Hi!</div>;
-
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
       const containerA = document.createElement('div');
       const containerB = document.createElement('div');
-
       act(() => {
-        ReactDOM.render(<Parent key="A" count={3} />, containerA);
-        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'A',
+            count: 3,
+          }),
+          containerA,
+        );
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'B',
+            count: 2,
+          }),
+          containerB,
+        );
       });
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -572,10 +665,21 @@ describe('Store (legacy)', () => {
         [root]
           ▸ <Parent key="B">
       `);
-
       act(() => {
-        ReactDOM.render(<Parent key="A" count={4} />, containerA);
-        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'A',
+            count: 4,
+          }),
+          containerA,
+        );
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'B',
+            count: 1,
+          }),
+          containerB,
+        );
       });
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -583,54 +687,62 @@ describe('Store (legacy)', () => {
         [root]
           ▸ <Parent key="B">
       `);
-
       act(() => ReactDOM.unmountComponentAtNode(containerB));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▸ <Parent key="A">
       `);
-
       act(() => ReactDOM.unmountComponentAtNode(containerA));
       expect(store).toMatchInlineSnapshot(``);
     });
-
     it('should not filter DOM nodes from the store tree', () => {
-      const Grandparent = ({flip}) => (
-        <div>
-          <div>
-            <Parent flip={flip} />
-          </div>
-          <Parent flip={flip} />
-          <Nothing />
-        </div>
-      );
-      const Parent = ({flip}) => (
-        <div>
-          {flip ? 'foo' : null}
-          <Child />
-          {flip && [null, 'hello', 42]}
-          {flip ? 'bar' : 'baz'}
-        </div>
-      );
-      const Child = () => <div>Hi!</div>;
+      const Grandparent = ({flip}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(
+            'div',
+            null,
+            React.createElement(Parent, {
+              flip: flip,
+            }),
+          ),
+          React.createElement(Parent, {
+            flip: flip,
+          }),
+          React.createElement(Nothing, null),
+        );
+      const Parent = ({flip}) =>
+        React.createElement(
+          'div',
+          null,
+          flip ? 'foo' : null,
+          React.createElement(Child, null),
+          flip && [null, 'hello', 42],
+          flip ? 'bar' : 'baz',
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
       const Nothing = () => null;
-
       const container = document.createElement('div');
       act(() =>
-        ReactDOM.render(<Grandparent count={4} flip={false} />, container),
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+            flip: false,
+          }),
+          container,
+        ),
       );
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▸ <Grandparent>
       `);
-
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <Grandparent>
             ▸ <div>
       `);
-
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -640,9 +752,14 @@ describe('Store (legacy)', () => {
               ▸ <Parent>
                 <Nothing>
       `);
-
       act(() =>
-        ReactDOM.render(<Grandparent count={4} flip={true} />, container),
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+            flip: true,
+          }),
+          container,
+        ),
       );
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -652,30 +769,37 @@ describe('Store (legacy)', () => {
               ▸ <Parent>
                 <Nothing>
       `);
-
       act(() => ReactDOM.unmountComponentAtNode(container));
       expect(store).toMatchInlineSnapshot(``);
     });
-
     it('should support expanding parts of the tree', () => {
-      const Grandparent = ({count}) => (
-        <div>
-          <Parent count={count} />
-          <Parent count={count} />
-        </div>
-      );
-      const Parent = ({count}) => (
-        <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
-        </div>
-      );
-      const Child = () => <div>Hi!</div>;
-
+      const Grandparent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(Parent, {
+            count: count,
+          }),
+          React.createElement(Parent, {
+            count: count,
+          }),
+        );
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
       act(() =>
         ReactDOM.render(
-          <Grandparent count={2} />,
+          React.createElement(Grandparent, {
+            count: 2,
+          }),
           document.createElement('div'),
         ),
       );
@@ -683,16 +807,13 @@ describe('Store (legacy)', () => {
         [root]
           ▸ <Grandparent>
       `);
-
       const grandparentID = store.getElementIDAtIndex(0);
-
       act(() => store.toggleIsCollapsed(grandparentID, false));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <Grandparent>
             ▸ <div>
       `);
-
       const parentDivID = store.getElementIDAtIndex(1);
       act(() => store.toggleIsCollapsed(parentDivID, false));
       expect(store).toMatchInlineSnapshot(`
@@ -702,10 +823,8 @@ describe('Store (legacy)', () => {
               ▸ <Parent>
               ▸ <Parent>
       `);
-
       const parentOneID = store.getElementIDAtIndex(2);
       const parentTwoID = store.getElementIDAtIndex(3);
-
       act(() => store.toggleIsCollapsed(parentOneID, false));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -715,7 +834,6 @@ describe('Store (legacy)', () => {
                 ▸ <div>
               ▸ <Parent>
       `);
-
       act(() => store.toggleIsCollapsed(parentTwoID, false));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -726,7 +844,6 @@ describe('Store (legacy)', () => {
               ▾ <Parent>
                 ▸ <div>
       `);
-
       act(() => store.toggleIsCollapsed(parentOneID, true));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -736,7 +853,6 @@ describe('Store (legacy)', () => {
               ▾ <Parent>
                 ▸ <div>
       `);
-
       act(() => store.toggleIsCollapsed(parentTwoID, true));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -745,7 +861,6 @@ describe('Store (legacy)', () => {
               ▸ <Parent>
               ▸ <Parent>
       `);
-
       act(() => store.toggleIsCollapsed(grandparentID, true));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -760,24 +875,29 @@ describe('Store (legacy)', () => {
     // one can use an older transform.
     if (!require('shared/ReactFeatureFlags').enableRefAsProp) {
       it('should support expanding deep parts of the tree', () => {
-        const Wrapper = ({forwardedRef}) => (
-          <Nested depth={3} forwardedRef={forwardedRef} />
-        );
+        const Wrapper = ({forwardedRef}) =>
+          React.createElement(Nested, {
+            depth: 3,
+            forwardedRef: forwardedRef,
+          });
         const Nested = ({depth, forwardedRef}) =>
-          depth > 0 ? (
-            <Nested depth={depth - 1} forwardedRef={forwardedRef} />
-          ) : (
-            <div ref={forwardedRef} />
-          );
-
+          depth > 0
+            ? React.createElement(Nested, {
+                depth: depth - 1,
+                forwardedRef: forwardedRef,
+              })
+            : React.createElement('div', {
+                ref: forwardedRef,
+              });
         let ref = null;
         const refSetter = value => {
           ref = value;
         };
-
         act(() =>
           ReactDOM.render(
-            <Wrapper forwardedRef={refSetter} />,
+            React.createElement(Wrapper, {
+              forwardedRef: refSetter,
+            }),
             document.createElement('div'),
           ),
         );
@@ -785,9 +905,7 @@ describe('Store (legacy)', () => {
         [root]
           ▸ <Wrapper>
       `);
-
         const deepestedNodeID = global.agent.getIDForNode(ref);
-
         act(() => store.toggleIsCollapsed(deepestedNodeID, false));
         expect(store).toMatchInlineSnapshot(`
         [root]
@@ -798,15 +916,12 @@ describe('Store (legacy)', () => {
                   ▾ <Nested>
                       <div>
       `);
-
         const rootID = store.getElementIDAtIndex(0);
-
         act(() => store.toggleIsCollapsed(rootID, true));
         expect(store).toMatchInlineSnapshot(`
         [root]
           ▸ <Wrapper>
       `);
-
         act(() => store.toggleIsCollapsed(rootID, false));
         expect(store).toMatchInlineSnapshot(`
         [root]
@@ -817,16 +932,13 @@ describe('Store (legacy)', () => {
                   ▾ <Nested>
                       <div>
       `);
-
         const id = store.getElementIDAtIndex(1);
-
         act(() => store.toggleIsCollapsed(id, true));
         expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <Wrapper>
             ▸ <Nested>
       `);
-
         act(() => store.toggleIsCollapsed(id, false));
         expect(store).toMatchInlineSnapshot(`
         [root]
@@ -839,39 +951,51 @@ describe('Store (legacy)', () => {
       `);
       });
     }
-
     it('should support reordering of children', () => {
-      const Root = ({children}) => <div>{children}</div>;
-      const Component = () => <div />;
-
-      const Foo = () => <div>{[<Component key="0" />]}</div>;
-      const Bar = () => (
-        <div>{[<Component key="0" />, <Component key="1" />]}</div>
-      );
-      const foo = <Foo key="foo" />;
-      const bar = <Bar key="bar" />;
-
+      const Root = ({children}) => React.createElement('div', null, children);
+      const Component = () => React.createElement('div', null);
+      const Foo = () =>
+        React.createElement('div', null, [
+          React.createElement(Component, {
+            key: '0',
+          }),
+        ]);
+      const Bar = () =>
+        React.createElement('div', null, [
+          React.createElement(Component, {
+            key: '0',
+          }),
+          React.createElement(Component, {
+            key: '1',
+          }),
+        ]);
+      const foo = React.createElement(Foo, {
+        key: 'foo',
+      });
+      const bar = React.createElement(Bar, {
+        key: 'bar',
+      });
       const container = document.createElement('div');
-
-      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      act(() =>
+        ReactDOM.render(React.createElement(Root, null, [foo, bar]), container),
+      );
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▸ <Root>
       `);
-
-      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      act(() =>
+        ReactDOM.render(React.createElement(Root, null, [bar, foo]), container),
+      );
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▸ <Root>
       `);
-
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <Root>
             ▸ <div>
       `);
-
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -880,7 +1004,6 @@ describe('Store (legacy)', () => {
               ▸ <Bar key="bar">
               ▸ <Foo key="foo">
       `);
-
       act(() => {
         store.toggleIsCollapsed(store.getElementIDAtIndex(3), false);
         store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
@@ -894,7 +1017,6 @@ describe('Store (legacy)', () => {
               ▾ <Foo key="foo">
                 ▸ <div>
       `);
-
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -902,14 +1024,11 @@ describe('Store (legacy)', () => {
       `);
     });
   });
-
   describe('StrictMode compliance', () => {
     it('should mark all elements as strict mode compliant', () => {
       const App = () => null;
-
       const container = document.createElement('div');
-      act(() => ReactDOM.render(<App />, container));
-
+      act(() => ReactDOM.render(React.createElement(App, null), container));
       expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(false);
     });
   });