Automattic · danielmx-dev · Jul 23, 2024 · Jul 17, 2024 · Jul 17, 2024 · Jul 17, 2024
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16.17
+v20
diff --git a/.puppeteerrc.cjs b/.puppeteerrc.cjs
@@ -0,0 +1,9 @@
+const {join} = require('path');
+
+/**
+ * @type {import("puppeteer").Configuration}
+ */
+module.exports = {
+  // Changes the cache location for Puppeteer.
+  cacheDirectory: join(__dirname, 'node_modules', '.cache', 'puppeteer'),
+};
diff --git a/changelog/dev-upgrade-support-to-node-20 b/changelog/dev-upgrade-support-to-node-20
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Update node to v20
diff --git a/...ditional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js b/...ditional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js
@@ -270,10 +270,13 @@ describe( 'AddPaymentMethodsTask', () => {
 
 		userEvent.click( screen.getByText( 'Continue' ) );
 
+		await jest.runAllTimersAsync();
+
 		expect( updateEnabledPaymentMethodsMock ).toHaveBeenCalledWith( [
 			'card',
 			'p24',
 		] );
+
 		await waitFor( () =>
 			expect( setCompletedMock ).toHaveBeenCalledWith(
 				{ initialMethods: [ 'card' ] },
@@ -335,6 +338,8 @@ describe( 'AddPaymentMethodsTask', () => {
 
 		userEvent.click( screen.getByText( 'Continue' ) );
 
+		await jest.runAllTimersAsync();
+
 		// Methods are removed.
 		expect( updateEnabledPaymentMethodsMock ).toHaveBeenCalledWith( [
 			'card',

diff --git a/client/components/banner-notice/tests/index.test.tsx b/client/components/banner-notice/tests/index.test.tsx
@@ -4,7 +4,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import user from '@testing-library/user-event';
-import { mocked } from 'ts-jest/utils';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -16,7 +15,7 @@ jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
 
 describe( 'BannerNotice', () => {
 	beforeEach( () => {
-		mocked( speak ).mockClear();
+		jest.mocked( speak ).mockClear();
 	} );
 
 	it( 'should match snapshot', () => {

diff --git a/client/components/loadable-checkbox/test/__snapshots__/index.test.js.snap b/client/components/loadable-checkbox/test/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loadable checkbox renders correctly 1`] = `
-Object {
+{
   "asFragment": [Function],
   "baseElement": <body>
     <p

diff --git a/client/components/loadable-checkbox/test/index.test.js b/client/components/loadable-checkbox/test/index.test.js
@@ -100,13 +100,13 @@ describe( 'Loadable checkbox', () => {
 		jest.useFakeTimers();
 		act( () => {
 			userEvent.click( container.queryByLabelText( 'Foo' ) );
-			jest.runTimersToTime( 400 );
+			jest.advanceTimersByTime( 400 );
 		} );
 		container.rerender( getLoadableCheckbox( false, 1500, 0 ) );
 		expect( mockOnChangeEvent ).not.toHaveBeenCalled();
 
 		act( () => {
-			jest.runTimersToTime( 1200 );
+			jest.advanceTimersByTime( 1200 );
 		} );
 		container.rerender( getLoadableCheckbox( false, 1500, 0 ) );
 		expect( mockOnChangeEvent ).toHaveBeenCalled();
@@ -122,12 +122,12 @@ describe( 'Loadable checkbox', () => {
 		jest.useFakeTimers();
 		act( () => {
 			userEvent.click( container.queryByLabelText( 'Foo' ) );
-			jest.runTimersToTime( 400 );
+			jest.advanceTimersByTime( 400 );
 		} );
 		container.rerender( getLoadableCheckbox( false, 0, 1500 ) );
 		expect( mockOnChangeEvent ).not.toHaveBeenCalled();
 		act( () => {
-			jest.runTimersToTime( 1200 );
+			jest.advanceTimersByTime( 1200 );
 		} );
 		container.rerender( getLoadableCheckbox( false, 0, 1500 ) );
 		expect( mockOnChangeEvent ).toHaveBeenCalledWith( false );

diff --git a/client/components/tooltip/test/index.test.tsx b/client/components/tooltip/test/index.test.tsx
@@ -193,6 +193,9 @@ describe( 'ClickTooltip', () => {
 
 		act( () => {
 			userEvent.click( screen.getByText( 'Trigger element' ) );
+		} );
+
+		act( () => {
 			jest.runAllTimers();
 		} );
 

diff --git a/client/connect-account-page/test/index.test.tsx b/client/connect-account-page/test/index.test.tsx
@@ -6,7 +6,6 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import apiFetch from '@wordpress/api-fetch';
-import { mocked } from 'ts-jest/utils';
 
 /**
  * Internal dependencies
@@ -103,7 +102,7 @@ describe( 'ConnectAccountPage', () => {
 		render( <ConnectAccountPage /> );
 
 		// mockApiFetch.mockRejectedValueOnce( {} );
-		mocked( apiFetch ).mockRejectedValueOnce( new Error() );
+		jest.mocked( apiFetch ).mockRejectedValueOnce( new Error() );
 
 		userEvent.click(
 			screen.getByRole( 'button', { name: 'Verify business details' } )

diff --git a/client/deposits/filters/test/index.js b/client/deposits/filters/test/index.js
@@ -15,10 +15,18 @@ import { DepositsFilters } from '../';
 // TODO: this is a bit of a hack as we're mocking an old version of WC, we should relook at this.
 jest.mock( '@woocommerce/settings', () => ( {
 	...jest.requireActual( '@woocommerce/settings' ),
-	getSetting: jest.fn( ( key ) => ( key === 'wcVersion' ? 7.7 : '' ) ),
+	getSetting: jest.fn( ( key ) => ( key === 'wcVersion' ? 7.8 : '' ) ),
 } ) );
 
 describe( 'Deposits filters', () => {
+	beforeAll( () => {
+		jest.useFakeTimers();
+	} );
+
+	afterAll( () => {
+		jest.useRealTimers();
+	} );
+
 	beforeEach( () => {
 		// the query string is preserved across tests, so we need to reset it
 		updateQueryString( {}, '/', {} );

diff --git a/client/deposits/list/test/__snapshots__/index.tsx.snap b/client/deposits/list/test/__snapshots__/index.tsx.snap
@@ -161,7 +161,6 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
           data-wp-component="CardBody"
         >
           <div
-            aria-hidden="false"
             aria-labelledby="caption-1"
             class="woocommerce-table__table"
             role="group"
@@ -535,13 +534,13 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
       </div>
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
@@ -711,7 +710,6 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
           data-wp-component="CardBody"
         >
           <div
-            aria-hidden="false"
             aria-labelledby="caption-0"
             class="woocommerce-table__table"
             role="group"
@@ -1071,13 +1069,13 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
       </div>
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />

diff --git a/client/deposits/list/test/index.tsx b/client/deposits/list/test/index.tsx
@@ -86,6 +86,7 @@ jest.mock( '@wordpress/data', () => ( {
 	dispatch: jest.fn( () => ( {
 		setIsMatching: jest.fn(),
 		onLoad: jest.fn(),
+		onHistoryChange: jest.fn(),
 	} ) ),
 	registerStore: jest.fn(),
 	select: jest.fn(),

diff --git a/client/disputes/filters/test/index.tsx b/client/disputes/filters/test/index.tsx
@@ -17,7 +17,7 @@ import { formatCurrencyName } from '../../../utils/currency';
 // TODO: this is a bit of a hack as we're mocking an old version of WC, we should relook at this.
 jest.mock( '@woocommerce/settings', () => ( {
 	...jest.requireActual( '@woocommerce/settings' ),
-	getSetting: jest.fn( ( key ) => ( key === 'wcVersion' ? 7.7 : '' ) ),
+	getSetting: jest.fn( ( key ) => ( key === 'wcVersion' ? 7.8 : '' ) ),
 } ) );
 
 function addAdvancedFilter( filter: string ) {

diff --git a/client/disputes/test/__snapshots__/index.tsx.snap b/client/disputes/test/__snapshots__/index.tsx.snap
@@ -133,7 +133,6 @@ exports[`Disputes list renders correctly 1`] = `
           data-wp-component="CardBody"
         >
           <div
-            aria-hidden="false"
             aria-labelledby="caption-0"
             class="woocommerce-table__table"
             role="group"
@@ -761,13 +760,13 @@ exports[`Disputes list renders correctly 1`] = `
       </div>
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />

diff --git a/client/documents/filters/test/index.tsx b/client/documents/filters/test/index.tsx
@@ -16,7 +16,7 @@ import { DocumentsFilters } from '../';
 // TODO: this is a bit of a hack as we're mocking an old version of WC, we should relook at this.
 jest.mock( '@woocommerce/settings', () => ( {
 	...jest.requireActual( '@woocommerce/settings' ),
-	getSetting: jest.fn( ( key ) => ( key === 'wcVersion' ? 7.7 : '' ) ),
+	getSetting: jest.fn( ( key ) => ( key === 'wcVersion' ? 7.8 : '' ) ),
 } ) );
 
 function addAdvancedFilter( filter: string ) {
@@ -49,6 +49,14 @@ describe( 'Documents filters', () => {
 	describe( 'when filtering by date', () => {
 		let ruleSelector: HTMLElement;
 
+		beforeAll( () => {
+			jest.useFakeTimers();
+		} );
+
+		afterAll( () => {
+			jest.useRealTimers();
+		} );
+
 		beforeEach( () => {
 			addAdvancedFilter( 'Date' );
 			ruleSelector = screen.getByRole( 'combobox', {

diff --git a/client/documents/list/test/__snapshots__/index.tsx.snap b/client/documents/list/test/__snapshots__/index.tsx.snap
@@ -109,7 +109,6 @@ exports[`Documents list renders correctly 1`] = `
           data-wp-component="CardBody"
         >
           <div
-            aria-hidden="false"
             aria-labelledby="caption-0"
             class="woocommerce-table__table"
             role="group"
@@ -299,13 +298,13 @@ exports[`Documents list renders correctly 1`] = `
       </div>
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
@@ -423,7 +422,6 @@ exports[`Documents list renders table summary only when the documents summary da
           data-wp-component="CardBody"
         >
           <div
-            aria-hidden="false"
             aria-labelledby="caption-7"
             class="woocommerce-table__table"
             role="group"
@@ -613,13 +611,13 @@ exports[`Documents list renders table summary only when the documents summary da
       </div>
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
-        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />

diff --git a/client/documents/list/test/index.tsx b/client/documents/list/test/index.tsx
@@ -14,7 +14,6 @@ import { getQuery, updateQueryString } from '@woocommerce/navigation';
 import { DocumentsList } from '../';
 import { useDocuments, useDocumentsSummary } from 'data/index';
 import type { Document } from 'data/documents/hooks';
-import { mocked } from 'ts-jest/utils';
 import VatForm from 'wcpay/vat/form';
 
 jest.mock( 'data/index', () => ( {
@@ -182,7 +181,7 @@ describe( 'Document download button', () => {
 				documentsError: undefined,
 			} );
 
-			mocked( VatForm ).mockImplementation( ( { onCompleted } ) => (
+			jest.mocked( VatForm ).mockImplementation( ( { onCompleted } ) => (
 				<button
 					onClick={ () =>
 						onCompleted(

diff --git a/client/multi-currency/multi-currency-settings/test/__snapshots__/index.test.js.snap b/client/multi-currency/multi-currency-settings/test/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Multi-Currency Settings page renders correctly: snapshot-multi-currency-setup-wizard 1`] = `
-Object {
+{
   "asFragment": [Function],
   "baseElement": <body>
     <p

diff --git a/client/multi-currency/single-currency-settings/test/__snapshots__/index.test.js.snap b/client/multi-currency/single-currency-settings/test/__snapshots__/index.test.js.snap
@@ -261,7 +261,7 @@ exports[`Single currency settings screen Page renders correctly 1`] = `
                     </h4>
                     <div>
                       <div
-                        class="components-base-control with-value css-wdf2ti-Wrapper ej5x27r4"
+                        class="components-base-control with-value css-ij2po-Wrapper-boxSizingReset ej5x27r4"
                       >
                         <div
                           class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"

diff --git a/client/onboarding/steps/test/business-details.tsx b/client/onboarding/steps/test/business-details.tsx
@@ -4,7 +4,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import user from '@testing-library/user-event';
-import { mocked } from 'ts-jest/utils';
 
 /**
  * Internal dependencies
@@ -41,7 +40,7 @@ const countries = [
 	},
 ];
 
-mocked( getAvailableCountries ).mockReturnValue( countries );
+jest.mocked( getAvailableCountries ).mockReturnValue( countries );
 
 const businessTypes = [
 	{
@@ -97,7 +96,7 @@ const businessTypes = [
 	},
 ];
 
-mocked( getBusinessTypes ).mockReturnValue( businessTypes );
+jest.mocked( getBusinessTypes ).mockReturnValue( businessTypes );
 
 const mccsFlatList = [
 	{
@@ -168,7 +167,7 @@ const mccsFlatList = [
 	},
 ];
 
-mocked( getMccsFlatList ).mockReturnValue( mccsFlatList );
+jest.mocked( getMccsFlatList ).mockReturnValue( mccsFlatList );
 
 describe( 'BusinessDetails', () => {
 	it( 'renders and updates fields data when they are changed', async () => {
-Original file line number
+Diff line change
@@ Expand Up @@
                         </h4>
                         <div>
                           <div
-                            class="components-base-control with-value css-wdf2ti-Wrapper ej5x27r4"
+                            class="components-base-control with-value css-ij2po-Wrapper-boxSizingReset ej5x27r4"
                           >
                             <div
                               class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
@@ Expand Down @@