Testing: Remove @testing-library/react-hooks in favor of @testing-lib…

…rary/react (#80914)

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,

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,
 		} );
 

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,
 		} );
 

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 );
 	} );

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';
 

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', () => ( {

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';
 

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';

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';

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';

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,

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,

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';

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';

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';
 

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';

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';
 

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';

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';

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",

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(