upgrade React to 17.0.2 (#2806)

* upgrade React to 17.0.2 * fix tests * remove resolutions * adjust test * fix lint * v226.0.0-beta.0
brainly · Jul 18, 2024 · cba5c6f · cba5c6f
1 parent f83a1e9
commit cba5c6f
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 138 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "brainly-style-guide",
-  "version": "225.12.1",
+  "version": "226.0.0-beta.0",
   "description": "Brainly Front-End Style Guide",
   "repository": "https://github.com/brainly/style-guide.git",
   "author": "Brainly Team",
@@ -28,7 +28,7 @@
     "@codesandbox/sandpack-react": "^1.17.0",
     "@codesandbox/sandpack-themes": "^1.17.0",
     "@floating-ui/react": "^0.21.1",
-    "@types/react": "^16.2.0",
+    "@types/react": "17.0.40",
     "chalk": "4.1.2",
     "classnames": "^2.3.2",
     "glob": "^7.2.0",
@@ -69,7 +69,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/react-dom": "^16.2.0",
+    "@types/react-dom": "17.0.13",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
     "@typescript/vfs": "^1.4.0",
@@ -121,13 +121,13 @@
     "progress-estimator": "^0.3.0",
     "query-string": "^6.5.0",
     "raw-loader": "^4.0.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-github-btn": "^1.2.0",
     "react-hot-loader": "^4.12.8",
     "react-router-dom": "^5.0.1",
     "react-router-hash-link": "^1.2.2",
-    "react-test-renderer": "^16.2.0",
+    "react-test-renderer": "17.0.2",
     "rev-file": "3.0.0",
     "rev-hash": "1.0.0",
     "rimraf": "^3.0.0",

diff --git a/src/components/accordion/Accordion.spec.tsx b/src/components/accordion/Accordion.spec.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import Accordion from './Accordion';
 import AccordionItem from './AccordionItem';
-import {render, fireEvent, waitFor} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import {render, fireEvent, waitFor, screen} from '@testing-library/react';
 import {testA11y} from '../../axe';
 
 describe('<Accordion>', () => {
@@ -215,25 +214,28 @@ describe('<Accordion>', () => {
 
   it('expands and collapses item on Enter/Space keydown when motion is reduced', async () => {
     const accordionId = 'id-1';
-    const accordion = render(
+
+    render(
       <Accordion reduceMotion>
-        <AccordionItem title={accordionId} id={accordionId}>
+        <AccordionItem title={accordionId} id={accordionId} tabIndex={1}>
           Accordion Item Description
         </AccordionItem>
       </Accordion>
     );
-    const item = accordion.getByRole('button');
+    const item = screen.getByRole('button');
 
     expect(item.getAttribute('aria-expanded')).toEqual('false');
-    expect(accordion.queryByRole('region')).toBeNull();
-    accordion.getByRole('button').focus();
-    expect(item).toEqual(document.activeElement);
-    userEvent.keyboard('{enter}');
+    expect(screen.queryByRole('region')).toBeNull();
+
+    focusElement(item);
+
+    fireEvent.keyDown(item, {key: 'Enter', keyCode: '13'});
     expect(item.getAttribute('aria-expanded')).toEqual('true');
-    expect(accordion.getByRole('region')).toBeTruthy();
-    userEvent.keyboard('{space}');
+    expect(screen.getByRole('region')).toBeTruthy();
+
+    fireEvent.keyDown(item, {key: 'Space', keyCode: '32'});
     expect(item.getAttribute('aria-expanded')).toEqual('false');
-    expect(accordion.queryByRole('region')).toBeNull();
+    expect(screen.queryByRole('region')).toBeNull();
   });
 
   it('has an accessible name', () => {
@@ -259,3 +261,14 @@ describe('<Accordion>', () => {
     });
   });
 });
+
+const focusElement = (element: HTMLElement) => {
+  // This does not set the document.activeElement to the item, so expect(item).toHaveFocus() fails
+  fireEvent.focus(element);
+
+  // Those do not trigger onFocus event in React 17, so focusedElementId is always null
+  // userEvent.tab();
+  // item.focus();
+
+  // expect(item).toHaveFocus();
+};
diff --git a/src/components/popover/Popover.spec.tsx b/src/components/popover/Popover.spec.tsx
@@ -50,23 +50,21 @@ export function RenderPopover(props: {
     </Popover>
   );
 }
-
 describe('<Popover />', () => {
   it('does not display popover by default', () => {
     render(<RenderPopover />);
-
     expect(screen.queryByText(POPOVER_TEXT)).not.toBeInTheDocument();
   });
 
   it('displays popover when trigger is hovered', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
 
     const button = screen.getByTestId('button1');
 
     expect(button).toBeInTheDocument();
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 
   it('does not display popover when opening with hover is disabled and trigger is hovered', async () => {
@@ -78,148 +76,148 @@ describe('<Popover />', () => {
   });
 
   it('does not keep popover open when click opening is disabled and trigger is clicked, then unhovered', async () => {
-    const popover = render(<RenderPopover useClick={false} />);
+    render(<RenderPopover useClick={false} />);
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
     userEvent.click(button);
-    expect(screen.queryByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover when trigger is no longer hovered', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
 
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('does not hide popover when hover leaves if trigger was clicked', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
     fireEvent.click(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(screen.getByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 
-  it('displays popover when trigger is focused', () => {
-    const popover = render(<RenderPopover />);
+  it('displays popover when trigger is focused', async () => {
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 
   it('hides popover when trigger loses focus', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.blur(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover if hover leaves, even when trigger is focused', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover if focus leaves, even when trigger is hovered', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.blur(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover when Esc key is hit, when popover is triggered by focus', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover when Esc key is hit, when popover is triggered by hover', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover when Esc key is hit, when popover is both focused and hovered', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
-  it('displays popover initally when set as default open', async () => {
-    const popover = render(<RenderPopover defaultOpen />);
+  it('displays popover initially when set as default open', async () => {
+    render(<RenderPopover defaultOpen />);
 
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 
   it('can hide default open popover by clicking somewhere in the document', async () => {
-    const {queryByText} = render(<RenderPopover defaultOpen />);
+    render(<RenderPopover defaultOpen />);
 
     userEvent.click(document.body);
-    await waitForElementToBeRemoved(() => queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('popover shows up and hides properly when set as default open', async () => {
-    const popover = render(<RenderPopover defaultOpen />);
+    render(<RenderPopover defaultOpen />);
 
     const button = screen.getByTestId('button1');
 
     expect(button).toBeInTheDocument();
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 });
diff --git a/src/components/rating/Rating.tsx b/src/components/rating/Rating.tsx
@@ -83,6 +83,7 @@ class Rating extends React.Component<RatingPropsType> {
     (arg0: React.MouseEvent<HTMLSpanElement>) => unknown
   > = [];
 
+  // It's a typo, should be componentWillReceiveProps (UNSAFE_componentWillReceiveProps)
   componentWillReciveProps(nextProps: RatingPropsType) {
     if (this.props.metricSize !== nextProps.metricSize) {
       this.createStarsOnChangeFunctions(nextProps.metricSize);