[8.x] remove outstanding testing-library/react-hooks usages (#205307) (…

…#205780) # Backport This will backport the following commits from `main` to `8.x`: - [remove outstanding testing-library/react-hooks usages (#205307)](#205307)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) \r\n\r\n---------\r\n\r\nCo-authored-by: Elastic Machine <[email protected]>","sha":"1c3f7a6215be2c3459325145a9e4677b2ff4b836","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor","Team:obs-ux-infra_services","Team:obs-ux-management","React@18"],"number":205307,"url":"https://github.com/elastic/kibana/pull/205307","mergeCommit":{"message":"remove outstanding testing-library/react-hooks usages (#205307)\n\n## Summary\r\n\r\nThis PR removes usages of `@testing-library/react-hooks` from the\r\ncodebase, as we've transitioned to using `@testing-library/react`\r\nespecially that it provides the same utils we need and the later package\r\nis not supported for react 18. alongside this ~other instance of the\r\nusages for `@testing-library/react-hooks` have been removed~ an eslint\r\nrule has been enabled to prevent further usages of the mentioned\r\npackage.\r\n\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic Machine <[email protected]>","sha":"1c3f7a6215be2c3459325145a9e4677b2ff4b836"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205307","number":205307,"mergeCommit":{"message":"remove outstanding testing-library/react-hooks usages (#205307)\n\n## Summary\r\n\r\nThis PR removes usages of `@testing-library/react-hooks` from the\r\ncodebase, as we've transitioned to using `@testing-library/react`\r\nespecially that it provides the same utils we need and the later package\r\nis not supported for react 18. alongside this ~other instance of the\r\nusages for `@testing-library/react-hooks` have been removed~ an eslint\r\nrule has been enabled to prevent further usages of the mentioned\r\npackage.\r\n\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic Machine <[email protected]>","sha":"1c3f7a6215be2c3459325145a9e4677b2ff4b836"}}]}] BACKPORT-->
elastic · Jan 8, 2025 · b98dcc9 · b98dcc9
1 parent a410ab3
commit b98dcc9
Show file tree

Hide file tree

Showing 23 changed files with 73 additions and 80 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -271,6 +271,10 @@ const RESTRICTED_IMPORTS = [
     message:
       'Please, use rxjs instead: rxjs/operators is just a subset, unnecessarily duplicating the package import.',
   },
+  {
+    name: '@testing-library/react-hooks',
+    message: 'Please use @testing-library/react instead',
+  },
 ];
 
 module.exports = {

diff --git a/...form/packages/shared/kbn-alerts-ui-shared/src/common/hooks/use_find_alerts_query.test.tsx b/...form/packages/shared/kbn-alerts-ui-shared/src/common/hooks/use_find_alerts_query.test.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { testQueryClientConfig } from '../test_utils/test_query_client_config';
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
@@ -32,7 +32,7 @@ describe('useFindAlertsQuery', () => {
   });
 
   it('calls the api correctly', async () => {
-    const { result, waitForValueToChange } = renderHook(
+    const { result } = renderHook(
       () =>
         useFindAlertsQuery({
           ...mockServices,
@@ -43,7 +43,7 @@ describe('useFindAlertsQuery', () => {
       }
     );
 
-    await waitForValueToChange(() => result.current.isLoading, { timeout: 5000 });
+    await waitFor(() => expect(result.current.isLoading).toBe(true), { timeout: 5000 });
 
     expect(mockServices.http.post).toHaveBeenCalledTimes(1);
     expect(mockServices.http.post).toBeCalledWith('/internal/rac/alerts/find', {

diff --git a/src/platform/plugins/shared/share/public/components/context/index.test.tsx b/src/platform/plugins/shared/share/public/components/context/index.test.tsx
@@ -7,18 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useShareTabsContext } from '.';
 
 describe('share menu context', () => {
   describe('useShareTabsContext', () => {
     it('throws an error if used outside of ShareMenuProvider tree', () => {
-      const { result } = renderHook(() => useShareTabsContext());
-
-      expect(result.error?.message).toEqual(
-        expect.stringContaining(
-          'Failed to call `useShareTabsContext` because the context from ShareMenuProvider is missing.'
-        )
+      expect(() => renderHook(() => useShareTabsContext())).toThrow(
+        /^Failed to call `useShareTabsContext` because the context from ShareMenuProvider is missing./
       );
     });
   });

diff --git a/...istant/impl/assistant/api/knowledge_base/entries/use_create_knowledge_base_entry.test.tsx b/...istant/impl/assistant/api/knowledge_base/entries/use_create_knowledge_base_entry.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import {
   useCreateKnowledgeBaseEntry,
   UseCreateKnowledgeBaseEntryParams,

diff --git a/...tant/impl/assistant/api/knowledge_base/entries/use_delete_knowledge_base_entries.test.tsx b/...tant/impl/assistant/api/knowledge_base/entries/use_delete_knowledge_base_entries.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import {
   useDeleteKnowledgeBaseEntries,
   UseDeleteKnowledgeEntriesParams,

diff --git a/...ic-assistant/impl/assistant/api/knowledge_base/entries/use_knowledge_base_entries.test.ts b/...ic-assistant/impl/assistant/api/knowledge_base/entries/use_knowledge_base_entries.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { useKnowledgeBaseEntries } from './use_knowledge_base_entries';
 import { HttpSetup } from '@kbn/core/public';
 import { IToasts } from '@kbn/core-notifications-browser';
@@ -27,40 +27,40 @@ describe('useKnowledgeBaseEntries', () => {
       data: [{ id: '1', title: 'Entry 1' }],
     });
 
-    const { result, waitForNextUpdate } = renderHook(
+    const { result } = renderHook(
       () => useKnowledgeBaseEntries({ http: httpMock, enabled: true }),
       {
         wrapper: TestProviders,
       }
     );
     expect(result.current.fetchStatus).toEqual('fetching');
 
-    await waitForNextUpdate();
-
-    expect(result.current.data).toEqual({
-      page: 1,
-      perPage: 100,
-      total: 1,
-      data: [{ id: '1', title: 'Entry 1' }],
-    });
+    await waitFor(() =>
+      expect(result.current.data).toEqual({
+        page: 1,
+        perPage: 100,
+        total: 1,
+        data: [{ id: '1', title: 'Entry 1' }],
+      })
+    );
   });
 
   it('handles fetch error', async () => {
     const error = new Error('Fetch error');
     (httpMock.fetch as jest.Mock).mockRejectedValue(error);
 
-    const { waitForNextUpdate } = renderHook(
+    renderHook(
       () => useKnowledgeBaseEntries({ http: httpMock, toasts: toastsMock, enabled: true }),
       {
         wrapper: TestProviders,
       }
     );
 
-    await waitForNextUpdate();
-
-    expect(toastsMock.addError).toHaveBeenCalledWith(error, {
-      title: 'Error fetching Knowledge Base entries',
-    });
+    await waitFor(() =>
+      expect(toastsMock.addError).toHaveBeenCalledWith(error, {
+        title: 'Error fetching Knowledge Base entries',
+      })
+    );
   });
 
   it('does not fetch when disabled', async () => {

diff --git a/...tant/impl/assistant/api/knowledge_base/entries/use_update_knowledge_base_entries.test.tsx b/...tant/impl/assistant/api/knowledge_base/entries/use_update_knowledge_base_entries.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import {
   useUpdateKnowledgeBaseEntries,
   UseUpdateKnowledgeBaseEntriesParams,

diff --git a/.../plugins/shared/cases/public/components/actions/status/use_should_disable_status.test.tsx b/.../plugins/shared/cases/public/components/actions/status/use_should_disable_status.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { CaseStatuses } from '../../../../common/types/domain';
 import { useUserPermissions } from '../../user_actions/use_user_permissions';
 import { useShouldDisableStatus } from './use_should_disable_status';

diff --git a/...ck/platform/plugins/shared/cases/public/components/case_view/use_case_observables.test.ts b/...ck/platform/plugins/shared/cases/public/components/case_view/use_case_observables.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useCaseObservables } from './use_case_observables';
 import { useGetCaseConfiguration } from '../../containers/configure/use_get_case_configuration';
 import { OBSERVABLE_TYPES_BUILTIN_KEYS } from '../../../common/constants';

diff --git a/...latform/plugins/shared/cases/public/components/user_actions/use_user_permissions.test.tsx b/...latform/plugins/shared/cases/public/components/user_actions/use_user_permissions.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useCasesContext } from '../cases_context/use_cases_context';
 import { useUserPermissions } from './use_user_permissions';
 import type { UserActivityParams } from '../user_actions_activity_bar/types';

diff --git a/x-pack/platform/plugins/shared/cases/public/containers/use_delete_observables.test.tsx b/x-pack/platform/plugins/shared/cases/public/containers/use_delete_observables.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import { useDeleteObservable } from './use_delete_observables';
 import { deleteObservable } from './api';
 import { useCasesToast } from '../common/use_cases_toast';
@@ -35,7 +35,7 @@ describe('useDeleteObservable', () => {
   it('should call deleteObservable and show success toast on success', async () => {
     (deleteObservable as jest.Mock).mockResolvedValue({});
 
-    const { result, waitFor } = renderHook(() => useDeleteObservable(caseId, observableId), {
+    const { result } = renderHook(() => useDeleteObservable(caseId, observableId), {
       wrapper: appMockRender.AppWrapper,
     });
 
@@ -52,7 +52,7 @@ describe('useDeleteObservable', () => {
     const error = new Error('Failed to delete observable');
     (deleteObservable as jest.Mock).mockRejectedValue(error);
 
-    const { result, waitFor } = renderHook(() => useDeleteObservable(caseId, observableId), {
+    const { result } = renderHook(() => useDeleteObservable(caseId, observableId), {
       wrapper: appMockRender.AppWrapper,
     });
 

diff --git a/x-pack/platform/plugins/shared/cases/public/containers/use_get_similar_cases.test.tsx b/x-pack/platform/plugins/shared/cases/public/containers/use_get_similar_cases.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import * as api from './api';
 import type { AppMockRenderer } from '../common/mock';
 import { createAppMockRenderer } from '../common/mock';
@@ -30,12 +30,9 @@ describe('useGetSimilarCases', () => {
 
   it('calls getSimilarCases with correct arguments', async () => {
     const spyOnGetCases = jest.spyOn(api, 'getSimilarCases');
-    const { waitFor } = renderHook(
-      () => useGetSimilarCases({ caseId: mockCase.id, perPage: 10, page: 0 }),
-      {
-        wrapper: appMockRender.AppWrapper,
-      }
-    );
+    renderHook(() => useGetSimilarCases({ caseId: mockCase.id, perPage: 10, page: 0 }), {
+      wrapper: appMockRender.AppWrapper,
+    });
 
     await waitFor(() => {
       expect(spyOnGetCases).toBeCalled();
@@ -58,12 +55,9 @@ describe('useGetSimilarCases', () => {
     const addError = jest.fn();
     (useToasts as jest.Mock).mockReturnValue({ addSuccess, addError });
 
-    const { waitFor } = renderHook(
-      () => useGetSimilarCases({ caseId: mockCase.id, perPage: 10, page: 0 }),
-      {
-        wrapper: appMockRender.AppWrapper,
-      }
-    );
+    renderHook(() => useGetSimilarCases({ caseId: mockCase.id, perPage: 10, page: 0 }), {
+      wrapper: appMockRender.AppWrapper,
+    });
 
     await waitFor(() => {
       expect(addError).toHaveBeenCalled();

diff --git a/x-pack/platform/plugins/shared/cases/public/containers/use_patch_observables.test.tsx b/x-pack/platform/plugins/shared/cases/public/containers/use_patch_observables.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import { usePatchObservable } from './use_patch_observables';
 import { patchObservable } from './api';
 import { useCasesToast } from '../common/use_cases_toast';
@@ -41,7 +41,7 @@ describe('usePatchObservable', () => {
   it('should call patchObservable and show success toast on success', async () => {
     (patchObservable as jest.Mock).mockResolvedValue({});
 
-    const { result, waitFor } = renderHook(() => usePatchObservable(caseId, observableId), {
+    const { result } = renderHook(() => usePatchObservable(caseId, observableId), {
       wrapper: appMockRender.AppWrapper,
     });
 
@@ -60,7 +60,7 @@ describe('usePatchObservable', () => {
     const error = new Error('Failed to patch observable');
     (patchObservable as jest.Mock).mockRejectedValue(error);
 
-    const { result, waitFor } = renderHook(() => usePatchObservable(caseId, observableId), {
+    const { result } = renderHook(() => usePatchObservable(caseId, observableId), {
       wrapper: appMockRender.AppWrapper,
     });
 

diff --git a/x-pack/platform/plugins/shared/cases/public/containers/use_post_observables.test.tsx b/x-pack/platform/plugins/shared/cases/public/containers/use_post_observables.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import * as api from './api';
 import { useToasts } from '../common/lib/kibana';
 import type { AppMockRenderer } from '../common/mock';
@@ -41,63 +41,57 @@ describe('usePostObservables', () => {
 
   it('calls the api when invoked with the correct parameters', async () => {
     const spy = jest.spyOn(api, 'postObservable');
-    const { waitForNextUpdate, result } = renderHook(() => usePostObservable(mockCase.id), {
+    const { result } = renderHook(() => usePostObservable(mockCase.id), {
       wrapper: appMockRender.AppWrapper,
     });
 
     act(() => {
       result.current.mutate(observableMock);
     });
 
-    await waitForNextUpdate();
-
-    expect(spy).toHaveBeenCalledWith({ observable: observableMock.observable }, mockCase.id);
+    await waitFor(() =>
+      expect(spy).toHaveBeenCalledWith({ observable: observableMock.observable }, mockCase.id)
+    );
   });
 
   it('invalidates the queries correctly', async () => {
     const queryClientSpy = jest.spyOn(appMockRender.queryClient, 'invalidateQueries');
-    const { waitForNextUpdate, result } = renderHook(() => usePostObservable(mockCase.id), {
+    const { result } = renderHook(() => usePostObservable(mockCase.id), {
       wrapper: appMockRender.AppWrapper,
     });
 
     act(() => {
       result.current.mutate(observableMock);
     });
 
-    await waitForNextUpdate();
-
-    expect(queryClientSpy).toHaveBeenCalledWith(casesQueriesKeys.caseView());
+    await waitFor(() => expect(queryClientSpy).toHaveBeenCalledWith(casesQueriesKeys.caseView()));
   });
 
   it('does shows a success toaster', async () => {
-    const { waitForNextUpdate, result } = renderHook(() => usePostObservable(mockCase.id), {
+    const { result } = renderHook(() => usePostObservable(mockCase.id), {
       wrapper: appMockRender.AppWrapper,
     });
 
     act(() => {
       result.current.mutate(observableMock);
     });
 
-    await waitForNextUpdate();
-
-    expect(addSuccess).toHaveBeenCalled();
+    await waitFor(() => expect(addSuccess).toHaveBeenCalled());
   });
 
   it('shows a toast error when the api return an error', async () => {
     jest
       .spyOn(api, 'postObservable')
       .mockRejectedValue(new Error('usePostObservables: Test error'));
 
-    const { waitForNextUpdate, result } = renderHook(() => usePostObservable(mockCase.id), {
+    const { result } = renderHook(() => usePostObservable(mockCase.id), {
       wrapper: appMockRender.AppWrapper,
     });
 
     act(() => {
       result.current.mutate(observableMock);
     });
 
-    await waitForNextUpdate();
-
-    expect(addError).toHaveBeenCalled();
+    await waitFor(() => expect(addError).toHaveBeenCalled());
   });
 });
diff --git a/...i/public/application/sections/alerts_table/hooks/use_bulk_untrack_alerts_by_query.test.ts b/...i/public/application/sections/alerts_table/hooks/use_bulk_untrack_alerts_by_query.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import { AppMockRenderer, createAppMockRenderer } from '../../test_utils';
 import { AlertsQueryContext } from '@kbn/alerts-ui-shared/src/common/contexts/alerts_query_context';
 import { useBulkUntrackAlertsByQuery } from './use_bulk_untrack_alerts_by_query';
@@ -35,7 +35,7 @@ describe('useBulkUntrackAlertsByQuery', () => {
   it('calls the api when invoked with the correct parameters', async () => {
     httpMock.mockResolvedValue(response);
 
-    const { result, waitFor } = renderHook(() => useBulkUntrackAlertsByQuery(), {
+    const { result } = renderHook(() => useBulkUntrackAlertsByQuery(), {
       wrapper: appMockRender.AppWrapper,
     });
 

diff --git a/x-pack/plugins/lens/public/app_plugin/app_helpers.test.ts b/x-pack/plugins/lens/public/app_plugin/app_helpers.test.ts
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
-import faker from 'faker';
+import { renderHook, act } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
 import { UseNavigateBackToAppProps, useNavigateBackToApp } from './app_helpers';
 import { defaultDoc, makeDefaultServices } from '../mocks/services_mock';
 import { cloneDeep } from 'lodash';

diff --git a/x-pack/solutions/observability/plugins/infra/public/hooks/use_time_range.test.ts b/x-pack/solutions/observability/plugins/infra/public/hooks/use_time_range.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useTimeRange } from './use_time_range';
 import * as datemath from '../utils/datemath';