Convert Jest Tests to TypeScript

jest/utils/errorHandling.js → jest/utils/errorHandling.tsx

@@ -1,8 +1,8 @@
-const React = require("react");
+import { ReactNode, Component } from "react"
 
 // React logs errors to the console when an error is thrown, even when a boundary exists. Silence it temporarily.
 // https://github.com/facebook/react/issues/15520
-function muteConsoleErrors(patterns) {
+function muteConsoleErrors(patterns: string[]) {
     const nativeConsoleError = console.error.bind(console);
 
     console.error = message => {
@@ -16,16 +16,21 @@ function muteConsoleErrors(patterns) {
     };
 }
 
-class ErrorBoundary extends React.Component {
-    constructor() {
-        super();
+interface ErrorBoundaryProps {
+    onError: (error: Error) => void;
+    children?: ReactNode;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, { hasError: boolean}> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
 
         this.state = {
             hasError: false
         };
     }
 
-    componentDidCatch(error) {
+    componentDidCatch(error: Error) {
         const { onError } = this.props;
 
         onError(error);
@@ -48,7 +53,4 @@ class ErrorBoundary extends React.Component {
     }
 }
 
-module.exports = {
-    muteConsoleErrors,
-    ErrorBoundary
-};
+export { muteConsoleErrors, ErrorBoundary }

jest/utils/waitDelay.ts

@@ -0,0 +1,5 @@
+async function waitDelay(delayMs: number) {
+    await new Promise(resolve => setTimeout(resolve, delayMs));
+}
+
+export { waitDelay }

package.json

@@ -96,6 +96,7 @@
     "@testing-library/react-hooks": "7.0.1",
     "@testing-library/user-event": "13.2.0",
     "@types/react": "17.0.14",
+    "@types/jest": "27.0.1",
     "@types/react-dom": "17.0.9",
     "@types/react-is": "17.0.2",
     "@types/resize-observer-browser": "0.1.6",

packages/react-components/src/accordion/tests/jest/Accordion.test.jsx → packages/react-components/src/accordion/tests/jest/Accordion.test.tsx

@@ -210,7 +210,7 @@ test("when multiple, call onExpansionChange when the expanded tabs change", asyn
 // ***** Refs *****
 
 test("accordion ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Accordion ref={ref}>
@@ -228,7 +228,7 @@ test("accordion ref is a DOM element", async () => {
 });
 
 test("header ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Accordion>
@@ -246,7 +246,7 @@ test("header ref is a DOM element", async () => {
 });
 
 test("content ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Accordion>

packages/react-components/src/alert/tests/jest/Alert.test.jsx → packages/react-components/src/alert/tests/jest/Alert.test.tsx

@@ -53,10 +53,10 @@ test("when autoFocusButton value is not defined, autofocus the primary button",
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
-        <Alert ref={ref}>
+        <Alert ref={ref} primaryButtonLabel="Primary">
             <Heading>Autopilot</Heading>
             <Content>Are you use sure you want to engage autopilot?</Content>
         </Alert>
@@ -69,10 +69,11 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Alert
+            primaryButtonLabel="Primary"
             ref={node => {
                 refNode = node;
             }}
@@ -92,7 +93,7 @@ test("set ref once", async () => {
     const handler = jest.fn();
 
     render(
-        <Alert ref={handler}>
+        <Alert ref={handler} primaryButtonLabel="Primary">
             <Heading>Autopilot</Heading>
             <Content>Are you use sure you want to engage autopilot?</Content>
         </Alert>

packages/react-components/src/alert/tests/jest/AlertTrigger.test.jsx → packages/react-components/src/alert/tests/jest/AlertTrigger.test.tsx

@@ -13,7 +13,7 @@ test("do not dismiss on outside click", async () => {
     const { getByTestId } = render(
         <AlertTrigger>
             <Button data-testid="trigger">Trigger</Button>
-            <Alert data-testid="alert">
+            <Alert data-testid="alert" primaryButtonLabel="Primary">
                 <Heading>Autopilot</Heading>
                 <Content>Are you use sure you want to engage autopilot?</Content>
             </Alert>
@@ -36,12 +36,12 @@ test("do not dismiss on outside click", async () => {
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <AlertTrigger defaultOpen ref={ref}>
             <Button>Trigger</Button>
-            <Alert>
+            <Alert primaryButtonLabel="Primary">
                 <Heading>Autopilot</Heading>
                 <Content>Are you use sure you want to engage autopilot?</Content>
             </Alert>
@@ -55,7 +55,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <AlertTrigger
@@ -65,7 +65,7 @@ test("when using a callback ref, ref is a DOM element", async () => {
             }}
         >
             <Button>Trigger</Button>
-            <Alert>
+            <Alert primaryButtonLabel="Primary">
                 <Heading>Autopilot</Heading>
                 <Content>Are you use sure you want to engage autopilot?</Content>
             </Alert>
@@ -84,7 +84,7 @@ test("set ref once", async () => {
     render(
         <AlertTrigger defaultOpen ref={handler}>
             <Button>Trigger</Button>
-            <Alert>
+            <Alert primaryButtonLabel="Primary">
                 <Heading>Autopilot</Heading>
                 <Content>Are you use sure you want to engage autopilot?</Content>
             </Alert>

packages/react-components/src/autocomplete/tests/jest/Autocomplete.test.jsx → packages/react-components/src/autocomplete/tests/jest/Autocomplete.test.tsx

@@ -10,6 +10,7 @@ import { waitDelay } from "@utils/waitDelay";
 import userEvent from "@testing-library/user-event";
 
 beforeAll(() => {
+    // @ts-ignore
     Transition.disableAnimation = true;
 });
 
@@ -804,7 +805,7 @@ test("call onSelectionChange when a value is selected", async () => {
 });
 
 test("calling the focus function on the autocomplete ref will focus the autocomplete", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLInputElement>();
 
     const { getByTestId } = render(
         <Autocomplete
@@ -830,7 +831,7 @@ test("calling the focus function on the autocomplete ref will focus the autocomp
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLInputElement>();
 
     render(
         <Autocomplete defaultOpen ref={ref} aria-label="Planet">
@@ -848,7 +849,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Autocomplete

packages/react-components/src/avatar/tests/jest/Avatar.test.jsx → packages/react-components/src/avatar/tests/jest/Avatar.test.tsx

@@ -23,7 +23,7 @@ test("when an image src is provided and a custom aria-label is provided, the ari
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Avatar name="Elon Musk" ref={ref} />
@@ -36,7 +36,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Avatar

packages/react-components/src/avatar/tests/jest/AvatarGroup.test.jsx → packages/react-components/src/avatar/tests/jest/AvatarGroup.test.tsx

@@ -5,7 +5,7 @@ import { render, waitFor } from "@testing-library/react";
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <AvatarGroup ref={ref}>
@@ -21,7 +21,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <AvatarGroup

packages/react-components/src/badge/tests/jest/Badge.test.jsx → packages/react-components/src/badge/tests/jest/Badge.test.tsx

@@ -1,10 +1,10 @@
-import { Badge } from "@react-components/badge";
+import { Badge, BadgeProps } from "@react-components/badge";
 import { Text } from "@react-components/typography";
 import { createRef } from "react";
 import { forwardRef } from "react";
 import { render, waitFor } from "@testing-library/react";
 
-const SquareBadge = forwardRef(({ children, ...rest }, ref) => {
+const SquareBadge = forwardRef<HTMLElement, BadgeProps>(({ children, ...rest }, ref) => {
     return (
         <Badge
             {...rest}
@@ -19,7 +19,7 @@ const SquareBadge = forwardRef(({ children, ...rest }, ref) => {
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <SquareBadge ref={ref}>
@@ -34,7 +34,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <SquareBadge

packages/react-components/src/box/tests/jest/Box.test.jsx → packages/react-components/src/box/tests/jest/Box.test.tsx

@@ -5,7 +5,7 @@ import { render, waitFor } from "@testing-library/react";
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Box ref={ref}>Box</Box>
@@ -18,7 +18,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Box

packages/react-components/src/button/tests/jest/Button.test.jsx → packages/react-components/src/button/tests/jest/Button.test.tsx

@@ -66,7 +66,7 @@ test("when type is specified, the type is forwarded", async () => {
 // ***** Api *****
 
 test("can focus the button with the focus api", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Button
@@ -86,7 +86,7 @@ test("can focus the button with the focus api", async () => {
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLButtonElement>();
 
     render(
         <Button ref={ref}>Cutoff</Button>
@@ -99,7 +99,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Button

packages/react-components/src/button/tests/jest/ButtonGroup.test.jsx → packages/react-components/src/button/tests/jest/ButtonGroup.test.tsx

@@ -1,8 +1,8 @@
-import { Button, ButtonGroup } from "@react-components/button";
+import { Button, ButtonGroup, ButtonGroupProps } from "@react-components/button";
 import { createRef, forwardRef } from "react";
 import { render, waitFor } from "@testing-library/react";
 
-const Group = forwardRef((props, ref) => {
+const Group = forwardRef<HTMLElement, Omit<ButtonGroupProps, "children">>((props, ref) => {
     return (
         <ButtonGroup
             {...props}
@@ -17,7 +17,7 @@ const Group = forwardRef((props, ref) => {
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Group ref={ref} />
@@ -30,7 +30,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Group

packages/react-components/src/button/tests/jest/CrossButton.test.jsx → packages/react-components/src/button/tests/jest/CrossButton.test.tsx

@@ -5,7 +5,7 @@ import { createRef } from "react";
 // ***** Api *****
 
 test("can focus the button with the focus api", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <CrossButton
@@ -26,7 +26,7 @@ test("can focus the button with the focus api", async () => {
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLButtonElement>();
 
     render(
         <CrossButton aria-label="Clear" ref={ref} />
@@ -39,7 +39,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <CrossButton