Use functional components in tests

src/components/Banner/tests/Banner.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 import {
   CirclePlusMinor,
   CircleAlertMajorTwotone,
@@ -132,16 +132,14 @@ describe('<Banner />', () => {
 
   describe('focus', () => {
     it('exposes a function that allows the banner to be programmatically focused', () => {
-      class Test extends React.Component {
-        banner = React.createRef<any>();
+      function Test() {
+        const banner = useRef<Banner>(null);
 
-        componentDidMount() {
-          this.banner.current.focus();
-        }
+        useEffect(() => {
+          banner.current && banner.current.focus();
+        }, []);
 
-        render() {
-          return <Banner ref={this.banner} status="critical" />;
-        }
+        return <Banner ref={banner} status="critical" />;
       }
 
       const div = mountWithAppProvider(<Test />)

src/components/Popover/tests/Popover.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useCallback} from 'react';
 import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
 import {Popover} from '../Popover';
 
@@ -149,25 +149,16 @@ describe('<Popover />', () => {
   });
 
   it('does not call onClose when Popover is opening and trigger was not the activator', () => {
-    class PopoverWithDisconnectedActivator extends React.Component {
-      state = {
-        active: false,
-      };
-
-      handleActivatorClick = () => this.setState({active: true});
-
-      render() {
-        return (
-          <React.Fragment>
-            <button onClick={this.handleActivatorClick}>Activator</button>
-            <Popover
-              active={this.state.active}
-              activator={<div />}
-              onClose={onCloseSpy}
-            />
-          </React.Fragment>
-        );
-      }
+    function PopoverWithDisconnectedActivator() {
+      const [active, setActive] = useState(false);
+      const handleActivatorClick = useCallback(() => setActive(true), []);
+
+      return (
+        <React.Fragment>
+          <button onClick={handleActivatorClick}>Activator</button>
+          <Popover active={active} activator={<div />} onClose={onCloseSpy} />
+        </React.Fragment>
+      );
     }
 
     const onCloseSpy = jest.fn();

src/components/Portal/tests/Portal.test.tsx

@@ -82,14 +82,12 @@ describe('<Portal />', () => {
       expect(ref.current).not.toBeNull(),
     );
 
-    class PortalParent extends React.Component {
-      render() {
-        return (
-          <Portal onPortalCreated={handlePortalCreated}>
-            <div ref={ref} />
-          </Portal>
-        );
-      }
+    function PortalParent() {
+      return (
+        <Portal onPortalCreated={handlePortalCreated}>
+          <div ref={ref} />
+        </Portal>
+      );
     }
 
     mountWithAppProvider(<PortalParent />);

src/components/ScrollLock/tests/ScrollLock.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useCallback} from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {SCROLL_LOCKING_ATTRIBUTE} from '../../../utilities/scroll-lock-manager';
 import {ScrollLock} from '../ScrollLock';
@@ -15,29 +15,21 @@ describe('ScrollLock', () => {
   });
 
   it('does not remove the data attribute from the body when two scrolllocks are mounted and one unmounts', () => {
-    class DummyFrame extends React.Component {
-      state = {
-        showScrollLock: true,
-      };
+    function DummyFrame() {
+      const [showScrollLock, setScrollLock] = useState(true);
 
-      setScollLockFalse = () => {
-        this.setState({showScrollLock: false});
-      };
+      const setScollLockFalse = useCallback(() => setScrollLock(false), []);
 
-      render() {
-        const {showScrollLock} = this.state;
+      // eslint-disable-next-line shopify/jest/no-if
+      const scrollLockMarkup = showScrollLock ? <ScrollLock /> : null;
 
-        // eslint-disable-next-line shopify/jest/no-if
-        const scrollLockMarkup = showScrollLock ? <ScrollLock /> : null;
-
-        return (
-          <React.Fragment>
-            <button onClick={this.setScollLockFalse} />
-            {scrollLockMarkup}
-            <ScrollLock />
-          </React.Fragment>
-        );
-      }
+      return (
+        <React.Fragment>
+          <button onClick={setScollLockFalse} />
+          {scrollLockMarkup}
+          <ScrollLock />
+        </React.Fragment>
+      );
     }
 
     const scrollLockContainer = mountWithAppProvider(<DummyFrame />);