(chore)[]: resolve unit test issues (#2226)

* resolve jsx test failures

* resolve dependency conflicts

* Revert uneccessary package.json changes

* revert unneccessary CodeBlock.tsx updates

* revert whitespace changes

Author: lindsey-volta

.gitignore

@@ -62,6 +62,7 @@ public
 .DS_Store
 
 # Yarn
+yarn.lock
 yarn-error.log
 .pnp/
 .pnp.js

package.json

@@ -105,6 +105,10 @@
     "react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825": {
       "react": "^18.2.0"
     }
+  },
+   "resolutions": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
   },
   "scripts": {
     "lint": "eslint 'src/**/*' 'lib/**/*' 'gatsby/**/*'",

src/components/ExternalLink.tsx

@@ -1,22 +1,22 @@
 import * as React from "react"
 
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles"
 
-import {  Tooltip } from "@mui/material"
+import { Tooltip } from "@mui/material"
 
 import { Launch } from "@mui/icons-material"
 import clsx from "classnames"
-import {PropsWithChildren} from 'react';
+import { PropsWithChildren } from "react"
 
-const PREFIX = 'ExternalLink';
+const PREFIX = "ExternalLink"
 
 const classes = {
   link: `${PREFIX}-link`,
   icon: `${PREFIX}-icon`,
-  hover: `${PREFIX}-hover`
-};
+  hover: `${PREFIX}-hover`,
+}
 
-const Root = styled('div')(() => ({
+const Root = styled("span")(() => ({
   [`& .${classes.link}`]: {
     display: "inline-flex",
     alignItems: "center",
@@ -32,36 +32,40 @@ const Root = styled('div')(() => ({
       opacity: 1.0,
     },
     opacity: 0.3,
-  }
-}));
+  },
+}))
 
 type Props = {
   href: string
   title?: string
   hover?: true | undefined
 }
 
-const ExternalLink: React.FC<PropsWithChildren<Props>> = ({ href, title, children, hover }) => {
-
+const ExternalLink: React.FC<PropsWithChildren<Props>> = ({
+  href,
+  title,
+  children,
+  hover,
+}) => {
   return (
-      <Root>
-        <Tooltip title={title || ""}>
-          <a
-            className={clsx({ [classes.hover]: hover }, classes.link)}
-            href={href}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {children}
-            <Launch
-              className={clsx({ [classes.icon]: children !== undefined })}
-              color="action"
-              fontSize={children === undefined ? undefined : "inherit"}
-            />
-          </a>
-        </Tooltip>
-      </Root>
-  );
+    <Root>
+      <Tooltip title={title || ""}>
+        <a
+          className={clsx({ [classes.hover]: hover }, classes.link)}
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {children}
+          <Launch
+            className={clsx({ [classes.icon]: children !== undefined })}
+            color="action"
+            fontSize={children === undefined ? undefined : "inherit"}
+          />
+        </a>
+      </Tooltip>
+    </Root>
+  )
 }
 
 export default ExternalLink

tsconfig.json

@@ -113,6 +113,7 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */,
     "baseUrl": "./src",
+    "noEmit": true,
     "paths": {
       "@/*": ["./*"]
     }