chore(react19): update tests to pass, remove all act a warnings on fo…

…cus, click, and blur calls in tests, pass required props to react-beautiful-dnd
commercetools · Jan 7, 2025 · 9aa1238 · 9aa1238
1 parent 0a8fa96
commit 9aa1238
Show file tree

Hide file tree

Showing 120 changed files with 3,638 additions and 5,279 deletions.
diff --git a/package.json b/package.json
@@ -71,9 +71,12 @@
   "resolutions": {
     "@babel/preset-env": "^7.18.6",
     "@jest/types": "29.6.3",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.1.0",
     "@types/eslint": "^9.0.0",
-    "@types/react": "17.0.83",
-    "@types/react-dom": "17.0.26",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@types/react-router": "5.1.20",
     "@types/unist": "3.0.3",
     "@typescript-eslint/eslint-plugin": "8.18.0",
@@ -117,8 +120,10 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
     "@types/is-hotkey": "^0.1.7",
+    "@types/jest": "^29.5.14",
     "@types/node": "18.19.68",
     "@types/prettier": "^2.7.3",
+    "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "8.18.0",
     "@typescript-eslint/parser": "8.18.0",
     "babel-jest": "29.7.0",
@@ -133,7 +138,7 @@
     "eslint": "8.57.1",
     "eslint-formatter-pretty": "4.1.0",
     "execa": "6.1.0",
-    "formik": "^2.2.9",
+    "formik": "^2.4.6",
     "glob": "8.1.0",
     "global": "4.4.0",
     "husky": "8.0.3",
@@ -164,9 +169,8 @@
     "rcfile": "1.0.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-intl": "^6.3.2",
+    "react-intl": "^7.1.0",
     "react-router-dom": "5.3.4",
-    "react-test-renderer": "17.0.2",
     "react-value": "0.2.0",
     "replace": "1.2.2",
     "rimraf": "3.0.2",

diff --git a/packages/calendar-utils/package.json b/packages/calendar-utils/package.json
@@ -41,12 +41,12 @@
     "moment": "2.30.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "peerDependencies": {
     "moment": "2.x",
     "react": "19.x",
     "react-dom": "19.x",
-    "react-intl": "6.x"
+    "react-intl": "7.x"
   }
 }
diff --git a/packages/components/buttons/accessible-button/package.json b/packages/components/buttons/accessible-button/package.json
@@ -28,7 +28,7 @@
     "@types/react-is": "^19.0.0",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-is": "17.0.2"
+    "react-is": "19.0.0"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/buttons/flat-button/package.json b/packages/components/buttons/flat-button/package.json
@@ -30,7 +30,7 @@
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/buttons/icon-button/package.json b/packages/components/buttons/icon-button/package.json
@@ -30,7 +30,7 @@
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/buttons/link-button/package.json b/packages/components/buttons/link-button/package.json
@@ -33,12 +33,12 @@
   },
   "devDependencies": {
     "react": "19.0.0",
-    "react-intl": "^6.3.2",
+    "react-intl": "^7.1.0",
     "react-router-dom": "5.3.4"
   },
   "peerDependencies": {
     "react": "19.x",
-    "react-intl": "6.x",
+    "react-intl": "7.x",
     "react-router-dom": "5.x"
   }
 }
diff --git a/packages/components/buttons/primary-button/package.json b/packages/components/buttons/primary-button/package.json
@@ -30,7 +30,7 @@
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/buttons/secondary-button/package.json b/packages/components/buttons/secondary-button/package.json
@@ -33,12 +33,12 @@
   },
   "devDependencies": {
     "react": "19.0.0",
-    "react-intl": "^6.3.2",
+    "react-intl": "^7.1.0",
     "react-router-dom": "5.3.4"
   },
   "peerDependencies": {
     "react": "19.x",
-    "react-intl": "6.x",
+    "react-intl": "7.x",
     "react-router-dom": "5.x"
   }
 }
diff --git a/packages/components/buttons/secondary-icon-button/package.json b/packages/components/buttons/secondary-icon-button/package.json
@@ -30,7 +30,7 @@
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/collapsible-panel/package.json b/packages/components/collapsible-panel/package.json
@@ -34,7 +34,7 @@
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/collapsible/src/collapsible.spec.tsx b/packages/components/collapsible/src/collapsible.spec.tsx
@@ -1,6 +1,6 @@
 import type { TCollapsibleProps } from './collapsible';
 import Collapsible from './collapsible';
-import { screen, render } from '../../../../test/test-utils';
+import { screen, render, fireEvent } from '../../../../test/test-utils';
 
 const TestComponent = (props: Omit<TCollapsibleProps, 'children'>) => (
   <Collapsible {...props}>
@@ -31,7 +31,7 @@ describe('when component is uncontrolled', () => {
   it('should be possible to toggle the open state', () => {
     render(<TestComponent />);
     expect(screen.getByTestId('openState')).toHaveTextContent('open');
-    screen.getByTestId('toggle').click();
+    fireEvent.click(screen.getByTestId('toggle'));
     expect(screen.getByTestId('openState')).toHaveTextContent('closed');
   });
 
@@ -54,7 +54,7 @@ describe('when component is controlled', () => {
       <TestComponent isClosed={false} onToggle={onToggle} />
     );
     expect(screen.getByTestId('openState')).toHaveTextContent('open');
-    screen.getByTestId('toggle').click();
+    fireEvent.click(screen.getByTestId('toggle'));
     expect(onToggle).toHaveBeenCalledTimes(1);
     // simulate the parent react to onToggle by changing the isClosed state
     // to true

diff --git a/packages/components/data-table-manager/package.json b/packages/components/data-table-manager/package.json
@@ -60,14 +60,14 @@
     "react-beautiful-dnd": "13.1.1"
   },
   "devDependencies": {
-    "formik": "^2.2.9",
+    "formik": "^2.4.6",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "peerDependencies": {
     "react": "19.x",
     "react-dom": "19.x",
-    "react-intl": "6.x"
+    "react-intl": "7.x"
   }
 }
diff --git a/packages/components/data-table-manager/src/draggable-tag/draggable-tag.spec.js b/packages/components/data-table-manager/src/draggable-tag/draggable-tag.spec.js
@@ -22,7 +22,12 @@ it('should render the column tag when rendering a column', () => {
 
   render(
     <DragDropContext>
-      <Droppable droppableId="droppableId">
+      <Droppable
+        droppableId="droppableId"
+        isDropDisabled={false}
+        isCombineEnabled={false}
+        ignoreContainerClipping={false}
+      >
         {(provided) => (
           <div ref={provided.innerRef}>
             <DraggableTag {...props} />

diff --git a/packages/components/data-table-manager/src/droppable-panel/droppable-panel.tsx b/packages/components/data-table-manager/src/droppable-panel/droppable-panel.tsx
@@ -22,7 +22,12 @@ export type TDroppablePanelProps = {
 
 const DroppablePanel = (props: TDroppablePanelProps) => {
   return (
-    <Droppable droppableId={props.droppableId}>
+    <Droppable
+      droppableId={props.droppableId}
+      isDropDisabled={false}
+      isCombineEnabled={false}
+      ignoreContainerClipping={false}
+    >
       {(provided) => (
         <TagContainerEditable
           data-testid={props.droppableId}

diff --git a/packages/components/data-table/package.json b/packages/components/data-table/package.json
@@ -32,10 +32,10 @@
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
-    "formik": "^2.2.9",
+    "formik": "^2.4.6",
     "react": "19.0.0"
   },
   "peerDependencies": {

diff --git a/packages/components/dropdowns/dropdown-menu/package.json b/packages/components/dropdowns/dropdown-menu/package.json
@@ -32,7 +32,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.spec.tsx b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.spec.tsx
@@ -1,6 +1,6 @@
 import SecondaryButton from '@commercetools-uikit/secondary-button';
 
-import { act, screen, render } from '../../../../../test/test-utils';
+import { act, screen, render, fireEvent } from '../../../../../test/test-utils';
 import DropdownMenu from './dropdown-menu';
 
 describe('DropdownMenu', () => {
@@ -34,18 +34,18 @@ describe('DropdownMenu', () => {
     expect(screen.queryByText('Option 1')).not.toBeVisible();
 
     // Open the dropdown
-    screen.getByLabelText('Trigger').click();
-    await jest.runAllTimersAsync();
+    fireEvent.click(screen.getByLabelText('Trigger'));
+    await act(async () => await jest.runAllTimersAsync());
     expect(await screen.findByText('Option 1')).toBeVisible();
     expect(screen.getByText('Option 2')).toBeVisible();
 
     // Clicking in the disabled options should do nothing
-    screen.getByText('Option 2').click();
+    fireEvent.click(screen.getByText('Option 2'));
     expect(secondOptionOnClick).toHaveBeenCalledTimes(0);
     expect(await screen.findByText('Option 1')).toBeVisible();
 
     // Clicking in the enabled option should close the dropdown
-    screen.getByText('Option 1').click();
+    fireEvent.click(screen.getByText('Option 1'));
     expect(firstOptionOnClick).toHaveBeenCalledTimes(1);
     expect(await screen.findByText('Option 1')).not.toBeVisible();
   });
@@ -64,14 +64,14 @@ describe('DropdownMenu', () => {
     expect(screen.queryByText('Content')).not.toBeVisible();
 
     // Open the dropdown
-    screen.getByLabelText('Trigger').click();
+    fireEvent.click(screen.getByLabelText('Trigger'));
     await jest.runAllTimersAsync();
     expect(await screen.findByText('Content')).toBeVisible();
 
     // Clicking outside the dropdown should close it
-    act(() => {
-      screen.getByText('Header').click();
-    });
+
+    fireEvent.click(screen.getByText('Header'));
+
     expect(await screen.findByText('Content')).not.toBeVisible();
   });
 

diff --git a/packages/components/field-errors/package.json b/packages/components/field-errors/package.json
@@ -28,10 +28,10 @@
   },
   "devDependencies": {
     "react": "19.0.0",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "peerDependencies": {
     "react": "19.x",
-    "react-intl": "6.x"
+    "react-intl": "7.x"
   }
 }
diff --git a/packages/components/field-label/package.json b/packages/components/field-label/package.json
@@ -34,7 +34,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/field-warnings/package.json b/packages/components/field-warnings/package.json
@@ -28,10 +28,10 @@
   },
   "devDependencies": {
     "react": "19.0.0",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "peerDependencies": {
     "react": "19.x",
-    "react-intl": "6.x"
+    "react-intl": "7.x"
   }
 }
diff --git a/packages/components/fields/async-creatable-select-field/package.json b/packages/components/fields/async-creatable-select-field/package.json
@@ -32,7 +32,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/...s/components/fields/async-creatable-select-field/src/async-creatable-select-field.spec.js b/...s/components/fields/async-creatable-select-field/src/async-creatable-select-field.spec.js
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, act } from 'react';
 import PropTypes from 'prop-types';
 import { render, fireEvent, waitFor } from '../../../../../test/test-utils';
 import AsyncCreatableSelectField from './async-creatable-select-field';
@@ -94,7 +94,7 @@ it('should call onFocus when the input is focused', async () => {
   const asyncCreatableSelectField = await findByLabelText(
     'AsyncCreatableSelectField'
   );
-  asyncCreatableSelectField.focus();
+  await act(async () => asyncCreatableSelectField.focus());
   expect(asyncCreatableSelectField).toHaveFocus();
   expect(onFocus).toHaveBeenCalled();
 });
@@ -105,9 +105,9 @@ it('should call onBlur when input loses focus', async () => {
   const asyncCreatableSelectField = await findByLabelText(
     'AsyncCreatableSelectField'
   );
-  asyncCreatableSelectField.focus();
+  await act(async () => asyncCreatableSelectField.focus());
   expect(asyncCreatableSelectField).toHaveFocus();
-  asyncCreatableSelectField.blur();
+  await act(async () => asyncCreatableSelectField.blur());
   expect(asyncCreatableSelectField).not.toHaveFocus();
   expect(onBlur).toHaveBeenCalled();
 });
@@ -129,7 +129,7 @@ it('should call onChange when changing the value', async () => {
   fireEvent.focus(input);
   fireEvent.keyDown(input, { key: 'ArrowDown' });
   await waitFor(() => findByText('Shipped'));
-  getByText('Shipped').click();
+  fireEvent.click(getByText('Shipped'));
   expect(onChange).toHaveBeenCalled();
 });
 

diff --git a/packages/components/fields/async-select-field/package.json b/packages/components/fields/async-select-field/package.json
@@ -32,7 +32,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",
-    "react-intl": "^6.3.2"
+    "react-intl": "^7.1.0"
   },
   "devDependencies": {
     "react": "19.0.0"