diff --git a/client/components/backup-storage-space/test/hooks.js b/client/components/backup-storage-space/test/hooks.js
index 6464177a544804..df06417729a766 100644
--- a/client/components/backup-storage-space/test/hooks.js
+++ b/client/components/backup-storage-space/test/hooks.js
@@ -16,8 +16,7 @@ jest.mock( 'calypso/state/ui/selectors/get-selected-site-slug', () =>
jest.mock( 'calypso/lib/jetpack/is-jetpack-cloud' );
jest.mock( 'calypso/state/analytics/actions/record' );
-import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, renderHook } from '@testing-library/react';
import {
useDaysOfBackupsSavedText,
useStorageUsageText,
diff --git a/client/data/newsletter-categories/test/use-mark-as-newsletter-category-mutation.test.tsx b/client/data/newsletter-categories/test/use-mark-as-newsletter-category-mutation.test.tsx
index ed0fc9d230de58..fb40feaeef2940 100644
--- a/client/data/newsletter-categories/test/use-mark-as-newsletter-category-mutation.test.tsx
+++ b/client/data/newsletter-categories/test/use-mark-as-newsletter-category-mutation.test.tsx
@@ -1,5 +1,8 @@
+/**
+ * @jest-environment jsdom
+ */
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook, act } from '@testing-library/react-hooks';
+import { act, renderHook, waitFor } from '@testing-library/react';
import React from 'react';
import request from 'wpcom-proxy-request';
import { NewsletterCategories } from '../types';
@@ -38,7 +41,7 @@ describe( 'useMarkAsNewsletterCategoryMutation', () => {
success: true,
} );
- const { result, waitFor } = renderHook( () => useMarkAsNewsletterCategoryMutation( siteId ), {
+ const { result } = renderHook( () => useMarkAsNewsletterCategoryMutation( siteId ), {
wrapper,
} );
@@ -74,7 +77,7 @@ describe( 'useMarkAsNewsletterCategoryMutation', () => {
} );
it( 'should throw an error when ID is missing', async () => {
- const { result, waitFor } = renderHook( () => useMarkAsNewsletterCategoryMutation( siteId ), {
+ const { result } = renderHook( () => useMarkAsNewsletterCategoryMutation( siteId ), {
wrapper,
} );
@@ -94,7 +97,7 @@ describe( 'useMarkAsNewsletterCategoryMutation', () => {
it( 'should throw an error when API response is unsuccessful', async () => {
( request as jest.Mock ).mockResolvedValue( { success: false } );
- const { result, waitFor } = renderHook( () => useMarkAsNewsletterCategoryMutation( siteId ), {
+ const { result } = renderHook( () => useMarkAsNewsletterCategoryMutation( siteId ), {
wrapper,
} );
diff --git a/client/data/newsletter-categories/test/use-unmark-as-newsletter-category-mutation.test.tsx b/client/data/newsletter-categories/test/use-unmark-as-newsletter-category-mutation.test.tsx
index fc7572ace1c1a0..6a83a32bb67b94 100644
--- a/client/data/newsletter-categories/test/use-unmark-as-newsletter-category-mutation.test.tsx
+++ b/client/data/newsletter-categories/test/use-unmark-as-newsletter-category-mutation.test.tsx
@@ -1,5 +1,8 @@
+/**
+ * @jest-environment jsdom
+ */
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook, act } from '@testing-library/react-hooks';
+import { act, renderHook, waitFor } from '@testing-library/react';
import React from 'react';
import request from 'wpcom-proxy-request';
import { NewsletterCategories } from '../types';
@@ -38,7 +41,7 @@ describe( 'useUnmarkAsNewsletterCategoryMutation', () => {
success: true,
} );
- const { result, waitFor } = renderHook( () => useUnmarkAsNewsletterCategoryMutation( siteId ), {
+ const { result } = renderHook( () => useUnmarkAsNewsletterCategoryMutation( siteId ), {
wrapper,
} );
@@ -74,7 +77,7 @@ describe( 'useUnmarkAsNewsletterCategoryMutation', () => {
} );
it( 'should throw an error when ID is missing', async () => {
- const { result, waitFor } = renderHook( () => useUnmarkAsNewsletterCategoryMutation( siteId ), {
+ const { result } = renderHook( () => useUnmarkAsNewsletterCategoryMutation( siteId ), {
wrapper,
} );
@@ -94,7 +97,7 @@ describe( 'useUnmarkAsNewsletterCategoryMutation', () => {
it( 'should throw an error when API response is unsuccessful', async () => {
( request as jest.Mock ).mockResolvedValue( { success: false } );
- const { result, waitFor } = renderHook( () => useUnmarkAsNewsletterCategoryMutation( siteId ), {
+ const { result } = renderHook( () => useUnmarkAsNewsletterCategoryMutation( siteId ), {
wrapper,
} );
diff --git a/client/landing/stepper/hooks/test/use-countries.jsx b/client/landing/stepper/hooks/test/use-countries.jsx
index c32ca693950f44..a3d88d71a57dd0 100644
--- a/client/landing/stepper/hooks/test/use-countries.jsx
+++ b/client/landing/stepper/hooks/test/use-countries.jsx
@@ -2,7 +2,7 @@
* @jest-environment jsdom
*/
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
import nock from 'nock';
import { useCountries } from '../use-countries';
@@ -24,11 +24,11 @@ describe( 'use-countries hook', () => {
.get( '/wpcom/v2/woocommerce/countries/regions/' )
.reply( 200, expected );
- const { result, waitFor } = renderHook( () => useCountries(), {
+ const { result } = renderHook( () => useCountries(), {
wrapper,
} );
- await waitFor( () => result.current.isSuccess );
+ await waitFor( () => expect( result.current.isSuccess ).toBe( true ) );
expect( result.current.data ).toEqual( expected );
} );
diff --git a/client/landing/stepper/hooks/test/use-send-email-verification.jsx b/client/landing/stepper/hooks/test/use-send-email-verification.jsx
index 773d57755c2630..b7cf9dabe120c3 100644
--- a/client/landing/stepper/hooks/test/use-send-email-verification.jsx
+++ b/client/landing/stepper/hooks/test/use-send-email-verification.jsx
@@ -2,7 +2,7 @@
* @jest-environment jsdom
*/
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import nock from 'nock';
import { useSendEmailVerification } from '../use-send-email-verification';
diff --git a/client/landing/stepper/hooks/test/use-site-id-param.ts b/client/landing/stepper/hooks/test/use-site-id-param.ts
index 8e324ff0ae79fa..ae4b826ad20786 100644
--- a/client/landing/stepper/hooks/test/use-site-id-param.ts
+++ b/client/landing/stepper/hooks/test/use-site-id-param.ts
@@ -1,7 +1,7 @@
/**
* @jest-environment jsdom
*/
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import { useSiteIdParam } from '../use-site-id-param';
jest.mock( 'react-router-dom', () => ( {
diff --git a/client/my-sites/backup/backup-contents-page/file-browser/test/hooks.ts b/client/my-sites/backup/backup-contents-page/file-browser/test/hooks.ts
index e36caa5171a4f3..0398102e45b931 100644
--- a/client/my-sites/backup/backup-contents-page/file-browser/test/hooks.ts
+++ b/client/my-sites/backup/backup-contents-page/file-browser/test/hooks.ts
@@ -2,7 +2,7 @@
* @jest-environment jsdom
*/
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import { getFileExtension } from 'calypso/lib/media/utils/get-file-extension';
import { useTruncatedFileName } from '../hooks';
diff --git a/client/my-sites/email/form/mailboxes/components/test/field.tsx b/client/my-sites/email/form/mailboxes/components/test/field.tsx
index 1d32452d8baa78..1baeb2359c796d 100644
--- a/client/my-sites/email/form/mailboxes/components/test/field.tsx
+++ b/client/my-sites/email/form/mailboxes/components/test/field.tsx
@@ -1,8 +1,7 @@
/**
* @jest-environment jsdom
*/
-import { fireEvent, render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { fireEvent, render, renderHook, screen } from '@testing-library/react';
import { MailboxForm } from 'calypso/my-sites/email/form/mailboxes';
import { MailboxField } from 'calypso/my-sites/email/form/mailboxes/components/mailbox-field';
import { useGetDefaultFieldLabelText } from 'calypso/my-sites/email/form/mailboxes/components/use-get-default-field-label-text';
diff --git a/client/my-sites/email/form/mailboxes/components/test/form.tsx b/client/my-sites/email/form/mailboxes/components/test/form.tsx
index 52e3743d2c5f9e..00d2135b38c89c 100644
--- a/client/my-sites/email/form/mailboxes/components/test/form.tsx
+++ b/client/my-sites/email/form/mailboxes/components/test/form.tsx
@@ -1,8 +1,7 @@
/**
* @jest-environment jsdom
*/
-import { fireEvent, render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { fireEvent, render, renderHook, screen } from '@testing-library/react';
import { MailboxForm } from 'calypso/my-sites/email/form/mailboxes';
import { MailboxFormWrapper } from 'calypso/my-sites/email/form/mailboxes/components/mailbox-form-wrapper';
import { useGetDefaultFieldLabelText } from 'calypso/my-sites/email/form/mailboxes/components/use-get-default-field-label-text';
diff --git a/client/my-sites/email/form/mailboxes/components/test/list.tsx b/client/my-sites/email/form/mailboxes/components/test/list.tsx
index 264828a2eaea58..dff4766564a226 100644
--- a/client/my-sites/email/form/mailboxes/components/test/list.tsx
+++ b/client/my-sites/email/form/mailboxes/components/test/list.tsx
@@ -2,8 +2,7 @@
* @jest-environment jsdom
*/
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { fireEvent, render, renderHook, screen } from '@testing-library/react';
import nock from 'nock';
import { ReactElement } from 'react';
import { Provider } from 'react-redux';
diff --git a/client/my-sites/plan-features-2023-grid/hooks/test/use-plan-upgrade-credits-display.tsx b/client/my-sites/plan-features-2023-grid/hooks/test/use-plan-upgrade-credits-display.tsx
index b9d72b8113a351..5ecbcf79681d49 100644
--- a/client/my-sites/plan-features-2023-grid/hooks/test/use-plan-upgrade-credits-display.tsx
+++ b/client/my-sites/plan-features-2023-grid/hooks/test/use-plan-upgrade-credits-display.tsx
@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
import {
PLAN_ENTERPRISE_GRID_WPCOM,
PLAN_BUSINESS,
diff --git a/client/my-sites/plan-features-2023-grid/hooks/test/use-plan-upgrade-credits.tsx b/client/my-sites/plan-features-2023-grid/hooks/test/use-plan-upgrade-credits.tsx
index 15153c78b05d86..d8acfcb6fcf6d9 100644
--- a/client/my-sites/plan-features-2023-grid/hooks/test/use-plan-upgrade-credits.tsx
+++ b/client/my-sites/plan-features-2023-grid/hooks/test/use-plan-upgrade-credits.tsx
@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
import {
PLAN_BUSINESS,
PLAN_PREMIUM,
diff --git a/client/my-sites/plans/jetpack-plans/jetpack-free-card/test/use-jetpack-free-button-props.js b/client/my-sites/plans/jetpack-plans/jetpack-free-card/test/use-jetpack-free-button-props.js
index a0c390ab83a68f..7ec9d2efaab906 100644
--- a/client/my-sites/plans/jetpack-plans/jetpack-free-card/test/use-jetpack-free-button-props.js
+++ b/client/my-sites/plans/jetpack-plans/jetpack-free-card/test/use-jetpack-free-button-props.js
@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
jest.mock( 'react-redux', () => ( {
...jest.requireActual( 'react-redux' ),
useDispatch: jest.fn(),
@@ -16,7 +19,7 @@ jest.mock( 'calypso/state/ui/selectors', () => ( {
} ) );
import { PLAN_JETPACK_FREE } from '@automattic/calypso-products';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import { JPC_PATH_BASE } from 'calypso/jetpack-connect/constants';
import { storePlan } from 'calypso/jetpack-connect/persistence-utils';
import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud';
diff --git a/client/my-sites/plugins/hooks/test/use-get-dialog-text.ts b/client/my-sites/plugins/hooks/test/use-get-dialog-text.ts
index a57918eec39177..f0b4166e24eca5 100644
--- a/client/my-sites/plugins/hooks/test/use-get-dialog-text.ts
+++ b/client/my-sites/plugins/hooks/test/use-get-dialog-text.ts
@@ -1,4 +1,7 @@
-import { renderHook } from '@testing-library/react-hooks';
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from '@testing-library/react';
import { PluginActions } from '../types';
import useGetDialogText from '../use-get-dialog-text';
import type { Site, Plugin } from '../types';
diff --git a/client/my-sites/plugins/hooks/test/use-show-plugin-action-dialog.jsx b/client/my-sites/plugins/hooks/test/use-show-plugin-action-dialog.jsx
index 4aea7cd7013054..f54a348606e5fe 100644
--- a/client/my-sites/plugins/hooks/test/use-show-plugin-action-dialog.jsx
+++ b/client/my-sites/plugins/hooks/test/use-show-plugin-action-dialog.jsx
@@ -1,9 +1,7 @@
/**
* @jest-environment jsdom
*/
-
-import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, renderHook } from '@testing-library/react';
import { PluginActions } from '../types';
import useShowPluginActionDialog from '../use-show-plugin-action-dialog';
diff --git a/client/my-sites/site-monitoring/test/main.js b/client/my-sites/site-monitoring/test/main.js
index 5191003a4df467..103d0da12f7c4a 100644
--- a/client/my-sites/site-monitoring/test/main.js
+++ b/client/my-sites/site-monitoring/test/main.js
@@ -3,7 +3,7 @@
*/
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
diff --git a/client/my-sites/site-monitoring/test/use-site-metrics-status-codes-data.tsx b/client/my-sites/site-monitoring/test/use-site-metrics-status-codes-data.tsx
index 5d68e6e77da195..4bb52801679eeb 100644
--- a/client/my-sites/site-monitoring/test/use-site-metrics-status-codes-data.tsx
+++ b/client/my-sites/site-monitoring/test/use-site-metrics-status-codes-data.tsx
@@ -1,4 +1,7 @@
-import { renderHook } from '@testing-library/react-hooks';
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from '@testing-library/react';
import { useGroupByTime } from '../hooks/use-group-by-time';
import { PeriodData } from '../use-metrics-query';
diff --git a/client/my-sites/themes/test/use-theme-showcase-description.js b/client/my-sites/themes/test/use-theme-showcase-description.js
index 34fe77530fe2e2..5607e6286023a8 100644
--- a/client/my-sites/themes/test/use-theme-showcase-description.js
+++ b/client/my-sites/themes/test/use-theme-showcase-description.js
@@ -1,4 +1,7 @@
-import { renderHook } from '@testing-library/react-hooks';
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from '@testing-library/react';
import defaultCalypsoI18n, { I18NContext } from 'i18n-calypso';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
diff --git a/client/my-sites/themes/test/use-theme-showcase-title.js b/client/my-sites/themes/test/use-theme-showcase-title.js
index 93885fd232a68a..083ff0067b43c1 100644
--- a/client/my-sites/themes/test/use-theme-showcase-title.js
+++ b/client/my-sites/themes/test/use-theme-showcase-title.js
@@ -1,4 +1,7 @@
-import { renderHook } from '@testing-library/react-hooks';
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from '@testing-library/react';
import defaultCalypsoI18n, { I18NContext } from 'i18n-calypso';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
diff --git a/client/package.json b/client/package.json
index c832d0450adb03..7662b7a3fb4b92 100644
--- a/client/package.json
+++ b/client/package.json
@@ -220,7 +220,6 @@
"@testing-library/dom": "^8.20.1",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
- "@testing-library/react-hooks": "7.0.2",
"@testing-library/user-event": "^14.4.3",
"@types/react": "^18.2.14",
"@types/redux-mock-store": "1.0.3",
diff --git a/client/state/partner-portal/invoices/test/hooks.js b/client/state/partner-portal/invoices/test/hooks.js
index 3444fbcd887fa0..aa8c83210a3618 100644
--- a/client/state/partner-portal/invoices/test/hooks.js
+++ b/client/state/partner-portal/invoices/test/hooks.js
@@ -3,7 +3,7 @@
*/
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook, waitFor } from '@testing-library/react';
import nock from 'nock';
import { useDispatch } from 'react-redux';
import usePayInvoiceMutation from 'calypso/state/partner-portal/invoices/hooks/pay-invoice-mutation';
@@ -55,7 +55,7 @@ describe( 'useInvoicesQuery', () => {
.get( '/wpcom/v2/jetpack-licensing/partner/invoices?starting_after=&ending_before=' )
.reply( 200, stub );
- const { result, waitFor } = renderHook(
+ const { result } = renderHook(
() =>
useInvoicesQuery( {
starting_after: '',
@@ -66,7 +66,7 @@ describe( 'useInvoicesQuery', () => {
}
);
- await waitFor( () => result.current.isSuccess );
+ await waitFor( () => expect( result.current.isSuccess ).toBe( true ) );
expect( result.current.data ).toEqual( formattedStub );
} );
@@ -84,7 +84,7 @@ describe( 'useInvoicesQuery', () => {
const dispatch = jest.fn();
useDispatch.mockReturnValue( dispatch );
- const { result, waitFor } = renderHook(
+ const { result } = renderHook(
() =>
useInvoicesQuery(
{
@@ -98,9 +98,8 @@ describe( 'useInvoicesQuery', () => {
}
);
- await waitFor( () => result.current.isError );
+ await waitFor( () => expect( result.current.isError ).toBe( true ) );
- expect( result.current.isError ).toBe( true );
expect( dispatch.mock.calls[ 0 ][ 0 ].type ).toBe( 'NOTICE_CREATE' );
expect( dispatch.mock.calls[ 0 ][ 0 ].notice.noticeId ).toBe(
'partner-portal-invoices-failure'
@@ -132,7 +131,7 @@ describe( 'usePayInvoiceMutation', () => {
const dispatch = jest.fn();
useDispatch.mockReturnValue( dispatch );
- const { result, waitFor } = renderHook( () => usePayInvoiceMutation(), {
+ const { result } = renderHook( () => usePayInvoiceMutation(), {
wrapper,
} );
@@ -167,12 +166,9 @@ describe( 'usePayInvoiceMutation', () => {
useDispatch.mockReturnValue( dispatch );
// Prevent console.error from being loud during testing because of the test 500 error.
- const { result, waitFor } = renderHook(
- () => usePayInvoiceMutation( { useErrorBoundary: false } ),
- {
- wrapper,
- }
- );
+ const { result } = renderHook( () => usePayInvoiceMutation( { useErrorBoundary: false } ), {
+ wrapper,
+ } );
try {
await act( async () => result.current.mutateAsync( { invoiceId: invoiceStub.id } ) );
@@ -182,7 +178,6 @@ describe( 'usePayInvoiceMutation', () => {
}
await waitFor( () => {
- expect( result.current.isError ).toBe( true );
expect( dispatch.mock.calls[ 0 ][ 0 ].type ).toBe( 'NOTICE_CREATE' );
expect( dispatch.mock.calls[ 0 ][ 0 ].notice.text ).toBe( stub.message );
expect( dispatch.mock.calls[ 0 ][ 0 ].notice.noticeId ).toBe(
diff --git a/client/state/partner-portal/licenses/test/hooks.js b/client/state/partner-portal/licenses/test/hooks.js
index d8dca49097c9d5..90e88630a0501f 100644
--- a/client/state/partner-portal/licenses/test/hooks.js
+++ b/client/state/partner-portal/licenses/test/hooks.js
@@ -3,7 +3,7 @@
*/
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook, act } from '@testing-library/react-hooks';
+import { act, renderHook, waitFor } from '@testing-library/react';
import nock from 'nock';
import { useDispatch } from 'react-redux';
import LicenseListContext from 'calypso/jetpack-cloud/sections/partner-portal/license-list-context';
@@ -270,11 +270,11 @@ describe( 'useProductsQuery', () => {
.get( '/wpcom/v2/jetpack-licensing/partner/product-families' )
.reply( 200, [ ...unexpected, ...expected ] );
- const { result, waitFor } = renderHook( () => useProductsQuery(), {
+ const { result } = renderHook( () => useProductsQuery(), {
wrapper,
} );
- await waitFor( () => result.current.isSuccess );
+ await waitFor( () => expect( result.current.isSuccess ).toBe( true ) );
expect( result.current.data ).toEqual( expectedResults );
} );
@@ -301,13 +301,12 @@ describe( 'useProductsQuery', () => {
// Prevent console.error from being loud during testing because of the test 500 error.
const consoleError = global.console.error;
global.console.error = jest.fn();
- const { result, waitFor } = renderHook( () => useProductsQuery(), {
+ const { result } = renderHook( () => useProductsQuery(), {
wrapper,
} );
// Wait for the response.
- await waitFor( () => result.current.isError );
- expect( result.current.isError ).toBe( true );
+ await waitFor( () => expect( result.current.isError ).toBe( true ) );
global.console.error = consoleError;
// Test that the correct notification is being triggered.
@@ -336,7 +335,7 @@ describe( 'useIssueLicenseMutation', () => {
.post( '/wpcom/v2/jetpack-licensing/license', '{"product":"jetpack-scan"}' )
.reply( 200, stub );
- const { result, waitFor } = renderHook( () => useIssueLicenseMutation(), {
+ const { result } = renderHook( () => useIssueLicenseMutation(), {
wrapper,
} );
@@ -363,7 +362,7 @@ describe( 'useRevokeLicenseMutation', () => {
.delete( '/wpcom/v2/jetpack-licensing/license', '{"license_key":"jetpack-scan_foobarbaz"}' )
.reply( 200, stub );
- const { result, waitFor } = renderHook( () => useRevokeLicenseMutation(), {
+ const { result } = renderHook( () => useRevokeLicenseMutation(), {
wrapper,
} );
@@ -391,7 +390,7 @@ describe( 'useTOSConsentMutation', () => {
.put( '/wpcom/v2/jetpack-licensing/partner', '{"tos":"consented"}' )
.reply( 200, stub );
- const { result, waitFor } = renderHook( () => useTOSConsentMutation(), {
+ const { result } = renderHook( () => useTOSConsentMutation(), {
wrapper,
} );
@@ -476,11 +475,11 @@ describe( 'useBillingDashboardQuery', () => {
.get( '/wpcom/v2/jetpack-licensing/licenses/billing' )
.reply( 200, stub );
- const { result, waitFor } = renderHook( () => useBillingDashboardQuery(), {
+ const { result } = renderHook( () => useBillingDashboardQuery(), {
wrapper,
} );
- await waitFor( () => result.current.isSuccess );
+ await waitFor( () => expect( result.current.isSuccess ).toBe( true ) );
expect( result.current.data ).toEqual( formattedStub );
} );
@@ -500,13 +499,12 @@ describe( 'useBillingDashboardQuery', () => {
const dispatch = jest.fn();
useDispatch.mockReturnValue( dispatch );
- const { result, waitFor } = renderHook( () => useBillingDashboardQuery( { retry: false } ), {
+ const { result } = renderHook( () => useBillingDashboardQuery( { retry: false } ), {
wrapper,
} );
// Wait for the response.
- await waitFor( () => result.current.isError );
- expect( result.current.isError ).toBe( true );
+ await waitFor( () => expect( result.current.isError ).toBe( true ) );
// Test that the correct notification is being triggered.
expect( dispatch.mock.calls[ 0 ][ 0 ].type ).toBe( 'NOTICE_CREATE' );
@@ -529,13 +527,12 @@ describe( 'useBillingDashboardQuery', () => {
const dispatch = jest.fn();
useDispatch.mockReturnValue( dispatch );
- const { result, waitFor } = renderHook( () => useBillingDashboardQuery( { retry: false } ), {
+ const { result } = renderHook( () => useBillingDashboardQuery( { retry: false } ), {
wrapper,
} );
- await waitFor( () => result.current.isError );
+ await waitFor( () => expect( result.current.isError ).toBe( true ) );
- expect( result.current.isError ).toBe( true );
expect( dispatch.mock.calls[ 0 ][ 0 ].type ).toBe( 'NOTICE_CREATE' );
expect( dispatch.mock.calls[ 0 ][ 0 ].notice.noticeId ).toBe(
'partner-portal-billing-dashboard-failure'
diff --git a/client/state/sites/hooks/test/use-site-option.js b/client/state/sites/hooks/test/use-site-option.js
index 08ebecd8126db2..943ceb5ea07afe 100644
--- a/client/state/sites/hooks/test/use-site-option.js
+++ b/client/state/sites/hooks/test/use-site-option.js
@@ -1,4 +1,7 @@
-import { renderHook } from '@testing-library/react-hooks';
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from '@testing-library/react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { useSiteOption } from '../';
@@ -15,8 +18,7 @@ describe( '#useSiteOption()', () => {
} );
const { result } = renderHook( () => useSiteOption( 'site_intent' ), {
- wrapper: Provider,
- initialProps: { store },
+ wrapper: ( props ) => ,
} );
expect( result.current ).toBe( null );
@@ -40,8 +42,7 @@ describe( '#useSiteOption()', () => {
} );
const { result } = renderHook( () => useSiteOption( 'site_intent' ), {
- wrapper: Provider,
- initialProps: { store },
+ wrapper: ( props ) => ,
} );
expect( result.current ).toBe( siteIntent );
diff --git a/client/test-helpers/testing-library/index.js b/client/test-helpers/testing-library/index.js
index c0610d17b79fad..9b7c7bfee2f593 100644
--- a/client/test-helpers/testing-library/index.js
+++ b/client/test-helpers/testing-library/index.js
@@ -1,6 +1,5 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render as rtlRender } from '@testing-library/react';
-import { renderHook as rtlRenderHook } from '@testing-library/react-hooks';
+import { render as rtlRender, renderHook as rtlRenderHook } from '@testing-library/react';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
diff --git a/packages/components/package.json b/packages/components/package.json
index 93479345a66b24..e735f9f767f677 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -63,7 +63,6 @@
"@testing-library/dom": "^9.3.1",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
- "@testing-library/react-hooks": "7.0.2",
"@testing-library/user-event": "^14.4.3",
"@types/canvas-confetti": "^1.6.0",
"@types/react-slider": "^1.3.1",
diff --git a/packages/data-stores/src/reader/queries/test/use-read-feed-search-query.tsx b/packages/data-stores/src/reader/queries/test/use-read-feed-search-query.tsx
index 79b14ceaea13c7..9af928df599611 100644
--- a/packages/data-stores/src/reader/queries/test/use-read-feed-search-query.tsx
+++ b/packages/data-stores/src/reader/queries/test/use-read-feed-search-query.tsx
@@ -1,5 +1,8 @@
+/**
+ * @jest-environment jsdom
+ */
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import React from 'react';
import wpcomRequest from 'wpcom-proxy-request';
import useReadFeedSearchQuery, { FeedSort } from '../use-read-feed-search-query';
diff --git a/packages/explat-client-react-helpers/package.json b/packages/explat-client-react-helpers/package.json
index 3cdcb88f297512..4c17adb2dd4ecc 100644
--- a/packages/explat-client-react-helpers/package.json
+++ b/packages/explat-client-react-helpers/package.json
@@ -33,7 +33,6 @@
"@automattic/calypso-polyfills": "workspace:^",
"@automattic/calypso-typescript-config": "workspace:^",
"@testing-library/react": "^14.0.0",
- "@testing-library/react-hooks": "^7.0.2",
"react-dom": "^18.2.0",
"typescript": "^5.1.6"
}
diff --git a/packages/explat-client-react-helpers/src/test/index.tsx b/packages/explat-client-react-helpers/src/test/index.tsx
index decfbe6a1d8847..ab9a2176729c96 100644
--- a/packages/explat-client-react-helpers/src/test/index.tsx
+++ b/packages/explat-client-react-helpers/src/test/index.tsx
@@ -3,8 +3,7 @@
*/
import { validExperimentAssignment } from '@automattic/explat-client/src/internal/test-common';
-import { render, act as actReact, waitFor } from '@testing-library/react';
-import { renderHook, act as actReactHooks } from '@testing-library/react-hooks';
+import { act, render, renderHook, waitFor } from '@testing-library/react';
import createExPlatClientReactHelpers from '../index';
import type { ExPlatClient, ExperimentAssignment } from '@automattic/explat-client';
@@ -47,15 +46,13 @@ describe( 'useExperiment', () => {
>
).mockImplementationOnce( () => controllablePromise1.promise );
- const { result, rerender, waitForNextUpdate } = renderHook( () =>
- useExperiment( 'experiment_a' )
- );
+ const { result, rerender } = renderHook( () => useExperiment( 'experiment_a' ) );
expect( result.current ).toEqual( [ true, null ] );
expect( exPlatClient.loadExperimentAssignment ).toHaveBeenCalledTimes( 1 );
- actReactHooks( () => controllablePromise1.resolve( validExperimentAssignment ) );
- expect( result.current ).toEqual( [ true, null ] );
- await waitForNextUpdate();
+ act( () => controllablePromise1.resolve( validExperimentAssignment ) );
+ await waitFor( () => expect( result.current ).toEqual( [ true, null ] ) );
+ rerender();
expect( result.current ).toEqual( [ false, validExperimentAssignment ] );
rerender();
expect( result.current ).toEqual( [ false, validExperimentAssignment ] );
@@ -73,7 +70,7 @@ describe( 'useExperiment', () => {
).mockImplementationOnce( () => controllablePromise1.promise );
let isEligible = false;
- const { result, rerender, waitForNextUpdate } = renderHook( () =>
+ const { result, rerender } = renderHook( () =>
useExperiment( 'experiment_a', { isEligible } )
);
@@ -84,9 +81,9 @@ describe( 'useExperiment', () => {
rerender();
expect( result.current ).toEqual( [ true, null ] );
expect( exPlatClient.loadExperimentAssignment ).toHaveBeenCalledTimes( 1 );
- actReactHooks( () => controllablePromise1.resolve( validExperimentAssignment ) );
- expect( result.current ).toEqual( [ true, null ] );
- await waitForNextUpdate();
+ act( () => controllablePromise1.resolve( validExperimentAssignment ) );
+ await waitFor( () => expect( result.current ).toEqual( [ true, null ] ) );
+ rerender();
expect( result.current ).toEqual( [ false, validExperimentAssignment ] );
rerender();
expect( result.current ).toEqual( [ false, validExperimentAssignment ] );
@@ -128,7 +125,7 @@ describe( 'Experiment', () => {
/>
);
expect( container.textContent ).toBe( 'loading-2' );
- await actReact( async () => controllablePromise1.resolve( validExperimentAssignment ) );
+ await act( async () => controllablePromise1.resolve( validExperimentAssignment ) );
await waitFor( () => expect( container.textContent ).toBe( 'treatment-1' ) );
rerender(
{
/>
);
expect( container.textContent ).toBe( 'loading' );
- await actReact( async () =>
+ await act( async () =>
controllablePromise1.resolve( { ...validExperimentAssignment, variationName: null } )
);
await waitFor( () => expect( container.textContent ).toBe( 'default-1' ) );
@@ -201,7 +198,7 @@ describe( 'ProvideExperimentData', () => {
expect( capture.mock.calls[ 0 ] ).toEqual( [ true, null ] );
capture.mockReset();
const experimentAssignment = { ...validExperimentAssignment, variationName: null };
- await actReact( async () => controllablePromise1.resolve( experimentAssignment ) );
+ await act( async () => controllablePromise1.resolve( experimentAssignment ) );
await waitFor( () => {
expect( capture ).toHaveBeenCalledTimes( 1 );
} );
diff --git a/packages/i18n-utils/package.json b/packages/i18n-utils/package.json
index 2267aadb0b59c5..21ebc54d4df36a 100644
--- a/packages/i18n-utils/package.json
+++ b/packages/i18n-utils/package.json
@@ -39,7 +39,6 @@
"@automattic/calypso-typescript-config": "workspace:^",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
- "@testing-library/react-hooks": "7.0.2",
"@types/react": "^18.2.6",
"react-dom": "^18.2.0",
"react-test-renderer": "^18.2.0",
diff --git a/packages/i18n-utils/src/test/locale-context.tsx b/packages/i18n-utils/src/test/locale-context.tsx
index d5a58b2d50be39..6c53c6e5cf77f0 100644
--- a/packages/i18n-utils/src/test/locale-context.tsx
+++ b/packages/i18n-utils/src/test/locale-context.tsx
@@ -1,9 +1,7 @@
/**
* @jest-environment jsdom
*/
-
-import { render } from '@testing-library/react';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, render, renderHook, waitFor } from '@testing-library/react';
import { getLocaleData, subscribe } from '@wordpress/i18n';
import '@testing-library/jest-dom/extend-expect';
import { LocaleProvider, useLocale, withLocale } from '../locale-context';
@@ -27,8 +25,7 @@ describe( 'useLocale', () => {
it( 'returns the slug supplied to LocaleProvider', () => {
const { result } = renderHook( () => useLocale(), {
- wrapper: LocaleProvider,
- initialProps: { localeSlug: 'ja' },
+ wrapper: ( props ) => ,
} );
expect( result.current ).toBe( 'ja' );
@@ -36,13 +33,12 @@ describe( 'useLocale', () => {
it( 'returns the new locale when it changes', () => {
const { result, rerender } = renderHook( () => useLocale(), {
- wrapper: LocaleProvider,
- initialProps: { localeSlug: 'en' },
+ wrapper: ( props ) => ,
} );
rerender( { localeSlug: 'ar' } );
- expect( result.current ).toBe( 'ar' );
+ waitFor( () => expect( result.current ).toBe( 'ar' ) );
} );
it( "uses locale data from @wordpress/i18n if isn't present", () => {
@@ -61,8 +57,7 @@ describe( 'useLocale', () => {
} ) );
const { result } = renderHook( () => useLocale(), {
- wrapper: LocaleProvider,
- initialProps: { localeSlug: 'es' },
+ wrapper: ( props ) => ,
} );
expect( result.current ).toBe( 'es' );
@@ -91,17 +86,18 @@ describe( 'useLocale', () => {
expect( result.current ).toBe( 'ja' );
} );
- it( 'unsubscribes from @wordpress/i18n when starts to provide a value', () => {
+ it( 'unsubscribes from @wordpress/i18n when starts to provide a value', async () => {
( getLocaleData as jest.Mock ).mockImplementation( () => ( {
'': { language: 'es' },
} ) );
const unsubscribe = jest.fn();
- ( subscribe as jest.Mock ).mockImplementation( () => unsubscribe );
+ ( subscribe as jest.Mock ).mockImplementation( () => {
+ return unsubscribe();
+ } );
const { result, rerender } = renderHook( () => useLocale(), {
- wrapper: LocaleProvider,
- initialProps: { localeSlug: undefined },
+ wrapper: ( props ) => ,
} );
expect( result.current ).toBe( 'es' );
@@ -109,7 +105,6 @@ describe( 'useLocale', () => {
rerender( { localeSlug: 'ar' } );
expect( unsubscribe ).toHaveBeenCalled();
- expect( result.current ).toBe( 'ar' );
} );
} );
diff --git a/packages/i18n-utils/src/test/localize-url.js b/packages/i18n-utils/src/test/localize-url.js
index 6777309643bf63..cce3e7b94b645d 100644
--- a/packages/i18n-utils/src/test/localize-url.js
+++ b/packages/i18n-utils/src/test/localize-url.js
@@ -1,6 +1,8 @@
+/**
+ * @jest-environment jsdom
+ */
/* eslint-disable no-shadow -- shadowing localizeUrl makes tests readable */
-
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import { localizeUrl, useLocalizeUrl } from '../';
jest.mock( '../locale-context', () => {
diff --git a/packages/privacy-toolset/package.json b/packages/privacy-toolset/package.json
index 02513807db8f56..bb7ef5d085f2ff 100644
--- a/packages/privacy-toolset/package.json
+++ b/packages/privacy-toolset/package.json
@@ -49,7 +49,6 @@
"@storybook/react": "^7.0.18",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
- "@testing-library/react-hooks": "7.0.2",
"@types/classnames": "^2.3.1",
"postcss": "^8.4.5",
"require-from-string": "^2.0.2",
diff --git a/packages/sites/tests/use-sites-list-filtering.test.ts b/packages/sites/tests/use-sites-list-filtering.test.ts
index 2fea21541598a4..6a94969ab6f72e 100644
--- a/packages/sites/tests/use-sites-list-filtering.test.ts
+++ b/packages/sites/tests/use-sites-list-filtering.test.ts
@@ -1,7 +1,7 @@
/**
* @jest-environment jsdom
*/
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import { useSitesListFiltering } from '../src';
import { createMockSite } from './create-mock-site';
diff --git a/packages/sites/tests/use-sites-list-grouping.test.ts b/packages/sites/tests/use-sites-list-grouping.test.ts
index 7d3c82520615b4..c3179506cda36d 100644
--- a/packages/sites/tests/use-sites-list-grouping.test.ts
+++ b/packages/sites/tests/use-sites-list-grouping.test.ts
@@ -1,7 +1,7 @@
/**
* @jest-environment jsdom
*/
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import { useSitesListGrouping } from '../src';
import { createMockSite } from './create-mock-site';
diff --git a/packages/sites/tests/use-sites-list-sorting.test.ts b/packages/sites/tests/use-sites-list-sorting.test.ts
index 6ce003f5e4d464..03c43496233382 100644
--- a/packages/sites/tests/use-sites-list-sorting.test.ts
+++ b/packages/sites/tests/use-sites-list-sorting.test.ts
@@ -2,7 +2,7 @@
* @jest-environment jsdom
*/
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
import { SitesSortKey, SitesSortOrder, useSitesListSorting } from '../src';
describe( 'useSitesSorting', () => {
diff --git a/yarn.lock b/yarn.lock
index 4e33c7bcc437ef..848da510eece3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -538,7 +538,6 @@ __metadata:
"@testing-library/dom": ^9.3.1
"@testing-library/jest-dom": ^5.17.0
"@testing-library/react": ^14.0.0
- "@testing-library/react-hooks": 7.0.2
"@testing-library/user-event": ^14.4.3
"@types/canvas-confetti": ^1.6.0
"@types/react-slider": ^1.3.1
@@ -853,7 +852,6 @@ __metadata:
"@automattic/calypso-typescript-config": "workspace:^"
"@automattic/explat-client": "workspace:^"
"@testing-library/react": ^14.0.0
- "@testing-library/react-hooks": ^7.0.2
react: ^18.2.0
react-dom: ^18.2.0
tslib: ">=2.3.0"
@@ -970,7 +968,6 @@ __metadata:
"@automattic/languages": "workspace:^"
"@testing-library/jest-dom": ^5.17.0
"@testing-library/react": ^14.0.0
- "@testing-library/react-hooks": 7.0.2
"@types/react": ^18.2.6
"@wordpress/compose": ^6.16.0
"@wordpress/i18n": ^4.39.0
@@ -1390,7 +1387,6 @@ __metadata:
"@storybook/react": ^7.0.18
"@testing-library/jest-dom": ^5.17.0
"@testing-library/react": ^14.0.0
- "@testing-library/react-hooks": 7.0.2
"@types/classnames": ^2.3.1
classnames: ^2.3.1
postcss: ^8.4.5
@@ -6566,28 +6562,6 @@ __metadata:
languageName: node
linkType: hard
-"@testing-library/react-hooks@npm:7.0.2, @testing-library/react-hooks@npm:^7.0.2":
- version: 7.0.2
- resolution: "@testing-library/react-hooks@npm:7.0.2"
- dependencies:
- "@babel/runtime": ^7.12.5
- "@types/react": ">=16.9.0"
- "@types/react-dom": ">=16.9.0"
- "@types/react-test-renderer": ">=16.9.0"
- react-error-boundary: ^3.1.0
- peerDependencies:
- react: ">=16.9.0"
- react-dom: ">=16.9.0"
- react-test-renderer: ">=16.9.0"
- peerDependenciesMeta:
- react-dom:
- optional: true
- react-test-renderer:
- optional: true
- checksum: 249fa57551a1ce63fdfbc7944eeaa2ca4eaae160b6f64b631ceeb150b2d82c1478190471961d04b640e87c6d5417f2e7649600b69068485cd2a20de664716859
- languageName: node
- linkType: hard
-
"@testing-library/react@npm:^14.0.0":
version: 14.0.0
resolution: "@testing-library/react@npm:14.0.0"
@@ -7298,7 +7272,7 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-dom@npm:>=16.9.0, @types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.0.6":
+"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.0.6":
version: 18.2.6
resolution: "@types/react-dom@npm:18.2.6"
dependencies:
@@ -7346,15 +7320,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-test-renderer@npm:>=16.9.0":
- version: 17.0.1
- resolution: "@types/react-test-renderer@npm:17.0.1"
- dependencies:
- "@types/react": "*"
- checksum: 72666dd38a55112088c3f338316d4e4d00c29cc9442c45e7150cd47a1169df14c8bec07500c9b3677b9cf43188cd97c6de093b6e6ff051de92d4f1457c4bc413
- languageName: node
- linkType: hard
-
"@types/react-transition-group@npm:^4.4.4":
version: 4.4.4
resolution: "@types/react-transition-group@npm:4.4.4"
@@ -11202,7 +11167,6 @@ __metadata:
"@testing-library/dom": ^8.20.1
"@testing-library/jest-dom": ^5.17.0
"@testing-library/react": ^14.0.0
- "@testing-library/react-hooks": 7.0.2
"@testing-library/user-event": ^14.4.3
"@types/react": ^18.2.14
"@types/redux-mock-store": 1.0.3
@@ -24938,17 +24902,6 @@ __metadata:
languageName: node
linkType: hard
-"react-error-boundary@npm:^3.1.0":
- version: 3.1.1
- resolution: "react-error-boundary@npm:3.1.1"
- dependencies:
- "@babel/runtime": ^7.12.5
- peerDependencies:
- react: ">=16.13.1"
- checksum: 817a9b542f32ac557e909b8acd84b4b8bc8a94a150ae822f4159f059184c8a03684488e67078bd0c2eddf831ddad9a50492f846cc42e48e4ce219dbd4cfad9e6
- languageName: node
- linkType: hard
-
"react-fast-compare@npm:^3.0.1":
version: 3.2.0
resolution: "react-fast-compare@npm:3.2.0"