Upgrading node to v20 (#4670)

* Upgrading node to v20

* Changelog and readme entries

* Removing unnecessary package

* Revert unnecessary changes

* Adding packages to fix tests

* Putting the live reload package back

* Revert unnecessary change

* Updating Node version in .nvmrc

* Changing Node version to 20.11.1 to match dependency-extraction-webpack-plugin min supported version

* Upgrading node version to match cheerio requirement

* Reverting unrelated changes

* Fix indentation

Author: wjrosa

.npmrc

@@ -1,2 +1,5 @@
-legacy-peer-deps=true
-engine-strict=true
+save-exact = true
+engine-strict = true
+legacy-peer-deps = true
+prefer-dedupe = true
+lockfile-version = 3

.nvmrc

@@ -1 +1 @@
-16.18.0
+v20.18.1

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.10.0 - xxxx-xx-xx =
+* Dev - Upgrades Node to v20
 * Add - Allow the purchase of free trials using the Express Payment methods when the product does not require shipping
 * Update - Changes the documentation page URL for the Optimized Checkout feature to https://woocommerce.com/document/stripe/admin-experience/optimized-checkout-suite/
 * Update - Changes the background color and spacing for the Woo logo shown in the account modal

client/stripe-utils/__tests__/cash-app-limit-notice-handler.test.js

@@ -7,57 +7,54 @@ const wrapperElementClassName = 'woocommerce-checkout-payment';
 
 jest.mock( 'wcstripe/blocks/upe/call-when-element-is-available' );
 
-const elementLoadingDelay = 500;
-
 callWhenElementIsAvailable.mockImplementation(
 	( selector, callable, params ) => {
-		setTimeout( () => {
-			callable( ...params );
-		}, elementLoadingDelay );
+		callable( ...params );
 	}
 );
 
-jest.useFakeTimers();
-
 describe( 'cash-app-limit-notice-handler', () => {
 	it( 'does not render notice, cart amount is below threshold, wrapper not found and it is not a block checkout', () => {
 		maybeShowCashAppLimitNotice(
 			'.woocommerce-checkout-payment',
 			0,
 			false
 		);
+
 		expect(
 			screen.queryByTestId( 'cash-app-limit-notice' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( 'does not render notice, cart amount is below threshold, but try to wait for wrapper to exist (block checkout)', () => {
 		render( <div data-block-name="woocommerce/checkout" /> );
+
 		maybeShowCashAppLimitNotice( '.woocommerce-checkout-payment', 0, true );
+
 		expect(
 			screen.queryByTestId( 'cash-app-limit-notice' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( 'render notice immediately (not block checkout, cart amount above threshold)', () => {
 		render( <div className={ wrapperElementClassName } /> );
+
 		maybeShowCashAppLimitNotice(
 			'.woocommerce-checkout-payment',
 			CASH_APP_NOTICE_AMOUNT_THRESHOLD + 1,
 			false
 		);
+
 		expect(
 			screen.queryByTestId( 'cash-app-limit-notice' )
 		).toBeInTheDocument();
 	} );
 
-	it( 'render notice after wrapper exists on block checkout (cart amount above threshold)', () => {
+	it( 'render notice after wrapper exists on block checkout (cart amount above threshold)', async () => {
 		function App() {
-			setTimeout( () => {
-				const wrapper = document.createElement( 'div' );
-				wrapper.classList.add( wrapperElementClassName );
-				document.body.appendChild( wrapper );
-			}, elementLoadingDelay - 100 );
+			const wrapper = document.createElement( 'div' );
+			wrapper.classList.add( wrapperElementClassName );
+			document.body.appendChild( wrapper );
 			return <div data-block-name="woocommerce/checkout" />;
 		}
 
@@ -69,8 +66,6 @@ describe( 'cash-app-limit-notice-handler', () => {
 			true
 		);
 
-		jest.runAllTimers();
-
 		expect(
 			screen.queryByTestId( 'cash-app-limit-notice' )
 		).toBeInTheDocument();