React 18 upgrade + API root creation change (#4617)

wjrosa · daledupreez · annemirasol · web-flow · commit 7277bc99eb1d · 2025-09-01T10:57:32.000-03:00
* React API root creation change * React dom package updates * Fix tests + React 18 upgrade * Fix tests * Adding react-test-renderer package * Reverting unnecessary changes * Changelog and readme entries * Removing unnecessary package * Updating @testing-library/react * Replace act function source * Fix tests * Remove @testing-library/react-hooks for compatibility with React 18 (#4619) * Use act and renderHook from @testing-library/react instead of @testing-library/react-hooks * Remove @testing-library/react-hooks * Fix warning for PaymentMethodDeprecationPill test (#4620) * Fix merge * Renaming some test files * Fix createRoot console error --------- Co-authored-by: daledupreez <dale.du.preez@automattic.com> Co-authored-by: Anne Mirasol <anne.mirasol@automattic.com>
diff --git a/changelog.txt b/changelog.txt
@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.9.0 - xxxx-xx-xx =
+* Update - Upgrade React to v18 and related dependencies
 * Dev - Simplifies the way test payment instructions are built when the Optimized Checkout is enabled
 * Dev - Upgrades the ESLint packages and their related libraries
 * Dev - Upgrade the Prettier package and related libraries, and apply updated formatting rules
diff --git a/client/components/payment-method-deprecation-pill/__tests__/payment-method-deprecation-pill.test.js b/client/components/payment-method-deprecation-pill/__tests__/payment-method-deprecation-pill.test.js
@@ -6,7 +6,7 @@ import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
 describe( 'PaymentMethodDeprecationPill', () => {
 	it( 'should render', () => {
 		render(
-			<UpeToggleContext.Provider>
+			<UpeToggleContext.Provider value={ true }>
 				<PaymentMethodDeprecationPill />
 			</UpeToggleContext.Provider>
 		);
diff --git a/client/components/popover/test/index.test.js b/client/components/popover/test/index.test.js
@@ -1,5 +1,6 @@
-import { render, screen, act } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react';
 import Popover from '..';
 
 const DummyBaseComponent = ( { children, ...props } ) => (
diff --git a/client/components/tooltip/test/index.test.js b/client/components/tooltip/test/index.test.js
@@ -1,4 +1,5 @@
-import { render, screen, act } from '@testing-library/react';
+import { act } from 'react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Tooltip from '..';
 
diff --git a/client/data/account-keys/__tests__/hooks.test.js b/client/data/account-keys/__tests__/hooks.test.js
@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useAccountKeys, useAccountKeysPublishableKey } from '../hooks';
 import { STORE_NAME } from '../../constants';
 import { useSelect, useDispatch } from '@wordpress/data';
diff --git a/client/data/account/__tests__/hooks.test.js b/client/data/account/__tests__/hooks.test.js
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useGetCapabilities, useAccount } from '../hooks';
 import { useSelect, useDispatch } from '@wordpress/data';
 
diff --git a/client/data/payment-gateway/__tests__/hooks.test.js b/client/data/payment-gateway/__tests__/hooks.test.js
@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import {
 	usePaymentGateway,
 	useEnabledPaymentGateway,
diff --git a/client/data/settings/__tests__/actions.test.js b/client/data/settings/__tests__/actions.test.js
diff --git a/client/data/settings/__tests__/hooks.test.js b/client/data/settings/__tests__/hooks.test.js
@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import {
 	useEnabledPaymentMethodIds,
 	useGetAvailablePaymentMethodIds,
diff --git a/client/data/settings/__tests__/reducer.test.js b/client/data/settings/__tests__/reducer.test.js
diff --git a/client/data/settings/__tests__/resolvers.test.js b/client/data/settings/__tests__/resolvers.test.js
diff --git a/client/data/settings/__tests__/selectors.test.js b/client/data/settings/__tests__/selectors.test.js
diff --git a/client/entrypoints/amazon-pay-settings/index.js b/client/entrypoints/amazon-pay-settings/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import AmazonPayPage from './amazon-pay-page';
 
 const amazonPayContainer = document.getElementById(
 	'wc-stripe-amazon-pay-settings-container'
 );
 
 if ( amazonPayContainer ) {
-	ReactDOM.render( <AmazonPayPage />, amazonPayContainer );
+	createRoot( amazonPayContainer ).render( <AmazonPayPage /> );
 }
diff --git a/client/entrypoints/payment-gateways/index.js b/client/entrypoints/payment-gateways/index.js
@@ -1,13 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import PaymentGatewaysConfirmation from './payment-gateways-confirmation';
 
 const paymentGatewaysContainer = document.getElementById(
 	'wc-stripe-payment-gateways-container'
 );
 if ( paymentGatewaysContainer ) {
-	ReactDOM.render(
-		<PaymentGatewaysConfirmation />,
-		paymentGatewaysContainer
+	createRoot( paymentGatewaysContainer ).render(
+		<PaymentGatewaysConfirmation />
 	);
 }
diff --git a/client/entrypoints/payment-request-settings/index.js b/client/entrypoints/payment-request-settings/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import PaymentRequestsPage from './payment-request-page';
 
 const container = document.getElementById(
 	'wc-stripe-payment-request-settings-container'
 );
 
 if ( container ) {
-	ReactDOM.render( <PaymentRequestsPage />, container );
+	createRoot( container ).render( <PaymentRequestsPage /> );
 }
diff --git a/client/express-checkout/utils/check-payment-method-availability.js b/client/express-checkout/utils/check-payment-method-availability.js
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { ExpressCheckoutElement, Elements } from '@stripe/react-stripe-js';
 import { memoize } from 'lodash';
 import {
@@ -23,7 +23,7 @@ export const checkPaymentMethodIsAvailable = memoize(
 
 			document.querySelector( 'body' ).appendChild( containerEl );
 
-			const root = ReactDOM.createRoot( containerEl );
+			const root = createRoot( containerEl );
 
 			root.render(
 				<Elements
diff --git a/client/settings/display-order-customization-notice/__tests__/display-order-customization-notice.js b/client/settings/display-order-customization-notice/__tests__/display-order-customization-notice.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { screen, render, act } from '@testing-library/react';
+import React, { act } from 'react';
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import DisplayOrderCustomizationNotice from '..';
 import UpeToggleContext from '../../upe-toggle/context';
diff --git a/client/settings/index.js b/client/settings/index.js
@@ -1,6 +1,6 @@
 /* global wc_stripe_settings_params */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ConnectStripeAccount from './connect-stripe-account';
 import StripeAccountConnectedNotice from './stripe-account-connected-notice';
 import SettingsManager from './settings-manager';
@@ -22,7 +22,7 @@ const newAccountContainer = document.getElementById(
 );
 
 if ( settingsContainer ) {
-	ReactDOM.render(
+	createRoot( settingsContainer ).render(
 		<UpeToggleContextProvider
 			defaultIsUpeEnabled={
 				// eslint-disable-next-line camelcase
@@ -38,13 +38,12 @@ if ( settingsContainer ) {
 				<StripeAccountConnectedNotice />
 				<SettingsManager />
 			</OCToggleContextProvider>
-		</UpeToggleContextProvider>,
-		settingsContainer
+		</UpeToggleContextProvider>
 	);
 }
 
 if ( paymentGatewayContainer ) {
-	ReactDOM.render(
+	createRoot( paymentGatewayContainer ).render(
 		<UpeToggleContextProvider
 			defaultIsUpeEnabled={
 				// eslint-disable-next-line camelcase
@@ -59,13 +58,12 @@ if ( paymentGatewayContainer ) {
 			>
 				<PaymentGatewayManager />
 			</OCToggleContextProvider>
-		</UpeToggleContextProvider>,
-		paymentGatewayContainer
+		</UpeToggleContextProvider>
 	);
 }
 
 if ( newAccountContainer ) {
-	ReactDOM.render(
+	createRoot( newAccountContainer ).render(
 		<ConnectStripeAccount
 			oauthUrl={
 				// eslint-disable-next-line camelcase
@@ -75,7 +73,6 @@ if ( newAccountContainer ) {
 				// eslint-disable-next-line camelcase
 				wc_stripe_settings_params.stripe_test_oauth_url
 			}
-		/>,
-		newAccountContainer
+		/>
 	);
 }
diff --git a/client/settings/optimized-checkout-notice/__tests__/index.test.js b/client/settings/optimized-checkout-notice/__tests__/index.test.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { screen, render, act } from '@testing-library/react';
+import React, { act } from 'react';
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import OptimizedCheckoutNotice from '..';
 import apiFetch from '@wordpress/api-fetch';
diff --git a/client/settings/payment-settings/promotional-banner/__tests__/bnpl-promotion-banner.test.js b/client/settings/payment-settings/promotional-banner/__tests__/bnpl-promotion-banner.test.js
@@ -1,4 +1,5 @@
-import { act, render } from '@testing-library/react';
+import { act } from 'react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { BNPLPromotionBanner } from '../bnpl-promotion-banner';
 import apiFetch from '@wordpress/api-fetch';
diff --git a/client/settings/settings-manager/__tests__/index.test.js b/client/settings/settings-manager/__tests__/index.test.js
@@ -2,6 +2,23 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { getQuery } from '@woocommerce/navigation';
 import SettingsManager from '..';
 
+jest.mock( '../../payment-settings' );
+
+jest.mock( '../../payment-methods' );
+
+jest.mock( '../../save-settings-section' );
+
+jest.mock( 'wcstripe/data', () => ( {
+	useEnabledPaymentMethodIds: jest.fn().mockReturnValue( [ [], jest.fn() ] ),
+	useSettings: jest.fn().mockReturnValue( {} ),
+} ) );
+
+jest.mock( 'wcstripe/data/account', () => ( {
+	useAccount: jest.fn().mockReturnValue( {
+		data: null,
+	} ),
+} ) );
+
 jest.mock( '@woocommerce/navigation', () => ( {
 	getQuery: jest.fn().mockReturnValue( {} ),
 	updateQueryString: jest.fn(),
diff --git a/client/stripe-utils/utils.js b/client/stripe-utils/utils.js
@@ -1,5 +1,6 @@
 /* global wc_stripe_upe_params, wc, wc_stripe_express_checkout_params */
-import ReactDOM from 'react-dom';
+import React from 'react';
+import { createPortal } from 'react-dom';
 import { getAppearance } from '../styles/upe';
 import {
 	errorTypes,
@@ -536,7 +537,7 @@ export const showErrorCheckout = ( errorMessage ) => {
 		$container.find( '.wc-block-components-notices' ).remove();
 
 		$container.prepend( wrapper );
-		ReactDOM.createRoot( wrapper ).render( <NoticeComponent /> );
+		createPortal( <NoticeComponent />, wrapper );
 	} else {
 		if ( errorMessage.includes( 'woocommerce-error' ) ) {
 			messageWrapper = errorMessage;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/readme.txt b/readme.txt

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { renderHook, act } from '@testing-library/react-hooks';`
	`1`	`+import { renderHook, act } from '@testing-library/react';`
`2`	`2`	`import { useAccountKeys, useAccountKeysPublishableKey } from '../hooks';`
`3`	`3`	`import { STORE_NAME } from '../../constants';`
`4`	`4`	`import { useSelect, useDispatch } from '@wordpress/data';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { renderHook } from '@testing-library/react-hooks';`
	`1`	`+import { renderHook } from '@testing-library/react';`
`2`	`2`	`import { useGetCapabilities, useAccount } from '../hooks';`
`3`	`3`	`import { useSelect, useDispatch } from '@wordpress/data';`
`4`	`4`