Fix frontend unit tests for Node 20

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.9.0 - xxxx-xx-xx =
+* Dev - Update Javascript unit tests for compatibility with Node 20
 * Dev - Replaces some payment method instantiation logic for the Optimized Checkout with calls to the `get_payment_method_instance` method
 * Dev - Multiple lint fixes in preparation for the Node 20 upgrade
 * Dev - Introduces a new helper method to identify Stripe orders

client/components/popover/test/index.test.js

@@ -22,7 +22,7 @@ describe( 'Popover', () => {
 		).not.toBeInTheDocument();
 	} );
 
-	it( 'toggle the visibility on click', () => {
+	it( 'toggle the visibility on click', async () => {
 		render(
 			<Popover
 				BaseComponent={ DummyBaseComponent }
@@ -34,14 +34,14 @@ describe( 'Popover', () => {
 			screen.queryByText( 'Popover Content' )
 		).not.toBeInTheDocument();
 
-		act( () => {
-			userEvent.click( screen.getByTestId( 'base-component' ) );
+		await act( async () => {
+			await userEvent.click( screen.getByTestId( 'base-component' ) );
 		} );
 
 		expect( screen.queryByText( 'Popover Content' ) ).toBeInTheDocument();
 
-		act( () => {
-			userEvent.click( screen.getByTestId( 'base-component' ) );
+		await act( async () => {
+			await userEvent.click( screen.getByTestId( 'base-component' ) );
 		} );
 
 		expect(

client/components/tooltip/test/index.test.js

@@ -45,7 +45,7 @@ describe( 'Tooltip', () => {
 		expect( handleHideMock ).not.toHaveBeenCalled();
 	} );
 
-	it( 'renders its content when clicked', () => {
+	it( 'renders its content when clicked', async () => {
 		const handleHideMock = jest.fn();
 		render(
 			<Tooltip content="Tooltip content" onHide={ handleHideMock }>
@@ -59,20 +59,20 @@ describe( 'Tooltip', () => {
 			screen.queryByText( 'Tooltip content' )
 		).not.toBeInTheDocument();
 
-		userEvent.click( screen.getByText( 'Trigger element' ) );
+		await userEvent.click( screen.getByText( 'Trigger element' ) );
 
 		jest.runAllTimers();
 
 		expect( screen.queryByText( 'Tooltip content' ) ).toBeInTheDocument();
 		expect( handleHideMock ).not.toHaveBeenCalled();
 
-		userEvent.click( screen.getByText( 'Trigger element' ) );
+		await userEvent.click( screen.getByText( 'Trigger element' ) );
 		jest.runAllTimers();
 
 		expect( handleHideMock ).toHaveBeenCalled();
 	} );
 
-	it( 'asks other Tooltips to hide, when multiple are opened', () => {
+	it( 'asks other Tooltips to hide, when multiple are opened', async () => {
 		const handleHide1Mock = jest.fn();
 		const handleHide2Mock = jest.fn();
 		render(
@@ -98,7 +98,9 @@ describe( 'Tooltip', () => {
 		expect( handleHide2Mock ).not.toHaveBeenCalled();
 
 		// opening the first tooltip, no need to call any hide handlers
-		act( () => userEvent.click( screen.getByText( 'Open tooltip 1' ) ) );
+		await act( async () => {
+			await userEvent.click( screen.getByText( 'Open tooltip 1' ) );
+		} );
 
 		expect( screen.queryByText( 'Tooltip 1 content' ) ).toBeInTheDocument();
 		expect(
@@ -110,8 +112,8 @@ describe( 'Tooltip', () => {
 		jest.runAllTimers();
 
 		// opening the second tooltip, only the first tooltip should not be visible anymore
-		act( () => {
-			userEvent.click( screen.getByText( 'Open tooltip 2' ) );
+		await act( async () => {
+			await userEvent.click( screen.getByText( 'Open tooltip 2' ) );
 			jest.runAllTimers();
 		} );
 

client/components/tooltip/test/tooltip-base.test.js

@@ -45,7 +45,7 @@ describe( 'TooltipBase', () => {
 		expect( handleHideMock ).not.toHaveBeenCalled();
 	} );
 
-	it( 'does not call onHide when an internal element is clicked', () => {
+	it( 'does not call onHide when an internal element is clicked', async () => {
 		const handleHideMock = jest.fn();
 		render(
 			<TooltipBase
@@ -57,14 +57,14 @@ describe( 'TooltipBase', () => {
 			</TooltipBase>
 		);
 
-		userEvent.click( screen.getByText( 'Tooltip content' ) );
+		await userEvent.click( screen.getByText( 'Tooltip content' ) );
 		jest.runAllTimers();
 
 		expect( screen.queryByText( 'Trigger element' ) ).toBeInTheDocument();
 		expect( handleHideMock ).not.toHaveBeenCalled();
 	} );
 
-	it( 'calls onHide when an external element is clicked', () => {
+	it( 'calls onHide when an external element is clicked', async () => {
 		const handleHideMock = jest.fn();
 		render(
 			<>
@@ -79,7 +79,7 @@ describe( 'TooltipBase', () => {
 			</>
 		);
 
-		userEvent.click( screen.getByText( 'External element' ) );
+		await userEvent.click( screen.getByText( 'External element' ) );
 		jest.runAllTimers();
 
 		expect( screen.queryByText( 'Trigger element' ) ).toBeInTheDocument();

client/settings/advanced-settings-section/__tests__/optimized-checkout-feature.test.js

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import OptimizedCheckoutFeature from 'wcstripe/settings/advanced-settings-section/optimized-checkout-feature';
@@ -33,7 +33,7 @@ describe( 'Optimized Checkout Element feature setting', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should disable the OC setting on click', () => {
+	it( 'should disable the OC setting on click', async () => {
 		const setIsOCEnabledMock = jest.fn();
 		useIsOCEnabled.mockReturnValue( [ true, setIsOCEnabledMock ] );
 
@@ -43,12 +43,14 @@ describe( 'Optimized Checkout Element feature setting', () => {
 			'optimized-checkout-element-checkbox'
 		);
 
-		userEvent.click( OCCheckbox );
+		await userEvent.click( OCCheckbox );
 
-		expect( setIsOCEnabledMock ).toHaveBeenCalled();
+		await waitFor( () => {
+			expect( setIsOCEnabledMock ).toHaveBeenCalled();
+		} );
 	} );
 
-	it( 'should be disabled when UPE is disabled', () => {
+	it( 'should be disabled when UPE is disabled', async () => {
 		useIsUpeEnabled.mockReturnValue( [ false, jest.fn() ] );
 
 		render( <OptimizedCheckoutFeature /> );
@@ -57,7 +59,7 @@ describe( 'Optimized Checkout Element feature setting', () => {
 			'optimized-checkout-element-checkbox'
 		);
 
-		userEvent.click( checkbox );
+		await userEvent.click( checkbox );
 
 		jest.runAllTimers();
 
@@ -79,7 +81,7 @@ describe( 'Optimized Checkout Element feature setting', () => {
 		expect( help ).toBeInTheDocument();
 	} );
 
-	it( 'triggers the hook when changing the layout setting', () => {
+	it( 'triggers the hook when changing the layout setting', async () => {
 		useIsOCEnabled.mockReturnValue( [ true, jest.fn() ] );
 
 		const setLayoutMock = jest.fn();
@@ -89,7 +91,10 @@ describe( 'Optimized Checkout Element feature setting', () => {
 
 		expect( setLayoutMock ).not.toHaveBeenCalled();
 
-		userEvent.click( screen.getByLabelText( 'Tabs' ) );
-		expect( setLayoutMock ).toHaveBeenCalledWith( 'tabs' );
+		await userEvent.click( screen.getByLabelText( 'Tabs' ) );
+
+		await waitFor( async () => {
+			expect( setLayoutMock ).toHaveBeenCalledWith( 'tabs' );
+		} );
 	} );
 } );

client/settings/general-settings-section/__tests__/general-settings-section.test.js

@@ -47,6 +47,7 @@ jest.mock( '@woocommerce/settings', () => ( {
 } ) );
 jest.mock( '@wordpress/data', () => ( {
 	useDispatch: jest.fn().mockReturnValue( {} ),
+	createSelector: jest.fn(),
 	createReduxStore: jest.fn(),
 	register: jest.fn(),
 	combineReducers: jest.fn(),
@@ -110,7 +111,7 @@ describe( 'GeneralSettingsSection', () => {
 		global.wcSettings = globalValues;
 	} );
 
-	it( 'should show information to screen readers about the payment methods being updated', () => {
+	it( 'should show information to screen readers about the payment methods being updated', async () => {
 		const refreshAccountMock = jest.fn();
 		useAccount.mockReturnValue( {
 			isRefreshing: true,
@@ -131,15 +132,15 @@ describe( 'GeneralSettingsSection', () => {
 			)
 		).toBeInTheDocument();
 
-		userEvent.click(
+		await userEvent.click(
 			screen.getByRole( 'button', {
 				name: 'Payment methods menu',
 			} )
 		);
 
 		expect( refreshAccountMock ).not.toHaveBeenCalled();
 
-		userEvent.click(
+		await userEvent.click(
 			screen.getByRole( 'menuitem', {
 				name: 'Refresh payment methods',
 			} )
@@ -164,7 +165,7 @@ describe( 'GeneralSettingsSection', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should allow to enable a payment method when UPE is enabled', () => {
+	it( 'should allow to enable a payment method when UPE is enabled', async () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [
 			PAYMENT_METHOD_CARD,
 			PAYMENT_METHOD_ALIPAY,
@@ -198,15 +199,15 @@ describe( 'GeneralSettingsSection', () => {
 		expect( updateEnabledMethodsMock ).not.toHaveBeenCalled();
 		expect( alipayCheckbox ).not.toBeChecked();
 
-		userEvent.click( alipayCheckbox );
+		await userEvent.click( alipayCheckbox );
 
 		expect( updateEnabledMethodsMock ).toHaveBeenCalledWith( [
 			PAYMENT_METHOD_CARD,
 			PAYMENT_METHOD_ALIPAY,
 		] );
 	} );
 
-	it( 'should allow to enable a payment method when UPE is disabled', () => {
+	it( 'should allow to enable a payment method when UPE is disabled', async () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [
 			PAYMENT_METHOD_CARD,
 			PAYMENT_METHOD_ALIPAY,
@@ -240,15 +241,15 @@ describe( 'GeneralSettingsSection', () => {
 		expect( updateEnabledMethodsMock ).not.toHaveBeenCalled();
 		expect( alipayCheckbox ).not.toBeChecked();
 
-		userEvent.click( alipayCheckbox );
+		await userEvent.click( alipayCheckbox );
 
 		expect( updateEnabledMethodsMock ).toHaveBeenCalledWith( [
 			PAYMENT_METHOD_CARD,
 			PAYMENT_METHOD_ALIPAY,
 		] );
 	} );
 
-	it( 'should show modal to disable a payment method', () => {
+	it( 'should show modal to disable a payment method', async () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [
 			PAYMENT_METHOD_CARD,
 			PAYMENT_METHOD_ALIPAY,
@@ -277,7 +278,7 @@ describe( 'GeneralSettingsSection', () => {
 			} )
 		).not.toBeInTheDocument();
 
-		userEvent.click( cardCheckbox );
+		await userEvent.click( cardCheckbox );
 
 		expect(
 			screen.getByRole( 'heading', {
@@ -286,7 +287,7 @@ describe( 'GeneralSettingsSection', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should not allow to disable a payment method when canceled via modal', () => {
+	it( 'should not allow to disable a payment method when canceled via modal', async () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [
 			PAYMENT_METHOD_CARD,
 			PAYMENT_METHOD_ALIPAY,
@@ -311,13 +312,15 @@ describe( 'GeneralSettingsSection', () => {
 		expect( updateEnabledMethodsMock ).not.toHaveBeenCalled();
 		expect( cardCheckbox ).toBeChecked();
 
-		userEvent.click( cardCheckbox );
-		userEvent.click( screen.getByRole( 'button', { name: 'Cancel' } ) );
+		await userEvent.click( cardCheckbox );
+		await userEvent.click(
+			screen.getByRole( 'button', { name: 'Cancel' } )
+		);
 
 		expect( updateEnabledMethodsMock ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should allow to disable a payment method when confirmed via modal', () => {
+	it( 'should allow to disable a payment method when confirmed via modal', async () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [
 			PAYMENT_METHOD_CARD,
 			PAYMENT_METHOD_ALIPAY,
@@ -342,8 +345,10 @@ describe( 'GeneralSettingsSection', () => {
 		expect( updateEnabledMethodsMock ).not.toHaveBeenCalled();
 		expect( cardCheckbox ).toBeChecked();
 
-		userEvent.click( cardCheckbox );
-		userEvent.click( screen.getByRole( 'button', { name: 'Remove' } ) );
+		await userEvent.click( cardCheckbox );
+		await userEvent.click(
+			screen.getByRole( 'button', { name: 'Remove' } )
+		);
 
 		expect( updateEnabledMethodsMock ).toHaveBeenCalled();
 	} );

client/settings/notices/legacy-experience-transition/__tests__/legacy-experience-transition.test.js

@@ -51,7 +51,7 @@ describe( 'LegacyExperienceTransitionNotice', () => {
 		).not.toBeInTheDocument();
 	} );
 
-	it( 'should enable UPE when clicking on the CTA button', () => {
+	it( 'should enable UPE when clicking on the CTA button', async () => {
 		const setIsUpeEnabledMock = jest.fn().mockResolvedValue( true );
 
 		render(
@@ -61,34 +61,40 @@ describe( 'LegacyExperienceTransitionNotice', () => {
 			/>
 		);
 
-		userEvent.click( screen.queryByTestId( 'disable-legacy-button' ) );
+		await userEvent.click(
+			screen.queryByTestId( 'disable-legacy-button' )
+		);
 		expect( setIsUpeEnabledMock ).toHaveBeenCalled();
 	} );
 
-	it( 'should display a success message when clicking on the CTA button', () => {
+	it( 'should display a success message when clicking on the CTA button', async () => {
 		render(
 			<LegacyExperienceTransitionNotice
 				isUpeEnabled={ false }
 				setIsUpeEnabled={ jest.fn() }
 			/>
 		);
 
-		userEvent.click( screen.queryByTestId( 'disable-legacy-button' ) );
+		await userEvent.click(
+			screen.queryByTestId( 'disable-legacy-button' )
+		);
 
 		expect( noticesDispatch.createSuccessNotice ).toHaveBeenCalledWith(
 			'New checkout experience enabled'
 		);
 	} );
 
-	it( 'should record a Track event when clicking on the CTA button', () => {
+	it( 'should record a Track event when clicking on the CTA button', async () => {
 		render(
 			<LegacyExperienceTransitionNotice
 				isUpeEnabled={ false }
 				setIsUpeEnabled={ jest.fn() }
 			/>
 		);
 
-		userEvent.click( screen.queryByTestId( 'disable-legacy-button' ) );
+		await userEvent.click(
+			screen.queryByTestId( 'disable-legacy-button' )
+		);
 
 		expect( recordEvent ).toHaveBeenCalledWith(
 			'wcstripe_legacy_experience_disabled',