feat(react): update to React 18 (#13332)

* feat(react): update to React 18

* test: migrate AspectRatio test to RTL

* test(CodeSnippet): update tests to RTL

* test(FileUploaderButton): update tests to RTL

* test: update tests to use rtl

* test: update fileuploader tests to use RTL

* test(FileUploader): update tests to RTL

* test(FileUploader): remove test utils

* feat: update File Uploader RTL

* test: update fileuploader tests to use RTL

* refactor: move ErrroBoundary test to RTL

* test: update icon test to use RTL

* chore: @testing-library/dom is not needed and recommended to not be installed alongside framework packages

* fix(user-event): update deprecated keys

* test: await all userEvent calls

* fix: tests

* test: fix structureList & Switch react18 tests

* test: fix Copy & CopyButton react18 tests

* test(MultiSelect): use userEvent instead of react dom utils

* test(useDisclosure): refactor test to work with react 18

* test: fix FileUploader & FileUploaderButton react18 tests

* fix(Modal): use match function to match enter & escape keys

* test(ErrorBoundary): address lint issue

* test(useDelayedState): use act from rtl instead of react-dom-utils

* test(Treeview): make test work in react 18

* fix(Copy): remove console log

* test(IconSwitch): await userEvent calls

---------

Co-authored-by: Francine Lucca <francinelucca@hotmail.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>

config/jest-config-carbon/package.json

@@ -37,7 +37,7 @@
     "sass": "^1.51.0"
   },
   "devDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

examples/class-prefix/package.json

@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@carbon/react": "^1.26.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

examples/codesandbox-with-sass-compilation/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@carbon/react": "^1.26.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "react-scripts": "5.0.0",

examples/codesandbox/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@carbon/react": "^1.26.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "react-scripts": "5.0.0",

examples/custom-theme/package.json

@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@carbon/react": "^1.26.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

examples/id-prefix/package.json

@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@carbon/react": "^1.26.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

examples/incremental-migration/package.json

@@ -18,8 +18,8 @@
     "carbon-components-react": "^7.57.0",
     "carbon-icons": "^7.0.7",
     "next": "12.1.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "eslint": "8.12.0",

examples/light-dark-mode/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@carbon/react": "^1.26.0",
     "next": "12.1.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "eslint": "8.12.0",

examples/nextjs/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@carbon/react": "^1.26.0",
     "next": "12.1.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "eslint": "8.12.0",

examples/vite/package.json

@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@carbon/react": "^1.26.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package.json

@@ -33,9 +33,9 @@
     "@types/prop-types": "15.7.5",
     "ast-types": "^0.14.0",
     "node-sass": "^8.0.0",
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
-    "react-is": "~17.0.2",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-is": "~18.2.0",
     "react-test-renderer": "~17.0.2"
   },
   "devDependencies": {
@@ -53,10 +53,9 @@
     "@percy/cli": "^1.1.0",
     "@percy/playwright": "^1.0.4",
     "@playwright/test": "^1.28.0",
-    "@testing-library/dom": "^8.11.1",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "accessibility-checker": "^3.1.32",
     "all-contributors-cli": "^6.19.0",
     "cross-env": "^7.0.0",
@@ -72,8 +71,8 @@
     "lint-staged": "^13.0.0",
     "node-gyp": "^7.1.2",
     "prettier": "^2.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^4.0.0",
     "stylelint": "^14.3.0"
   },

packages/carbon-components-react/package.json

@@ -35,8 +35,8 @@
     "postinstall": "carbon-telemetry collect --install && node scripts/postinstall.js"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17.0.1",
-    "react-dom": "^16.8.6 || ^17.0.1",
+    "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
+    "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "sass": "^1.33.0"
   },
   "dependencies": {
@@ -61,8 +61,8 @@
     "babel-preset-carbon": "^0.4.0",
     "browserslist-config-carbon": "^11.1.0",
     "fs-extra": "^10.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^4.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^2.0.0"

packages/icon-build-helpers/package.json

@@ -42,8 +42,8 @@
     "memfs": "^3.4.0",
     "prettier": "^2.7.1",
     "prop-types": "^15.6.2",
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^4.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^2.0.0",

packages/icon-build-helpers/src/builders/react/components/__tests__/Icon-test.js

@@ -8,44 +8,32 @@
  */
 
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '@testing-library/react';
 import Icon from '../Icon';
 
 describe('Icon', () => {
-  let mountNode;
-
-  beforeEach(() => {
-    mountNode = document.createElement('div');
-    document.body.appendChild(mountNode);
-  });
-
-  afterEach(() => {
-    mountNode.parentNode.removeChild(mountNode);
-  });
-
   it('should render', () => {
     expect(() => {
       render(
         <Icon width={16} height={16} viewBox="0 0 16 16">
           <circle cx={8} cy={8} r={8} />
-        </Icon>,
-        mountNode
+        </Icon>
       );
     }).not.toThrow();
   });
 
   it('should treat focusable as a string', () => {
-    render(
+    const { container, rerender } = render(
       <Icon width={16} height={16} viewBox="0 0 16 16">
         <circle cx={8} cy={8} r={8} />
-      </Icon>,
-      mountNode
+      </Icon>
     );
 
-    const getContainer = () => mountNode.querySelector('svg');
+    const getContainer = () => container.querySelector('svg');
     expect(getContainer()).toHaveAttribute('focusable', 'false');
 
-    render(<Icon focusable />, mountNode);
+    rerender(<Icon focusable />);
+
     expect(getContainer()).toHaveAttribute('focusable', 'true');
   });
 
@@ -54,19 +42,18 @@ describe('Icon', () => {
     const ref = jest.fn((node) => {
       svg = node;
     });
-    render(<Icon ref={ref} />, mountNode);
-    expect(svg).toEqual(mountNode.querySelector('svg'));
+    const { container } = render(<Icon ref={ref} />);
+    expect(svg).toEqual(container.querySelector('svg'));
   });
 
   it('should be focusable if an aria label and tab index is used', () => {
-    const getContainer = () => mountNode.querySelector('svg');
+    const getContainer = () => container.querySelector('svg');
 
     // Test without a tabIndex, should not be focusable
-    render(
+    const { container, rerender } = render(
       <Icon width={16} height={16} viewBox="0 0 16 16" aria-label="Mock icon">
         <circle cx={8} cy={8} r={8} />
-      </Icon>,
-      mountNode
+      </Icon>
     );
 
     expect(getContainer()).toHaveAttribute('aria-label', 'Mock icon');
@@ -75,28 +62,26 @@ describe('Icon', () => {
 
     // Test without aria-label and with tabIndex, should not be focusable
     // because we require a label in that case
-    render(
+    rerender(
       <Icon width={16} height={16} viewBox="0 0 16 16" tabIndex="0">
         <circle cx={8} cy={8} r={8} />
-      </Icon>,
-      mountNode
+      </Icon>
     );
 
     expect(getContainer()).not.toHaveAttribute('aria-label');
     getContainer().focus();
     expect(document.activeElement === getContainer()).toBe(false);
 
     // Test with aria-label and tabIndex, should be focusable
-    render(
+    rerender(
       <Icon
         width={16}
         height={16}
         viewBox="0 0 16 16"
         aria-label="Mock icon"
         tabIndex="0">
         <circle cx={8} cy={8} r={8} />
-      </Icon>,
-      mountNode
+      </Icon>
     );
 
     expect(getContainer()).toHaveAttribute('aria-label', 'Mock icon');

packages/react/.storybook/main.js

@@ -94,6 +94,9 @@ module.exports = {
   typescript: {
     reactDocgen: 'react-docgen', // Favor docgen from prop-types instead of TS interfaces
   },
+  reactOptions: {
+    legacyRootApi: false,
+  },
   webpack(config) {
     const babelLoader = config.module.rules.find((rule) => {
       return rule.use.some(({ loader }) => {

packages/react/package.json

@@ -37,8 +37,8 @@
     "storybook": "start-storybook -p 3000"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17.0.1",
-    "react-dom": "^16.8.6 || ^17.0.1",
+    "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
+    "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "sass": "^1.33.0"
   },
   "dependencies": {
@@ -59,7 +59,7 @@
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "use-resize-observer": "^6.0.0",
     "wicg-inert": "^3.1.1",
     "window-or-global": "^1.0.1"
@@ -106,8 +106,8 @@
     "postcss-loader": "^7.0.0",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "requestanimationframe": "^0.0.23",
     "rimraf": "^4.0.0",
     "rollup": "^2.79.1",

packages/react/src/components/Accordion/__tests__/Accordion-test.js

@@ -52,7 +52,7 @@ describe('Accordion', () => {
       await expect(screen.getByText('Heading A')).toHaveNoAxeViolations();
 
       // click to open
-      userEvent.click(screen.getByText('Heading A'));
+      await userEvent.click(screen.getByText('Heading A'));
 
       // test when open
       await expect(screen.getByText('Heading A')).toHaveNoAxeViolations();
@@ -80,7 +80,7 @@ describe('Accordion', () => {
       );
 
       // click to open
-      userEvent.click(screen.getByText('Heading A'));
+      await userEvent.click(screen.getByText('Heading A'));
 
       // test when open
       await expect(screen.getByText('Heading A')).toHaveNoACViolations(
@@ -105,7 +105,7 @@ describe('Accordion', () => {
         </Accordion>
       );
 
-      userEvent.tab();
+      await userEvent.tab();
       await expect(document.getElementsByTagName('button')[0]).toHaveFocus();
     });
 
@@ -126,7 +126,7 @@ describe('Accordion', () => {
 
       // userEvent.type clicks the element passed before typing without skipClick option
       // see: https://github.com/testing-library/user-event#typeelement-text-options
-      userEvent.type(screen.getByText('Heading A'), '{enter}', {
+      await userEvent.type(screen.getByText('Heading A'), '{enter}', {
         skipClick: true,
       });
 
@@ -150,7 +150,7 @@ describe('Accordion', () => {
 
       // userEvent.type clicks the element passed before typing without skipClick option
       // see: https://github.com/testing-library/user-event#typeelement-text-options
-      userEvent.type(screen.getByText('Heading A'), '{space}', {
+      await userEvent.type(screen.getByText('Heading A'), '{Space}', {
         skipClick: true,
       });