[LOOM-1609]: React 18 migration (#3585)

* [ARGG-1201]: React 18 investigation

* Updating tests

* Update infinite scroll tests

* Fix expected types in tests

* Fix ignored Types

* Update react versions check

* Add missing licence header

* Update danger checks to ignore mass warnings

* Fixing Autosuggest tests to remove warnings for deprecated functions

* Removing problematic type

* Reinstate Percy tests

* Update React and React DOM ranges

* Update React peer dep range

dangerfile.ts

@@ -149,10 +149,14 @@ const reactRecogniseProp = ["React does not recognize"]
 const invalidTags = ["The tag <rect>", "The tag <g>", "The tag <text>"]
 const passingTests = ["✓"]
 const unknownEventHandler = ["Unknown event handler"]
-const propType = ["Failed prop type"]
+const propType = ["Failed prop type", "Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.", 'A props object containing a "key" prop is being spread into JSX:']
 const componentWillReceiveProps = ["componentWillReceiveProps"]
 const invalidCSSProperties = ["is an invalid value for the .* css style property."]
 const invalidProps = ["for a non-boolean attribute", "Invalid ARIA attribute"]
+// TODO: Address tests being wrapped in act
+const actTests = ["inside a test was not wrapped in act(...)"]
+// TODO: Convert components that use CSSTransition to functional components and allow for using refs
+const findDOMNode = ["findDOMNode is deprecated and will be removed in the next major release."];
 
 const allIgnoredWarnings = linterWarnings
   .concat(invalidReactChild)
@@ -166,6 +170,8 @@ const allIgnoredWarnings = linterWarnings
   .concat(componentWillReceiveProps)
   .concat(invalidCSSProperties)
   .concat(invalidProps)
+  .concat(actTests)
+  .concat(findDOMNode);
 
 commonFileWarnings('logs/test.log', {
   logType: 'fail',

package.json

@@ -134,15 +134,14 @@
     "@storybook/react-webpack5": "^7.6.8",
     "@storybook/test": "^7.6.19",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/jest-axe": "^3.5.3",
+    "@types/jest-axe": "^3.5.9",
     "@types/lodash.clamp": "^4.0.9",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-window": "^1.8.8",
     "@types/webpack-env": "^1.18.4",
     "autoprefixer": "^10.4.18",
@@ -164,9 +163,9 @@
     "gulp-rename": "^2.0.0",
     "gulp-svgmin": "^4.1.0",
     "husky": "^9.1.3",
-    "jest": "^29.0.0",
+    "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.2.2",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
     "lodash": "^4.17.20",
     "mini-css-extract-plugin": "^2.9.0",
@@ -175,8 +174,8 @@
     "postcss-loader": "^8.1.1",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-svg-loader": "^3.0.1",
     "sass-embedded": "^1.77.1",
     "sass-loader": "^14.2.1",

packages/bpk-component-autosuggest/src/BpkAutosuggest-test.js

@@ -19,7 +19,6 @@
 /* @flow strict */
 
 import { render } from '@testing-library/react';
-import ReactTestUtils from 'react-dom/test-utils';
 
 import BpkAutosuggest from './BpkAutosuggest';
 
@@ -72,7 +71,7 @@ describe('BpkAutosuggest', () => {
       inputRef = ref;
     };
 
-    const tree = ReactTestUtils.renderIntoDocument(
+    const { container } = render(
       <BpkAutosuggest
         suggestions={suggestions}
         onSuggestionsFetchRequested={onSuggestionsFetchRequested}
@@ -83,13 +82,12 @@ describe('BpkAutosuggest', () => {
       />,
     );
 
-    const input = ReactTestUtils.findRenderedDOMComponentWithTag(tree, 'input');
-
+    const input = container.querySelector('input');
     expect(input).toEqual(inputRef);
   });
 
   it('should default autocomplete to off', () => {
-    const tree = ReactTestUtils.renderIntoDocument(
+    const { container } = render(
       <BpkAutosuggest
         suggestions={suggestions}
         onSuggestionsFetchRequested={onSuggestionsFetchRequested}
@@ -100,12 +98,12 @@ describe('BpkAutosuggest', () => {
       />,
     );
 
-    const input = ReactTestUtils.findRenderedDOMComponentWithTag(tree, 'input');
+    const input = container.querySelector('input');
     expect(input.autocomplete).toEqual('off');
   });
 
   it('should allow a consumer to override autocomplete', () => {
-    const tree = ReactTestUtils.renderIntoDocument(
+    const { container } = render(
       <BpkAutosuggest
         suggestions={suggestions}
         onSuggestionsFetchRequested={onSuggestionsFetchRequested}
@@ -116,7 +114,7 @@ describe('BpkAutosuggest', () => {
       />,
     );
 
-    const input = ReactTestUtils.findRenderedDOMComponentWithTag(tree, 'input');
+    const input = container.querySelector('input');
     expect(input.autocomplete).toEqual('on');
   });
 });

packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx

@@ -16,28 +16,27 @@
  * limitations under the License.
  */
 
-import { renderToString } from 'react-dom/server';
-
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import BpkBottomSheet from './BpkBottomSheet';
 // mock breakpoint to always match
-jest.mock('../../bpk-component-breakpoint/src/useMediaQuery', () => jest.fn(() => true));
+jest.mock('../../bpk-component-breakpoint/src/useMediaQuery', () =>
+  jest.fn(() => true),
+);
 describe('BpkBottomSheet', () => {
-
   const props = {
     ariaLabelledby: 'bottom-sheet',
-    id: "my-bottom-sheet",
+    id: 'my-bottom-sheet',
     isOpen: true,
     onClose: jest.fn(),
-  }
+  };
 
   it('renders without crashing with all props', () => {
-    expect(() => renderToString(
+    render(
       <BpkBottomSheet
-        actionText='Action'
-        ariaLabelledby='bottom-sheet'
+        actionText="Action"
+        ariaLabelledby="bottom-sheet"
         closeLabel="Close"
         closeOnEscPressed
         closeOnScrimClick
@@ -49,81 +48,67 @@ describe('BpkBottomSheet', () => {
         wide
       >
         Bottom Sheet content
-      </BpkBottomSheet>
-    )).not.toThrow();
+      </BpkBottomSheet>,
+    );
+    expect(screen.getByText('Bottom Sheet content')).toBeInTheDocument();
+    expect(screen.getByText('Bottom sheet title')).toBeInTheDocument();
+
   });
+
   it('renders without crashing with minimum props', () => {
-    expect(() => renderToString(
-      <BpkBottomSheet
-        ariaLabelledby='bottom-sheet'
-        id="my-bottom-sheet"
-        isOpen
-        onClose={jest.fn()}
-      >
-        Bottom Sheet content
-      </BpkBottomSheet>
-    )).not.toThrow();
-  });
-  it('renders correctly with minimum prop', () => {
-    const { asFragment } = render(
-      <BpkBottomSheet
-        ariaLabelledby='bottom-sheet'
-        id="my-bottom-sheet"
-        isOpen
-        onClose={jest.fn()}
-      >
-        Bottom Sheet content
-      </BpkBottomSheet>
-    );
-    expect(asFragment()).toMatchSnapshot();
+    render( <BpkBottomSheet
+      ariaLabelledby="bottom-sheet"
+      id="my-bottom-sheet"
+      isOpen
+      onClose={jest.fn()}
+    >
+      Bottom Sheet content
+    </BpkBottomSheet>,);
+    expect(screen.getByText('Bottom Sheet content')).toBeInTheDocument();
+    expect(screen.queryByText('Bottom sheet title')).not.toBeInTheDocument();
   });
+
   it('renders correctly with wide prop', () => {
-    const { asFragment } = render(
-      <BpkBottomSheet
-        {...props}
-        wide
-      >
+    const { container } = render(
+      <BpkBottomSheet {...props} wide>
         Bottom Sheet content
-      </BpkBottomSheet>
+      </BpkBottomSheet>,
     );
-    expect(asFragment()).toMatchSnapshot();
+    expect(container.querySelector('.bpk-bottom-sheet--wide')).toBeInTheDocument();
   });
+
   it('renders correctly with action props', () => {
-    const { asFragment } = render(
-      <BpkBottomSheet
-        {...props}
-        actionText='Action'
-        onAction={jest.fn()}
-        wide
-      >
+    render(
+      <BpkBottomSheet {...props} actionText="Action" onAction={jest.fn()} wide>
         Bottom Sheet content
-      </BpkBottomSheet>
+      </BpkBottomSheet>,
     );
-    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByText('Action')).toBeInTheDocument();
   });
+
   it('renders correctly with ariaLabelledBy prop', () => {
     const { container } = render(
-      <BpkBottomSheet
-        {...props}
-        ariaLabelledby='my-bottomsheet-title-id'
-      >
+      <BpkBottomSheet {...props} ariaLabelledby="my-bottomsheet-title-id">
         Bottom Sheet content
-      </BpkBottomSheet>
+      </BpkBottomSheet>,
     );
 
-    expect(container.querySelector('dialog[aria-labelledby="my-bottomsheet-title-id"]')).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        'dialog[aria-labelledby="my-bottomsheet-title-id"]',
+      ),
+    ).toBeInTheDocument();
   });
+
   it('renders correctly with ariaLabel prop', () => {
     const { container } = render(
-      <BpkBottomSheet
-        {...props}
-        ariaLabel='my a11y title'
-      >
+      <BpkBottomSheet {...props} ariaLabel="my a11y title">
         Bottom Sheet content
-      </BpkBottomSheet>
-
+      </BpkBottomSheet>,
     );
 
-    expect(container.querySelector('dialog[aria-label="my a11y title"]')).toBeInTheDocument();
+    expect(
+      container.querySelector('dialog[aria-label="my a11y title"]'),
+    ).toBeInTheDocument();
   });
 });