Bug 1828573 - [devtools] Convert all component jest tests from jsx r=devtools-reviewers,nchevobbe

Depends on D184937

Differential Revision: https://phabricator.services.mozilla.com/D185521

devtools/client/debugger/src/components/Editor/tests/Breakpoints.spec.js

@@ -29,7 +29,7 @@ function generateDefaults(overrides) {
 
 function render(overrides = {}) {
   const props = generateDefaults(overrides);
-  const component = shallow(<BreakpointsComponent {...props} />);
+  const component = shallow(React.createElement(BreakpointsComponent, props));
   return { component, props };
 }
 

devtools/client/debugger/src/components/Editor/tests/ConditionalPanel.spec.js

@@ -57,7 +57,7 @@ function render(log, line, column, condition, logValue, overrides = {}) {
     logValue
   );
   const props = { ...defaults, ...overrides };
-  const wrapper = mount(<ConditionalPanel {...props} />);
+  const wrapper = mount(React.createElement(ConditionalPanel, props));
   return { wrapper, props };
 }
 

devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js

@@ -52,9 +52,12 @@ function render(overrides = {}) {
   const doc = createMockDocument(clear);
   setDocument("foo", doc);
 
-  const component = shallow(<DebugLine.WrappedComponent {...props} />, {
-    lifecycleExperimental: true,
-  });
+  const component = shallow(
+    React.createElement(DebugLine.WrappedComponent, props),
+    {
+      lifecycleExperimental: true,
+    }
+  );
   return { component, props, clear, editor, doc };
 }
 

devtools/client/debugger/src/components/Editor/tests/Footer.spec.js

@@ -42,9 +42,12 @@ function render(overrides = {}, position = { line: 0, column: 0 }) {
   const doc = createMockDocument(clear, position);
   setDocument(props.selectedSource.id, doc);
 
-  const component = shallow(<SourceFooter.WrappedComponent {...props} />, {
-    lifecycleExperimental: true,
-  });
+  const component = shallow(
+    React.createElement(SourceFooter.WrappedComponent, props),
+    {
+      lifecycleExperimental: true,
+    }
+  );
   return { component, props, clear, doc };
 }
 

devtools/client/debugger/src/components/PrimaryPanes/tests/ProjectSearch.spec.js

@@ -148,18 +148,33 @@ function render(overrides = {}, mounted = false) {
 
   if (mounted) {
     return mount(
-      <Provider store={store}>
-        <ProjectSearch {...props} />
-      </Provider>,
-      { context, childContextTypes: { shortcuts: PropTypes.object } }
+      React.createElement(
+        Provider,
+        {
+          store: store,
+        },
+        React.createElement(ProjectSearch, props)
+      ),
+      {
+        context,
+        childContextTypes: {
+          shortcuts: PropTypes.object,
+        },
+      }
     ).childAt(0);
   }
 
   return shallow(
-    <Provider store={store}>
-      <ProjectSearch {...props} />
-    </Provider>,
-    { context }
+    React.createElement(
+      Provider,
+      {
+        store: store,
+      },
+      React.createElement(ProjectSearch, props)
+    ),
+    {
+      context,
+    }
   ).dive();
 }
 

devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js

@@ -57,7 +57,9 @@ const location = { source: { id: "foo/original" }, line: 5, column: 7 };
 
 function render(overrides = {}, breakpointOverrides = {}) {
   const props = generateDefaults(overrides, breakpointOverrides);
-  const component = shallow(<Breakpoint.WrappedComponent {...props} />);
+  const component = shallow(
+    React.createElement(Breakpoint.WrappedComponent, props)
+  );
   const defaultState = component.state();
   const instance = component.instance();
 

devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/ExceptionOption.spec.js

@@ -10,12 +10,12 @@ import ExceptionOption from "../ExceptionOption";
 describe("ExceptionOption renders", () => {
   it("with values", () => {
     const component = shallow(
-      <ExceptionOption
-        label="testLabel"
-        isChecked={true}
-        onChange={() => null}
-        className="testClassName"
-      />
+      React.createElement(ExceptionOption, {
+        label: "testLabel",
+        isChecked: true,
+        onChange: () => null,
+        className: "testClassName",
+      })
     );
     expect(component).toMatchSnapshot();
   });

devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frame.spec.js

@@ -33,7 +33,7 @@ function render(frameToSelect = {}, overrides = {}, propsOverrides = {}) {
   const selectedFrame = { ...frame, ...frameToSelect };
 
   const props = frameProperties(frame, selectedFrame, propsOverrides);
-  const component = shallow(<Frame {...props} />);
+  const component = shallow(React.createElement(Frame, props));
   return { component, props };
 }
 
@@ -66,7 +66,7 @@ describe("Frame", () => {
     const frame = makeMockFrame("1", source, undefined, 10, "renderFoo");
 
     const props = frameProperties(frame, null);
-    const component = mount(<Frame {...props} />);
+    const component = mount(React.createElement(Frame, props));
     expect(component.text()).toBe("    renderFoo foo-view.js:10");
   });
 
@@ -76,7 +76,7 @@ describe("Frame", () => {
     const frame = makeMockFrame("1", source, undefined, 10, "renderFoo");
 
     const props = frameProperties(frame, null, { displayFullUrl: true });
-    const component = mount(<Frame {...props} />);
+    const component = mount(React.createElement(Frame, props));
     expect(component.text()).toBe(`    renderFoo ${url}:10`);
   });
 
@@ -87,7 +87,9 @@ describe("Frame", () => {
     frame.asyncCause = "setTimeout handler";
 
     const props = frameProperties(frame);
-    const component = mount(<Frame {...props} />, { context: { l10n: L10N } });
+    const component = mount(React.createElement(Frame, props), {
+      context: { l10n: L10N },
+    });
     expect(component.find(".location-async-cause").text()).toBe(
       `    (Async: setTimeout handler)`
     );
@@ -101,7 +103,7 @@ describe("Frame", () => {
     const props = frameProperties(frame, null, {
       getFrameTitle: x => `Jump to ${x}`,
     });
-    const component = shallow(<Frame {...props} />);
+    const component = shallow(React.createElement(Frame, props));
     expect(component.prop("title")).toBe(`Jump to ${url}:10`);
     expect(component).toMatchSnapshot();
   });

devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frames.spec.js

@@ -18,9 +18,14 @@ function render(overrides = {}) {
   };
 
   const props = { ...defaultProps, ...overrides };
-  const component = shallow(<Frames.WrappedComponent {...props} />, {
-    context: { l10n: L10N },
-  });
+  const component = shallow(
+    React.createElement(Frames.WrappedComponent, props),
+    {
+      context: {
+        l10n: L10N,
+      },
+    }
+  );
 
   return component;
 }

devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Group.spec.js

@@ -25,7 +25,7 @@ function render(overrides = {}) {
   };
 
   const props = { ...defaultProps, ...overrides };
-  const component = shallow(<Group {...props} />, {
+  const component = shallow(React.createElement(Group, props), {
     context: { l10n: L10N },
   });
   return { component, props };

devtools/client/debugger/src/components/SecondaryPanes/tests/CommandBar.spec.js

@@ -22,7 +22,9 @@ describe("CommandBar", () => {
     // the shortcuts.on function
     const context = { shortcuts: { on: jest.fn() } };
 
-    shallow(<CommandBar.WrappedComponent {...props} />, { context });
+    shallow(React.createElement(CommandBar.WrappedComponent, props), {
+      context,
+    });
 
     // get the keyboard event listeners recorded from the "on" spy.
     // this will be an array where each item is itself a two item array
@@ -55,7 +57,9 @@ describe("CommandBar", () => {
     // the shortcuts.on function
     const context = { shortcuts: { on: jest.fn() } };
 
-    shallow(<CommandBar.WrappedComponent {...props} />, { context });
+    shallow(React.createElement(CommandBar.WrappedComponent, props), {
+      context,
+    });
 
     // get the keyboard event listeners recorded from the "on" spy.
     // this will be an array where each item is itself a two item array

devtools/client/debugger/src/components/SecondaryPanes/tests/EventListeners.spec.js

@@ -37,7 +37,9 @@ function generateDefaults(overrides = {}) {
 
 function render(overrides = {}) {
   const props = generateDefaults(overrides);
-  const component = shallow(<EventListeners.WrappedComponent {...props} />);
+  const component = shallow(
+    React.createElement(EventListeners.WrappedComponent, props)
+  );
   return { component, props };
 }
 

devtools/client/debugger/src/components/SecondaryPanes/tests/Expressions.spec.js

@@ -35,7 +35,9 @@ function generateDefaults(overrides) {
 
 function render(overrides = {}) {
   const props = generateDefaults(overrides);
-  const component = shallow(<Expressions.WrappedComponent {...props} />);
+  const component = shallow(
+    React.createElement(Expressions.WrappedComponent, props)
+  );
   return { component, props };
 }
 

devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js

@@ -46,7 +46,7 @@ function generateDefaultState(propsOverride) {
 function renderXHRBreakpointsComponent(propsOverride) {
   const props = generateDefaultState(propsOverride);
   const xhrBreakpointsComponent = mount(
-    <XHRBreakpoints.WrappedComponent {...props} />
+    React.createElement(XHRBreakpoints.WrappedComponent, props)
   );
   return xhrBreakpointsComponent;
 }

devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js

@@ -10,14 +10,21 @@ describe("CloseButton", () => {
   it("renders with tooltip", () => {
     const tooltip = "testTooltip";
     const wrapper = shallow(
-      <CloseButton tooltip={tooltip} handleClick={() => {}} />
+      React.createElement(CloseButton, {
+        tooltip: tooltip,
+        handleClick: () => {},
+      })
     );
     expect(wrapper).toMatchSnapshot();
   });
 
   it("handles click event", () => {
     const handleClickSpy = jest.fn();
-    const wrapper = shallow(<CloseButton handleClick={handleClickSpy} />);
+    const wrapper = shallow(
+      React.createElement(CloseButton, {
+        handleClick: handleClickSpy,
+      })
+    );
     wrapper.simulate("click");
     expect(handleClickSpy).toHaveBeenCalled();
   });

devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js

@@ -8,14 +8,22 @@ import { CommandBarButton, debugBtn } from "../";
 
 describe("CommandBarButton", () => {
   it("renders", () => {
-    const wrapper = shallow(<CommandBarButton children={[]} className={""} />);
+    const wrapper = shallow(
+      React.createElement(CommandBarButton, {
+        children: [],
+        className: "",
+      })
+    );
     expect(wrapper).toMatchSnapshot();
   });
 
   it("renders children", () => {
     const children = [1, 2, 3, 4];
     const wrapper = shallow(
-      <CommandBarButton children={children} className={""} />
+      React.createElement(CommandBarButton, {
+        children: children,
+        className: "",
+      })
     );
     expect(wrapper.find("button").children()).toHaveLength(4);
   });

devtools/client/debugger/src/components/shared/Button/tests/PaneToggleButton.spec.js

@@ -9,11 +9,11 @@ import { PaneToggleButton } from "../";
 describe("PaneToggleButton", () => {
   const handleClickSpy = jest.fn();
   const wrapper = shallow(
-    <PaneToggleButton
-      handleClick={handleClickSpy}
-      collapsed={false}
-      position="start"
-    />
+    React.createElement(PaneToggleButton, {
+      handleClick: handleClickSpy,
+      collapsed: false,
+      position: "start",
+    })
   );
 
   it("renders default", () => {

devtools/client/debugger/src/components/shared/tests/Accordion.spec.js

@@ -12,27 +12,31 @@ describe("Accordion", () => {
     {
       header: "Test Accordion Item 1",
       className: "accordion-item-1",
-      component: <div />,
+      component: React.createElement("div", null),
       opened: false,
       onToggle: jest.fn(),
     },
     {
       header: "Test Accordion Item 2",
       className: "accordion-item-2",
-      component: <div />,
-      buttons: <button />,
+      component: React.createElement("div", null),
+      buttons: React.createElement("button", null),
       opened: false,
       onToggle: jest.fn(),
     },
     {
       header: "Test Accordion Item 3",
       className: "accordion-item-3",
-      component: <div />,
+      component: React.createElement("div", null),
       opened: true,
       onToggle: jest.fn(),
     },
   ];
-  const wrapper = shallow(<Accordion items={testItems} />);
+  const wrapper = shallow(
+    React.createElement(Accordion, {
+      items: testItems,
+    })
+  );
   it("basic render", () => expect(wrapper).toMatchSnapshot());
   wrapper.find(".accordion-item-1 ._header").simulate("click");
   it("handleClick and onToggle", () =>

devtools/client/debugger/src/components/shared/tests/Badge.spec.js

@@ -9,5 +9,11 @@ import Badge from "../Badge";
 
 describe("Badge", () => {
   it("render", () =>
-    expect(shallow(<Badge badgeText={3} />)).toMatchSnapshot());
+    expect(
+      shallow(
+        React.createElement(Badge, {
+          badgeText: 3,
+        })
+      )
+    ).toMatchSnapshot());
 });

devtools/client/debugger/src/components/shared/tests/BracketArrow.spec.js

@@ -9,7 +9,12 @@ import BracketArrow from "../BracketArrow";
 
 describe("BracketArrow", () => {
   const wrapper = shallow(
-    <BracketArrow orientation="down" left={10} top={20} bottom={50} />
+    React.createElement(BracketArrow, {
+      orientation: "down",
+      left: 10,
+      top: 20,
+      bottom: 50,
+    })
   );
   it("render", () => expect(wrapper).toMatchSnapshot());
   it("render up", () => {

devtools/client/debugger/src/components/shared/tests/Dropdown.spec.js

@@ -8,7 +8,12 @@ import { shallow } from "enzyme";
 import Dropdown from "../Dropdown";
 
 describe("Dropdown", () => {
-  const wrapper = shallow(<Dropdown panel={<div />} icon="✅" />);
+  const wrapper = shallow(
+    React.createElement(Dropdown, {
+      panel: React.createElement("div", null),
+      icon: "✅",
+    })
+  );
   it("render", () => expect(wrapper).toMatchSnapshot());
   wrapper.find(".dropdown").simulate("click");
   it("handle toggleDropdown", () =>

devtools/client/debugger/src/components/shared/tests/Modal.spec.js

@@ -9,23 +9,37 @@ import { Modal } from "../Modal";
 
 describe("Modal", () => {
   it("renders", () => {
-    const wrapper = shallow(<Modal handleClose={() => {}} status="entering" />);
+    const wrapper = shallow(
+      React.createElement(Modal, {
+        handleClose: () => {},
+        status: "entering",
+      })
+    );
     expect(wrapper).toMatchSnapshot();
   });
 
   it("handles close modal click", () => {
     const handleCloseSpy = jest.fn();
     const wrapper = shallow(
-      <Modal handleClose={handleCloseSpy} status="entering" />
+      React.createElement(Modal, {
+        handleClose: handleCloseSpy,
+        status: "entering",
+      })
     );
     wrapper.find(".modal-wrapper").simulate("click");
     expect(handleCloseSpy).toHaveBeenCalled();
   });
 
   it("renders children", () => {
-    const children = <div className="aChild" />;
+    const children = React.createElement("div", {
+      className: "aChild",
+    });
     const wrapper = shallow(
-      <Modal children={children} handleClose={() => {}} status="entering" />
+      React.createElement(Modal, {
+        children: children,
+        handleClose: () => {},
+        status: "entering",
+      })
     );
     expect(wrapper.find(".aChild")).toHaveLength(1);
   });
@@ -33,18 +47,23 @@ describe("Modal", () => {
   it("passes additionalClass to child div class", () => {
     const additionalClass = "testAddon";
     const wrapper = shallow(
-      <Modal
-        additionalClass={additionalClass}
-        handleClose={() => {}}
-        status="entering"
-      />
+      React.createElement(Modal, {
+        additionalClass: additionalClass,
+        handleClose: () => {},
+        status: "entering",
+      })
     );
     expect(wrapper.find(`.modal-wrapper .${additionalClass}`)).toHaveLength(1);
   });
 
   it("passes status to child div class", () => {
     const status = "testStatus";
-    const wrapper = shallow(<Modal status={status} handleClose={() => {}} />);
+    const wrapper = shallow(
+      React.createElement(Modal, {
+        status: status,
+        handleClose: () => {},
+      })
+    );
     expect(wrapper.find(`.modal-wrapper .${status}`)).toHaveLength(1);
   });
 });

devtools/client/debugger/src/components/shared/tests/Popover.spec.js

@@ -50,30 +50,34 @@ describe("Popover", () => {
     left: 200,
   };
   const popover = mount(
-    <Popover
-      onMouseLeave={onMouseLeave}
-      onKeyDown={onKeyDown}
-      editorRef={editorRef}
-      targetPosition={targetPosition}
-      mouseout={() => {}}
-      target={targetRef}
-    >
-      <h1>Poppy!</h1>
-    </Popover>
+    React.createElement(
+      Popover,
+      {
+        onMouseLeave: onMouseLeave,
+        onKeyDown: onKeyDown,
+        editorRef: editorRef,
+        targetPosition: targetPosition,
+        mouseout: () => {},
+        target: targetRef,
+      },
+      React.createElement("h1", null, "Poppy!")
+    )
   );
 
   const tooltip = mount(
-    <Popover
-      type="tooltip"
-      onMouseLeave={onMouseLeave}
-      onKeyDown={onKeyDown}
-      editorRef={editorRef}
-      targetPosition={targetPosition}
-      mouseout={() => {}}
-      target={targetRef}
-    >
-      <h1>Toolie!</h1>
-    </Popover>
+    React.createElement(
+      Popover,
+      {
+        type: "tooltip",
+        onMouseLeave: onMouseLeave,
+        onKeyDown: onKeyDown,
+        editorRef: editorRef,
+        targetPosition: targetPosition,
+        mouseout: () => {},
+        target: targetRef,
+      },
+      React.createElement("h1", null, "Toolie!")
+    )
   );
 
   beforeEach(() => {
@@ -87,33 +91,37 @@ describe("Popover", () => {
 
   it("mount popover", () => {
     const mountedPopover = mount(
-      <Popover
-        onMouseLeave={onMouseLeave}
-        onKeyDown={onKeyDown}
-        editorRef={editorRef}
-        targetPosition={targetPosition}
-        mouseout={() => {}}
-        target={targetRef}
-      >
-        <h1>Poppy!</h1>
-      </Popover>
+      React.createElement(
+        Popover,
+        {
+          onMouseLeave: onMouseLeave,
+          onKeyDown: onKeyDown,
+          editorRef: editorRef,
+          targetPosition: targetPosition,
+          mouseout: () => {},
+          target: targetRef,
+        },
+        React.createElement("h1", null, "Poppy!")
+      )
     );
     expect(mountedPopover).toMatchSnapshot();
   });
 
   it("mount tooltip", () => {
     const mountedTooltip = mount(
-      <Popover
-        type="tooltip"
-        onMouseLeave={onMouseLeave}
-        onKeyDown={onKeyDown}
-        editorRef={editorRef}
-        targetPosition={targetPosition}
-        mouseout={() => {}}
-        target={targetRef}
-      >
-        <h1>Toolie!</h1>
-      </Popover>
+      React.createElement(
+        Popover,
+        {
+          type: "tooltip",
+          onMouseLeave: onMouseLeave,
+          onKeyDown: onKeyDown,
+          editorRef: editorRef,
+          targetPosition: targetPosition,
+          mouseout: () => {},
+          target: targetRef,
+        },
+        React.createElement("h1", null, "Toolie!")
+      )
     );
     expect(mountedTooltip).toMatchSnapshot();
   });
@@ -141,17 +149,19 @@ describe("Popover", () => {
     };
 
     const mountedTooltip = mount(
-      <Popover
-        type="tooltip"
-        onMouseLeave={onMouseLeave}
-        onKeyDown={onKeyDown}
-        editorRef={editor}
-        targetPosition={target}
-        mouseout={() => {}}
-        target={targetRef}
-      >
-        <h1>Toolie!</h1>
-      </Popover>
+      React.createElement(
+        Popover,
+        {
+          type: "tooltip",
+          onMouseLeave: onMouseLeave,
+          onKeyDown: onKeyDown,
+          editorRef: editor,
+          targetPosition: target,
+          mouseout: () => {},
+          target: targetRef,
+        },
+        React.createElement("h1", null, "Toolie!")
+      )
     );
 
     const toolTipTop = parseInt(mountedTooltip.getDOMNode().style.top, 10);
@@ -181,17 +191,19 @@ describe("Popover", () => {
     };
 
     const mountedTooltip = mount(
-      <Popover
-        type="tooltip"
-        onMouseLeave={onMouseLeave}
-        onKeyDown={onKeyDown}
-        editorRef={editor}
-        targetPosition={target}
-        mouseout={() => {}}
-        target={targetRef}
-      >
-        <h1>Toolie!</h1>
-      </Popover>
+      React.createElement(
+        Popover,
+        {
+          type: "tooltip",
+          onMouseLeave: onMouseLeave,
+          onKeyDown: onKeyDown,
+          editorRef: editor,
+          targetPosition: target,
+          mouseout: () => {},
+          target: targetRef,
+        },
+        React.createElement("h1", null, "Toolie!")
+      )
     );
 
     const toolTipTop = parseInt(mountedTooltip.getDOMNode().style.top, 10);

devtools/client/debugger/src/components/shared/tests/PreviewFunction.spec.js

@@ -7,7 +7,11 @@ import { shallow } from "enzyme";
 import PreviewFunction from "../PreviewFunction";
 
 function render(props) {
-  return shallow(<PreviewFunction {...props} />, { context: { l10n: L10N } });
+  return shallow(React.createElement(PreviewFunction, props), {
+    context: {
+      l10n: L10N,
+    },
+  });
 }
 
 describe("PreviewFunction", () => {

devtools/client/debugger/src/components/shared/tests/ResultList.spec.js

@@ -29,19 +29,18 @@ const payload = {
 
 describe("Result list", () => {
   it("should call onClick function", () => {
-    const wrapper = shallow(<ResultList {...payload} />);
-
+    const wrapper = shallow(React.createElement(ResultList, payload));
     wrapper.childAt(selectedIndex).simulate("click");
     expect(selectItem).toHaveBeenCalled();
   });
 
   it("should render the component", () => {
-    const wrapper = shallow(<ResultList {...payload} />);
+    const wrapper = shallow(React.createElement(ResultList, payload));
     expect(wrapper).toMatchSnapshot();
   });
 
   it("selected index should have 'selected class'", () => {
-    const wrapper = shallow(<ResultList {...payload} />);
+    const wrapper = shallow(React.createElement(ResultList, payload));
     const childHasClass = wrapper.childAt(selectedIndex).hasClass("selected");
 
     expect(childHasClass).toEqual(true);

devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js

@@ -16,23 +16,23 @@ describe("SearchInput", () => {
     ui: { mutableSearchOptions: { "foo-search": {} } },
   });
   const wrapper = shallow(
-    <SearchInput
-      store={store}
-      query=""
-      count={5}
-      placeholder="A placeholder"
-      summaryMsg="So many results"
-      showErrorEmoji={false}
-      isLoading={false}
-      onChange={() => {}}
-      onKeyDown={() => {}}
-      searchKey="foo-search"
-      showSearchModifiers={false}
-      showExcludePatterns={false}
-      showClose={true}
-      handleClose={jest.fn()}
-      setSearchOptions={jest.fn()}
-    />
+    React.createElement(SearchInput, {
+      store: store,
+      query: "",
+      count: 5,
+      placeholder: "A placeholder",
+      summaryMsg: "So many results",
+      showErrorEmoji: false,
+      isLoading: false,
+      onChange: () => {},
+      onKeyDown: () => {},
+      searchKey: "foo-search",
+      showSearchModifiers: false,
+      showExcludePatterns: false,
+      showClose: true,
+      handleClose: jest.fn(),
+      setSearchOptions: jest.fn(),
+    })
   ).dive();
 
   it("renders", () => expect(wrapper).toMatchSnapshot());

devtools/client/debugger/src/components/test/A11yIntention.spec.js

@@ -8,9 +8,11 @@ import A11yIntention from "../A11yIntention";
 
 function render() {
   return shallow(
-    <A11yIntention>
-      <span>hello world</span>
-    </A11yIntention>
+    React.createElement(
+      A11yIntention,
+      null,
+      React.createElement("span", null, "hello world")
+    )
   );
 }
 

devtools/client/debugger/src/components/test/OutlineFilter.spec.js

@@ -16,7 +16,7 @@ function generateDefaults(overrides) {
 
 function render(overrides = {}) {
   const props = generateDefaults(overrides);
-  const component = shallow(<OutlineFilter {...props} />);
+  const component = shallow(React.createElement(OutlineFilter, props));
   const instance = component.instance();
   return { component, props, instance };
 }

devtools/client/debugger/src/components/test/WelcomeBox.spec.js

@@ -18,8 +18,7 @@ function render(overrides = {}) {
     setPrimaryPaneTab: jest.fn(),
     ...overrides,
   };
-  const component = shallow(<WelcomeBox {...props} />);
-
+  const component = shallow(React.createElement(WelcomeBox, props));
   return { component, props };
 }
 

devtools/client/debugger/src/components/test/WhyPaused.spec.js

@@ -8,7 +8,9 @@ import WhyPaused from "../SecondaryPanes/WhyPaused.js";
 
 function render(why, delay) {
   const props = { why, delay };
-  const component = shallow(<WhyPaused.WrappedComponent {...props} />);
+  const component = shallow(
+    React.createElement(WhyPaused.WrappedComponent, props)
+  );
 
   return { component, props };
 }