upgrade to react 18 and fix tests

brainly · Jul 9, 2024 · aee0edf · aee0edf
1 parent 634899a
commit aee0edf
Show file tree

Hide file tree

Showing 8 changed files with 347 additions and 101 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "@codesandbox/sandpack-react": "^1.17.0",
     "@codesandbox/sandpack-themes": "^1.17.0",
     "@floating-ui/react": "^0.21.1",
-    "@types/react": "17.0.40",
+    "@types/react": "18.3.3",
     "chalk": "4.1.2",
     "classnames": "^2.3.2",
     "glob": "^7.2.0",
@@ -66,10 +66,9 @@
     "@storybook/theming": "^6.5.13",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/react": "^13.1.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/react-dom": "17.0.13",
+    "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
     "@typescript/vfs": "^1.4.0",
@@ -121,8 +120,8 @@
     "progress-estimator": "^0.3.0",
     "query-string": "^6.5.0",
     "raw-loader": "^4.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-github-btn": "^1.2.0",
     "react-hot-loader": "^4.12.8",
     "react-router-dom": "^5.0.1",

diff --git a/src/components/accordion/Accordion.spec.tsx b/src/components/accordion/Accordion.spec.tsx
@@ -204,10 +204,14 @@ describe('<Accordion>', () => {
     expect(item.getAttribute('aria-expanded')).toEqual('false');
     expect(accordion.queryByRole('region')).toBeNull();
     accordion.getByRole('button').click();
-    expect(item.getAttribute('aria-expanded')).toEqual('true');
+    await waitFor(() =>
+      expect(item.getAttribute('aria-expanded')).toEqual('true')
+    );
     await waitFor(() => expect(accordion.getByRole('region')).toBeTruthy());
     accordion.getByRole('button').click();
-    expect(item.getAttribute('aria-expanded')).toEqual('false');
+    await waitFor(() =>
+      expect(item.getAttribute('aria-expanded')).toEqual('false')
+    );
     fireEvent(accordion.getByRole('region'), new Event('transitionend'));
     await waitFor(() => expect(accordion.queryByRole('region')).toBeNull());
   });

diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx
@@ -590,15 +590,9 @@ const Icon = ({
           role="img"
           aria-labelledby={labelledBy}
           focusable="false"
-          // @ts-expect-error
           suppressHydrationWarning
         >
-          <text
-            id={titleId}
-            visibility="hidden"
-            /* @ts-expect-error */
-            suppressHydrationWarning
-          >
+          <text id={titleId} visibility="hidden" suppressHydrationWarning>
             {title || defaultTitle}
           </text>
           {description && <desc id={descId}>{description}</desc>}

diff --git a/src/components/select-menu/SelectMenu.spec.tsx b/src/components/select-menu/SelectMenu.spec.tsx
@@ -192,7 +192,7 @@ describe('<SelectMenu />', () => {
     const select = render(<RenderSelectMenu />);
     const selectElement = select.getByRole('combobox') as HTMLElement;
 
-    selectElement.focus();
+    userEvent.tab();
     expect(selectElement).toEqual(document.activeElement);
     expect(selectElement.getAttribute('aria-expanded')).toBe('false');
 
@@ -202,6 +202,8 @@ describe('<SelectMenu />', () => {
     );
     const option1 = select.getByRole('option', {name: 'Physics'});
 
+    userEvent.tab();
+
     expect(option1).toHaveFocus();
     expect(option1).toEqual(document.activeElement);
 

diff --git a/src/components/subject-icons/SubjectIcon.tsx b/src/components/subject-icons/SubjectIcon.tsx
@@ -205,15 +205,9 @@ const SubjectIcon = ({
       className={iconClass}
       aria-labelledby={titleId}
       role="img"
-      /* @ts-expect-error */
       suppressHydrationWarning
     >
-      <text
-        id={titleId}
-        visibility="hidden"
-        /* @ts-expect-error */
-        suppressHydrationWarning
-      >
+      <text id={titleId} visibility="hidden" suppressHydrationWarning>
         {title || defaultTitle}
       </text>
       <use xlinkHref={iconType} aria-hidden="true" />

diff --git a/src/components/transition/Transition.spec.tsx b/src/components/transition/Transition.spec.tsx
@@ -143,8 +143,8 @@ describe('<Transition />', () => {
             active
           />
         );
-        fireEvent.transitionEnd(wrapper.container.firstElementChild);
       });
+      fireEvent.transitionEnd(wrapper.container.firstElementChild);
       expect(
         (wrapper.container.firstElementChild as HTMLElement).style.opacity
       ).toBe(`${after}`);

diff --git a/src/components/utils/useReducedMotion.spec.ts b/src/components/utils/useReducedMotion.spec.ts
@@ -1,5 +1,5 @@
 import useReducedMotion from './useReducedMotion';
-import {act, renderHook} from '@testing-library/react-hooks';
+import {act, renderHook} from '@testing-library/react';
 import MatchMedia from './__mocks__/mq';
 
 const MOTION_MQ = {