[React18] Migrate test suites to account for testing library upgrades kibana-data-discovery (#201144)

This PR migrates test suites that use `renderHook` from the library
`@testing-library/react-hooks` to adopt the equivalent and replacement
of `renderHook` from the export that is now available from
`@testing-library/react`. This work is required for the planned
migration to react18.

##  Context

In this PR, usages of `waitForNextUpdate` that previously could have
been destructured from `renderHook` are now been replaced with `waitFor`
exported from `@testing-library/react`, furthermore `waitFor`
that would also have been destructured from the same renderHook result
is now been replaced with `waitFor` from the export of
`@testing-library/react`.

***Why is `waitFor` a sufficient enough replacement for
`waitForNextUpdate`, and better for testing values subject to async
computations?***

WaitFor will retry the provided callback if an error is returned, till
the configured timeout elapses. By default the retry interval is `50ms`
with a timeout value of `1000ms` that
effectively translates to at least 20 retries for assertions placed
within waitFor. See
https://testing-library.com/docs/dom-testing-library/api-async/#waitfor
for more information.
This however means that for person's writing tests, said person has to
be explicit about expectations that describe the internal state of the
hook being tested.
This implies checking for instance when a react query hook is being
rendered, there's an assertion that said hook isn't loading anymore.

In this PR you'd notice that this pattern has been adopted, with most
existing assertions following an invocation of `waitForNextUpdate` being
placed within a `waitFor`
invocation. In some cases the replacement is simply a `waitFor(() => new
Promise((resolve) => resolve(null)))` (many thanks to @kapral18, for
point out exactly why this works),
where this suffices the assertions that follow aren't placed within a
waitFor so this PR doesn't get larger than it needs to be.

It's also worth pointing out this PR might also contain changes to test
and application code to improve said existing test.

### What to do next?
1. Review the changes in this PR.
2. If you think the changes are correct, approve the PR.

## Any questions?
If you have any questions or need help with this PR, please leave
comments in this PR.

---------

Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>

packages/kbn-discover-utils/src/hooks/use_pager.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { usePager } from './use_pager';
 
 describe('usePager', () => {

packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/get_sidebar_visibility.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { act } from '@testing-library/react-hooks';
+import { act } from '@testing-library/react';
 import { getSidebarVisibility } from './get_sidebar_visibility';
 
 const localStorageKey = 'test-sidebar-visibility';

packages/kbn-unified-field-list/src/hooks/use_existing_fields.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/data_view.stub';
 import { createStubDataView, stubFieldSpecMap } from '@kbn/data-plugin/public/stubs';
 import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
@@ -94,7 +94,7 @@ describe('UnifiedFieldList useExistingFields', () => {
       };
     });
 
-    const hookFetcher = renderHook(useExistingFieldsFetcher, {
+    renderHook(useExistingFieldsFetcher, {
       initialProps: {
         dataViews: [dataView],
         services: mockedServices,
@@ -107,7 +107,7 @@ describe('UnifiedFieldList useExistingFields', () => {
 
     const hookReader = renderHook(useExistingFieldsReader);
 
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -167,7 +167,7 @@ describe('UnifiedFieldList useExistingFields', () => {
     const hookReader1 = renderHook(useExistingFieldsReader);
     const hookReader2 = renderHook(useExistingFieldsReader);
 
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenCalled();
 
@@ -199,7 +199,7 @@ describe('UnifiedFieldList useExistingFields', () => {
       throw new Error('test');
     });
 
-    const hookFetcher = renderHook(useExistingFieldsFetcher, {
+    renderHook(useExistingFieldsFetcher, {
       initialProps: {
         dataViews: [dataView],
         services: mockedServices,
@@ -212,7 +212,7 @@ describe('UnifiedFieldList useExistingFields', () => {
 
     const hookReader = renderHook(useExistingFieldsReader);
 
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenCalled();
 
@@ -232,7 +232,7 @@ describe('UnifiedFieldList useExistingFields', () => {
       }
     );
 
-    const hookFetcher = renderHook(useExistingFieldsFetcher, {
+    renderHook(useExistingFieldsFetcher, {
       initialProps: {
         dataViews: [dataView, anotherDataView, dataViewWithRestrictions],
         services: mockedServices,
@@ -244,7 +244,7 @@ describe('UnifiedFieldList useExistingFields', () => {
     });
 
     const hookReader = renderHook(useExistingFieldsReader);
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const currentResult = hookReader.result.current;
 
@@ -310,8 +310,7 @@ describe('UnifiedFieldList useExistingFields', () => {
     });
 
     const hookReader = renderHook(useExistingFieldsReader);
-    await hookFetcher.waitForNextUpdate();
-    await hookFetcher.waitFor(() => !hookFetcher.result.current.isProcessing);
+    await waitFor(() => () => !hookFetcher.result.current.isProcessing);
 
     expect(dataViewWithRestrictions.getAggregationRestrictions).toHaveBeenCalled();
     expect(ExistingFieldsServiceApi.loadFieldExisting).not.toHaveBeenCalled();
@@ -346,7 +345,7 @@ describe('UnifiedFieldList useExistingFields', () => {
     });
 
     const hookReader = renderHook(useExistingFieldsReader);
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -370,7 +369,7 @@ describe('UnifiedFieldList useExistingFields', () => {
       dataViews: [dataView, anotherDataView],
     });
 
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenNthCalledWith(
       2,
@@ -424,7 +423,7 @@ describe('UnifiedFieldList useExistingFields', () => {
     });
 
     const hookReader = renderHook(useExistingFieldsReader);
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -447,32 +446,32 @@ describe('UnifiedFieldList useExistingFields', () => {
       query: { query: 'test', language: 'kuery' },
     });
 
-    await hookFetcher.waitForNextUpdate();
-
-    expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenNthCalledWith(
-      2,
-      expect.objectContaining({
-        fromDate: '2021-01-01',
-        toDate: '2022-01-01',
-        dslQuery: {
-          bool: {
-            filter: [
-              {
-                multi_match: {
-                  lenient: true,
-                  query: 'test',
-                  type: 'best_fields',
+    await waitFor(() =>
+      expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          fromDate: '2021-01-01',
+          toDate: '2022-01-01',
+          dslQuery: {
+            bool: {
+              filter: [
+                {
+                  multi_match: {
+                    lenient: true,
+                    query: 'test',
+                    type: 'best_fields',
+                  },
                 },
-              },
-            ],
-            must: [],
-            must_not: [],
-            should: [],
+              ],
+              must: [],
+              must_not: [],
+              should: [],
+            },
           },
-        },
-        dataView,
-        timeFieldName: dataView.timeFieldName,
-      })
+          dataView,
+          timeFieldName: dataView.timeFieldName,
+        })
+      )
     );
   });
 
@@ -497,7 +496,7 @@ describe('UnifiedFieldList useExistingFields', () => {
     });
 
     const hookReader = renderHook(useExistingFieldsReader);
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -522,7 +521,7 @@ describe('UnifiedFieldList useExistingFields', () => {
       toDate: '2022-01-01',
     });
 
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenNthCalledWith(
       2,
@@ -558,12 +557,12 @@ describe('UnifiedFieldList useExistingFields', () => {
       query: { query: '', language: 'lucene' },
       filters: [],
     };
-    const hookFetcher = renderHook(useExistingFieldsFetcher, {
+    renderHook(useExistingFieldsFetcher, {
       initialProps: params,
     });
 
     const hookReader = renderHook(useExistingFieldsReader);
-    await hookFetcher.waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenCalledWith(
       expect.objectContaining({

packages/kbn-unified-field-list/src/hooks/use_field_filters.test.tsx

@@ -7,8 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { renderHook } from '@testing-library/react-hooks';
-import { act } from 'react-test-renderer';
+import { act, renderHook } from '@testing-library/react';
 import { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/data_view.stub';
 import type { DataViewField } from '@kbn/data-views-plugin/common';
 import { coreMock } from '@kbn/core/public/mocks';

packages/kbn-unified-field-list/src/hooks/use_grouped_fields.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
+import { waitFor, renderHook, act } from '@testing-library/react';
 import {
   stubDataViewWithoutTimeField,
   stubLogstashDataView as dataView,
@@ -56,11 +56,11 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       allFields: null,
       services: mockedServices,
     };
-    const { result, waitForNextUpdate, rerender } = renderHook(useGroupedFields, {
+    const { result, rerender } = renderHook(useGroupedFields, {
       initialProps: props,
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     let fieldListGroupedProps = result.current.fieldListGroupedProps;
     expect(fieldListGroupedProps.fieldGroups).toMatchSnapshot();
@@ -101,11 +101,11 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       })
     );
 
-    const { result, waitForNextUpdate, rerender } = renderHook(useGroupedFields, {
+    const { result, rerender } = renderHook(useGroupedFields, {
       initialProps: props,
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     let fieldListGroupedProps = result.current.fieldListGroupedProps;
     const fieldGroups = fieldListGroupedProps.fieldGroups;
@@ -163,11 +163,11 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       })
     );
 
-    const { result, waitForNextUpdate, rerender } = renderHook(useGroupedFields, {
+    const { result, rerender } = renderHook(useGroupedFields, {
       initialProps: props,
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     let fieldListGroupedProps = result.current.fieldListGroupedProps;
     const fieldGroups = fieldListGroupedProps.fieldGroups;
@@ -235,11 +235,11 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       })
     );
 
-    const { result, waitForNextUpdate, rerender } = renderHook(useGroupedFields, {
+    const { result, rerender } = renderHook(useGroupedFields, {
       initialProps: props,
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     let fieldListGroupedProps = result.current.fieldListGroupedProps;
     const fieldGroups = fieldListGroupedProps.fieldGroups;
@@ -292,11 +292,11 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       allFields: allFieldsIncludingUnmapped,
       services: mockedServices,
     };
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: props,
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     let fieldGroups = result.current.fieldListGroupedProps.fieldGroups;
 
@@ -373,11 +373,11 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       allFields,
       services: mockedServices,
     };
-    const { result, waitForNextUpdate, rerender } = renderHook(useGroupedFields, {
+    const { result, rerender } = renderHook(useGroupedFields, {
       initialProps: props,
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const scrollToTopResetCounter1 = result.current.fieldListGroupedProps.scrollToTopResetCounter;
 
@@ -392,7 +392,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
   });
 
   it('should work correctly when custom unsupported fields are skipped', async () => {
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: {
         dataViewId: dataView.id!,
         allFields,
@@ -401,7 +401,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       },
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const fieldGroups = result.current.fieldListGroupedProps.fieldGroups;
 
@@ -422,7 +422,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
   });
 
   it('should work correctly when selected fields are present', async () => {
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: {
         dataViewId: dataView.id!,
         allFields,
@@ -432,7 +432,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       },
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const fieldGroups = result.current.fieldListGroupedProps.fieldGroups;
 
@@ -531,7 +531,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
           };
         }
       });
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: {
         dataViewId: dataView.id!,
         allFields,
@@ -540,7 +540,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       },
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const fieldGroups = result.current.fieldListGroupedProps.fieldGroups;
 
@@ -572,10 +572,10 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       })
     );
 
-    const { result, waitForNextUpdate, rerender } = renderHook(useGroupedFields, {
+    const { result, rerender } = renderHook(useGroupedFields, {
       initialProps: props,
     });
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     let fieldListGroupedProps = result.current.fieldListGroupedProps;
     fieldGroups = fieldListGroupedProps.fieldGroups;
@@ -604,7 +604,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       allFields: anotherDataView.fields,
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     fieldListGroupedProps = result.current.fieldListGroupedProps;
     fieldGroups = fieldListGroupedProps.fieldGroups;
@@ -633,7 +633,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
     // `bytes` is popular, but we are skipping it here to test that it would not be shown under Popular and Available
     const onSupportedFieldFilter = jest.fn((field) => field.name !== 'bytes');
 
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: {
         dataViewId: dataView.id!,
         allFields,
@@ -643,7 +643,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       },
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const fieldGroups = result.current.fieldListGroupedProps.fieldGroups;
 
@@ -668,7 +668,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
   });
 
   it('should work correctly when global filters are set', async () => {
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: {
         dataViewId: dataView.id!,
         allFields: [],
@@ -677,14 +677,14 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       },
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const fieldGroups = result.current.fieldListGroupedProps.fieldGroups;
     expect(fieldGroups).toMatchSnapshot();
   });
 
   it('should work correctly and show unmapped fields separately', async () => {
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: {
         dataViewId: dataView.id!,
         allFields: allFieldsIncludingUnmapped,
@@ -692,7 +692,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       },
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const fieldGroups = result.current.fieldListGroupedProps.fieldGroups;
 
@@ -718,7 +718,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       allFields[2],
       allFields[0],
     ];
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: {
         dataViewId: dataView.id!,
         allFields,
@@ -727,7 +727,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       },
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const fieldGroups = result.current.fieldListGroupedProps.fieldGroups;
 
@@ -750,7 +750,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
   });
 
   it('should include filters props', async () => {
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: {
         dataViewId: dataView.id!,
         allFields,
@@ -758,7 +758,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       },
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const { fieldListFiltersProps, fieldListGroupedProps } = result.current;
     const fieldGroups = fieldListGroupedProps.fieldGroups;
@@ -806,7 +806,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
     const additionalFieldGroups = {
       smartFields,
     };
-    const { result, waitForNextUpdate } = renderHook(useGroupedFields, {
+    const { result } = renderHook(useGroupedFields, {
       initialProps: {
         dataViewId: dataView.id!,
         allFields,
@@ -815,7 +815,7 @@ describe('UnifiedFieldList useGroupedFields()', () => {
       },
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     const fieldListGroupedProps = result.current.fieldListGroupedProps;
     const fieldGroups = fieldListGroupedProps.fieldGroups;
     expect(fieldGroups.SmartFields?.fields?.length).toBe(1);

packages/kbn-unified-field-list/src/hooks/use_new_fields.test.tsx

@@ -7,7 +7,7 @@
  * 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 { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/data_view.stub';
 import { DataViewField } from '@kbn/data-views-plugin/common';
 import { useNewFields, type UseNewFieldsParams } from './use_new_fields';

src/plugins/discover/public/application/context/hooks/use_context_app_fetch.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { createFilterManagerMock } from '@kbn/data-plugin/public/query/filter_manager/filter_manager.mock';
 import { CONTEXT_TIE_BREAKER_FIELDS_SETTING } from '@kbn/discover-utils';
 import { DiscoverServices } from '../../../build_services';
@@ -106,7 +106,7 @@ const initDefaults = (tieBreakerFields: string[], dataViewId = 'the-data-view-id
 
   return {
     result: renderHook(() => useContextAppFetch(props.props), {
-      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+      wrapper: ({ children }: React.PropsWithChildren) => (
         <KibanaContextProvider services={services}>{children}</KibanaContextProvider>
       ),
     }).result,

src/plugins/discover/public/application/main/components/layout/use_discover_histogram.test.tsx

@@ -9,7 +9,7 @@
 
 import React, { ReactElement } from 'react';
 import { AggregateQuery, Query } from '@kbn/es-query';
-import { act, renderHook, WrapperComponent } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { FetchStatus } from '../../../types';
 import type { DiscoverStateContainer } from '../../state_management/discover_state';
@@ -121,9 +121,7 @@ describe('useDiscoverHistogram', () => {
       hideChart,
     };
 
-    const Wrapper: WrapperComponent<React.PropsWithChildren<UseDiscoverHistogramProps>> = ({
-      children,
-    }) => (
+    const Wrapper = ({ children }: React.PropsWithChildren<unknown>) => (
       <DiscoverMainProvider value={stateContainer}>{children as ReactElement}</DiscoverMainProvider>
     );
 

src/plugins/discover/public/application/main/components/layout/use_fetch_more_records.test.tsx

@@ -8,10 +8,10 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
-import { renderHook, WrapperComponent } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { buildDataTableRecord } from '@kbn/discover-utils';
 import { dataViewMock, esHitsMockWithSort } from '@kbn/discover-utils/src/__mocks__';
-import { useFetchMoreRecords, UseFetchMoreRecordsParams } from './use_fetch_more_records';
+import { useFetchMoreRecords } from './use_fetch_more_records';
 import { getDiscoverStateMock } from '../../../../__mocks__/discover_state.mock';
 import {
   DataDocuments$,
@@ -47,10 +47,8 @@ describe('useFetchMoreRecords', () => {
     return stateContainer;
   };
 
-  const getWrapper = (
-    stateContainer: DiscoverStateContainer
-  ): WrapperComponent<React.PropsWithChildren<UseFetchMoreRecordsParams>> => {
-    return ({ children }) => (
+  const getWrapper = (stateContainer: DiscoverStateContainer) => {
+    return ({ children }: React.PropsWithChildren<unknown>) => (
       <DiscoverMainProvider value={stateContainer}>
         <>{children}</>
       </DiscoverMainProvider>

src/plugins/discover/public/application/main/components/top_nav/use_top_nav_links.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { dataViewMock } from '@kbn/discover-utils/src/__mocks__';
 import { useTopNavLinks } from './use_top_nav_links';
 import { DiscoverServices } from '../../../../build_services';

src/plugins/discover/public/application/main/hooks/use_esql_mode.test.tsx

@@ -8,8 +8,7 @@
  */
 
 import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { waitFor } from '@testing-library/react';
+import { waitFor, renderHook } from '@testing-library/react';
 import { DataViewsContract } from '@kbn/data-plugin/public';
 import { discoverServiceMock } from '../../../__mocks__/services';
 import { useEsqlMode } from './use_esql_mode';
@@ -76,8 +75,10 @@ const getDataViewsService = () => {
 };
 
 const getHookContext = (stateContainer: DiscoverStateContainer) => {
-  return ({ children }: { children: JSX.Element }) => (
-    <DiscoverMainProvider value={stateContainer}>{children}</DiscoverMainProvider>
+  return ({ children }: React.PropsWithChildren) => (
+    <DiscoverMainProvider value={stateContainer}>
+      <>{children}</>
+    </DiscoverMainProvider>
   );
 };
 const renderHookWithContext = (

src/plugins/discover/public/application/main/hooks/use_inspector.test.ts

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { discoverServiceMock } from '../../../__mocks__/services';
 import { useInspector } from './use_inspector';
 import { Adapters, RequestAdapter } from '@kbn/inspector-plugin/common';

src/plugins/discover/public/application/main/hooks/use_url.test.ts

@@ -7,7 +7,7 @@
  * 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 { createSearchSessionMock } from '../../../__mocks__/search_session';
 import { useUrl } from './use_url';
 import {

src/plugins/discover/public/application/main/state_management/discover_state_provider.tsx

@@ -57,10 +57,9 @@ export const {
 export const DiscoverMainProvider = ({
   value,
   children,
-}: {
+}: React.PropsWithChildren<{
   value: DiscoverStateContainer;
-  children: React.ReactElement;
-}) => {
+}>) => {
   return (
     <DiscoverStateProvider value={value}>
       <DiscoverAppStateProvider value={value.appState}>

src/plugins/discover/public/context_awareness/hooks/use_additional_cell_actions.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import {
   DISCOVER_CELL_ACTION_TYPE,
   createCellAction,
@@ -76,7 +76,7 @@ describe('useAdditionalCellActions', () => {
   };
 
   const render = () => {
-    return renderHook((props) => useAdditionalCellActions(props), {
+    return renderHook(useAdditionalCellActions, {
       initialProps,
       wrapper: ({ children }) => (
         <KibanaContextProvider services={discoverServiceMock}>{children}</KibanaContextProvider>
@@ -90,6 +90,7 @@ describe('useAdditionalCellActions', () => {
 
   afterEach(() => {
     mockUuid = 0;
+    jest.clearAllMocks();
   });
 
   it('should return metadata', async () => {
@@ -108,7 +109,7 @@ describe('useAdditionalCellActions', () => {
     expect(mockActions).toHaveLength(1);
     expect(mockTriggerActions[DISCOVER_CELL_ACTIONS_TRIGGER.id]).toEqual(['root-action-2']);
     await act(() => discoverServiceMock.profilesManager.resolveDataSourceProfile({}));
-    rerender();
+    rerender(initialProps);
     expect(result.current.instanceId).toEqual('3');
     expect(mockActions).toHaveLength(2);
     expect(mockTriggerActions[DISCOVER_CELL_ACTIONS_TRIGGER.id]).toEqual([

src/plugins/discover/public/context_awareness/hooks/use_profile_accessor.test.ts

@@ -7,7 +7,7 @@
  * 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 { AppliedProfile, getMergedAccessor } from '../composable_profile';
 import { useProfileAccessor } from './use_profile_accessor';
 import { getDataTableRecords } from '../../__fixtures__/real_hits';

src/plugins/discover/public/context_awareness/hooks/use_profiles.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import React from 'react';
 import { discoverServiceMock } from '../../__mocks__/services';
 import type { GetProfilesOptions } from '../profiles_manager';

src/plugins/discover/public/context_awareness/hooks/use_root_profile.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { waitFor, act, renderHook } from '@testing-library/react';
 import React from 'react';
 import { discoverServiceMock } from '../../__mocks__/services';
 import { useRootProfile } from './use_root_profile';
@@ -37,31 +37,34 @@ describe('useRootProfile', () => {
   });
 
   it('should return rootProfileLoading as true', async () => {
-    const { result, waitForNextUpdate } = render();
+    const { result } = render();
     expect(result.current.rootProfileLoading).toBe(true);
     expect((result.current as Record<string, unknown>).AppWrapper).toBeUndefined();
     // avoid act warning
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
   });
 
   it('should return rootProfileLoading as false', async () => {
-    const { result, waitForNextUpdate } = render();
-    await waitForNextUpdate();
-    expect(result.current.rootProfileLoading).toBe(false);
-    expect((result.current as Record<string, unknown>).AppWrapper).toBeDefined();
+    const { result } = render();
+    await waitFor(() => {
+      expect(result.current.rootProfileLoading).toBe(false);
+      expect((result.current as Record<string, unknown>).AppWrapper).toBeDefined();
+    });
   });
 
   it('should return rootProfileLoading as true when solutionNavId changes', async () => {
-    const { result, rerender, waitForNextUpdate } = render();
-    await waitForNextUpdate();
-    expect(result.current.rootProfileLoading).toBe(false);
-    expect((result.current as Record<string, unknown>).AppWrapper).toBeDefined();
+    const { result, rerender } = render();
+    await waitFor(() => {
+      expect(result.current.rootProfileLoading).toBe(false);
+      expect((result.current as Record<string, unknown>).AppWrapper).toBeDefined();
+    });
     act(() => mockSolutionNavId$.next('newSolutionNavId'));
     rerender();
     expect(result.current.rootProfileLoading).toBe(true);
     expect((result.current as Record<string, unknown>).AppWrapper).toBeUndefined();
-    await waitForNextUpdate();
-    expect(result.current.rootProfileLoading).toBe(false);
-    expect((result.current as Record<string, unknown>).AppWrapper).toBeDefined();
+    await waitFor(() => {
+      expect(result.current.rootProfileLoading).toBe(false);
+      expect((result.current as Record<string, unknown>).AppWrapper).toBeDefined();
+    });
   });
 });

src/plugins/discover/public/customizations/customization_provider.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import React from 'react';
 import { getDiscoverStateMock } from '../__mocks__/discover_state.mock';
 import {

src/plugins/discover/public/embeddable/get_search_embeddable_factory.test.tsx

@@ -18,7 +18,7 @@ import { BuildReactEmbeddableApiRegistration } from '@kbn/embeddable-plugin/publ
 import { PresentationContainer } from '@kbn/presentation-containers';
 import { PhaseEvent, PublishesUnifiedSearch, StateComparators } from '@kbn/presentation-publishing';
 import { VIEW_MODE } from '@kbn/saved-search-plugin/common';
-import { act, render } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 
 import { AggregateQuery, Filter, Query, TimeRange } from '@kbn/es-query';
 import { createDataViewDataSource } from '../../common/data_sources';
@@ -143,8 +143,10 @@ describe('saved search embeddable', () => {
       expect(api.dataLoading.getValue()).toBe(false);
 
       expect(discoverComponent.queryByTestId('embeddedSavedSearchDocTable')).toBeInTheDocument();
-      expect(discoverComponent.getByTestId('embeddedSavedSearchDocTable').textContent).toEqual(
-        'No results found'
+      await waitFor(() =>
+        expect(discoverComponent.getByTestId('embeddedSavedSearchDocTable').textContent).toEqual(
+          'No results found'
+        )
       );
     });
 

src/plugins/discover/public/hooks/saved_search_alias_match_redirect.test.ts

@@ -7,7 +7,7 @@
  * 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 type { History } from 'history';
 
 import { useSavedSearchAliasMatchRedirect } from './saved_search_alias_match_redirect';

src/plugins/discover/public/hooks/use_data_view.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { useDataView } from './use_data_view';
 
 const adhocDataView = {
@@ -38,11 +38,11 @@ const mockServices = {
 
 const render = async ({ dataViewId }: { dataViewId: string }) => {
   const hookResult = renderHook(() => useDataView({ index: dataViewId }), {
-    wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+    wrapper: ({ children }: React.PropsWithChildren) => (
       <KibanaContextProvider services={mockServices}>{children}</KibanaContextProvider>
     ),
   });
-  await hookResult.waitForNextUpdate();
+  await waitFor(() => new Promise((resolve) => resolve(null)));
 
   return hookResult;
 };

src/plugins/discover/public/hooks/use_navigation_props.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React, { MouseEvent } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { useNavigationProps } from './use_navigation_props';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
@@ -65,7 +65,7 @@ const render = async () => {
       ),
     }
   );
-  await renderResult.waitForNextUpdate();
+  await waitFor(() => new Promise((resolve) => resolve(null)));
   return renderResult;
 };
 

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/test_filters.test.ts

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import {
   useTableFilters,

src/plugins/unified_doc_viewer/public/hooks/use_es_doc_search.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
+import { waitFor, renderHook, act } from '@testing-library/react';
 import { type EsDocSearchProps, buildSearchBody, useEsDocSearch } from './use_es_doc_search';
 import { Subject } from 'rxjs';
 import type { DataView } from '@kbn/data-views-plugin/public';
@@ -281,13 +281,14 @@ describe('Test of <Doc /> helper / hook', () => {
         },
       });
       mockSearchResult.complete();
-      await hook.waitForNextUpdate();
     });
 
-    expect(hook.result.current.slice(0, 2)).toEqual([
-      ElasticRequestState.Found,
-      buildDataTableRecord(record),
-    ]);
+    await waitFor(() =>
+      expect(hook.result.current.slice(0, 2)).toEqual([
+        ElasticRequestState.Found,
+        buildDataTableRecord(record),
+      ])
+    );
   });
 
   test('useEsDocSearch for text based languages', async () => {

src/plugins/unified_histogram/public/chart/hooks/use_chart_actions.test.ts

@@ -7,8 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { renderHook } from '@testing-library/react-hooks';
-import { act } from 'react-test-renderer';
+import { act, renderHook } from '@testing-library/react';
 import { UnifiedHistogramChartContext } from '../../types';
 import { useChartActions } from './use_chart_actions';
 

src/plugins/unified_histogram/public/chart/hooks/use_edit_visualization.test.ts

@@ -9,9 +9,7 @@
 
 import type { DataView } from '@kbn/data-views-plugin/common';
 import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
-import { renderHook } from '@testing-library/react-hooks';
-import { act } from 'react-test-renderer';
-import { setTimeout } from 'timers/promises';
+import { waitFor, renderHook } from '@testing-library/react';
 import { dataViewMock } from '../../__mocks__/data_view';
 import { dataViewWithTimefieldMock } from '../../__mocks__/data_view_with_timefield';
 import { unifiedHistogramServicesMock } from '../../__mocks__/services';
@@ -44,8 +42,7 @@ describe('useEditVisualization', () => {
         lensAttributes,
       })
     );
-    await act(() => setTimeout(0));
-    expect(hook.result.current).toBeDefined();
+    await waitFor(() => expect(hook.result.current).toBeDefined());
     hook.result.current!();
     expect(navigateToPrefilledEditor).toHaveBeenCalledWith({
       id: '',
@@ -64,8 +61,7 @@ describe('useEditVisualization', () => {
         lensAttributes: {} as unknown as TypedLensByValueInput['attributes'],
       })
     );
-    await act(() => setTimeout(0));
-    expect(hook.result.current).toBeUndefined();
+    await waitFor(() => expect(hook.result.current).toBeUndefined());
   });
 
   it('should return undefined if the data view is not time based', async () => {
@@ -78,8 +74,7 @@ describe('useEditVisualization', () => {
         lensAttributes: {} as unknown as TypedLensByValueInput['attributes'],
       })
     );
-    await act(() => setTimeout(0));
-    expect(hook.result.current).toBeUndefined();
+    await waitFor(() => expect(hook.result.current).toBeUndefined());
   });
 
   it('should return undefined if is on text based mode', async () => {
@@ -93,8 +88,7 @@ describe('useEditVisualization', () => {
         isPlainRecord: true,
       })
     );
-    await act(() => setTimeout(0));
-    expect(hook.result.current).toBeUndefined();
+    await waitFor(() => expect(hook.result.current).toBeUndefined());
   });
 
   it('should return undefined if the time field is not visualizable', async () => {
@@ -113,8 +107,7 @@ describe('useEditVisualization', () => {
         lensAttributes: {} as unknown as TypedLensByValueInput['attributes'],
       })
     );
-    await act(() => setTimeout(0));
-    expect(hook.result.current).toBeUndefined();
+    await waitFor(() => expect(hook.result.current).toBeUndefined());
   });
 
   it('should return undefined if there are no compatible actions', async () => {
@@ -127,7 +120,6 @@ describe('useEditVisualization', () => {
         lensAttributes: {} as unknown as TypedLensByValueInput['attributes'],
       })
     );
-    await act(() => setTimeout(0));
-    expect(hook.result.current).toBeUndefined();
+    await waitFor(() => expect(hook.result.current).toBeUndefined());
   });
 });

src/plugins/unified_histogram/public/chart/hooks/use_lens_props.test.ts

@@ -7,8 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { renderHook } from '@testing-library/react-hooks';
-import { act } from 'react-test-renderer';
+import { act, renderHook } from '@testing-library/react';
 import { Subject } from 'rxjs';
 import type { UnifiedHistogramInputMessage } from '../../types';
 import { dataViewWithTimefieldMock } from '../../__mocks__/data_view_with_timefield';

src/plugins/unified_histogram/public/chart/hooks/use_refetch.test.ts

@@ -10,7 +10,7 @@
 import { useRefetch } from './use_refetch';
 import { DataView } from '@kbn/data-views-plugin/common';
 import { AggregateQuery, Filter, Query, TimeRange } from '@kbn/es-query';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import {
   UnifiedHistogramBreakdownContext,
   UnifiedHistogramChartContext,

src/plugins/unified_histogram/public/chart/hooks/use_time_range.test.tsx

@@ -9,7 +9,7 @@
 
 import { uiSettingsServiceMock } from '@kbn/core-ui-settings-browser-mocks';
 import { TimeRange } from '@kbn/data-plugin/common';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { UnifiedHistogramBucketInterval } from '../../types';
 import { useTimeRange } from './use_time_range';
 

src/plugins/unified_histogram/public/chart/hooks/use_total_hits.test.ts

@@ -12,11 +12,10 @@ import { UnifiedHistogramFetchStatus, UnifiedHistogramInput$ } from '../../types
 import { dataViewWithTimefieldMock } from '../../__mocks__/data_view_with_timefield';
 import { useTotalHits } from './use_total_hits';
 import { useEffect as mockUseEffect } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_source/mocks';
 import { of, Subject, throwError } from 'rxjs';
-import { waitFor } from '@testing-library/react';
+import { waitFor, renderHook } from '@testing-library/react';
 import { RequestAdapter } from '@kbn/inspector-plugin/common';
 import { DataViewType, SearchSourceSearchOptions } from '@kbn/data-plugin/common';
 import { expressionsPluginMock } from '@kbn/expressions-plugin/public/mocks';

src/plugins/unified_histogram/public/container/hooks/use_state_props.test.ts

@@ -9,8 +9,7 @@
 
 import { DataView, DataViewField, DataViewType } from '@kbn/data-views-plugin/common';
 import { RequestAdapter } from '@kbn/inspector-plugin/common';
-import { renderHook } from '@testing-library/react-hooks';
-import { act } from 'react-test-renderer';
+import { waitFor, renderHook, act } from '@testing-library/react';
 import type { DatatableColumn } from '@kbn/expressions-plugin/common';
 import { convertDatatableColumnToDataViewFieldSpec } from '@kbn/data-view-utils';
 import { UnifiedHistogramFetchStatus, UnifiedHistogramSuggestionContext } from '../../types';
@@ -491,7 +490,7 @@ describe('useStateProps', () => {
     `);
   });
 
-  it('should execute callbacks correctly', () => {
+  it('should execute callbacks correctly', async () => {
     const stateService = getStateService({ initialState });
     const { result } = renderHook(() =>
       useStateProps({
@@ -503,6 +502,21 @@ describe('useStateProps', () => {
         columns: undefined,
       })
     );
+
+    await waitFor(() =>
+      expect(result.current).toEqual(
+        expect.objectContaining({
+          onTopPanelHeightChange: expect.any(Function),
+          onTimeIntervalChange: expect.any(Function),
+          onTotalHitsChange: expect.any(Function),
+          onChartHiddenChange: expect.any(Function),
+          onChartLoad: expect.any(Function),
+          onBreakdownFieldChange: expect.any(Function),
+          onSuggestionContextChange: expect.any(Function),
+        })
+      )
+    );
+
     const {
       onTopPanelHeightChange,
       onTimeIntervalChange,

src/plugins/unified_histogram/public/hooks/use_request_params.test.ts

@@ -7,7 +7,7 @@
  * 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 { unifiedHistogramServicesMock } from '../__mocks__/services';
 
 const getUseRequestParams = async () => {

src/plugins/unified_histogram/public/hooks/use_stable_callback.test.ts

@@ -7,7 +7,7 @@
  * 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 { useStableCallback } from './use_stable_callback';
 
 describe('useStableCallback', () => {