[8.x] [React18] Migrate test suites to account for testing library up…

…grades obs-ux-logs-team (#201148) (#201546) # Backport This will backport the following commits from `main` to `8.x`: - [[React18] Migrate test suites to account for testing library upgrades obs-ux-logs-team (#201148)](#201148)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Eyo O. Eyo <[email protected]>
elastic · Nov 25, 2024 · 920e993 · 920e993
1 parent 2285476
commit 920e993
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 26 deletions.
diff --git a/packages/kbn-react-hooks/src/use_boolean/use_boolean.test.ts b/packages/kbn-react-hooks/src/use_boolean/use_boolean.test.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { act, cleanup, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act, cleanup } from '@testing-library/react';
 
 import { useBoolean } from './use_boolean';
 

diff --git a/x-pack/plugins/fields_metadata/public/hooks/use_fields_metadata/use_fields_metadata.test.ts b/x-pack/plugins/fields_metadata/public/hooks/use_fields_metadata/use_fields_metadata.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 
 import { createUseFieldsMetadataHook, UseFieldsMetadataParams } from './use_fields_metadata';
 import { FindFieldsMetadataResponsePayload } from '../../../common/latest';
@@ -46,12 +46,12 @@ describe('useFieldsMetadata', () => {
 
   it('should return the fieldsMetadata value from the API', async () => {
     fieldsMetadataClient.find.mockResolvedValue(mockedFieldsMetadataResponse);
-    const { result, waitForNextUpdate } = renderHook(() => useFieldsMetadata());
+    const { result } = renderHook(() => useFieldsMetadata());
 
     expect(result.current.loading).toBe(true);
     expect(result.current.fieldsMetadata).toEqual(undefined);
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const { fieldsMetadata, loading, error } = result.current;
     expect(fieldsMetadata).toEqual(fields);
@@ -68,21 +68,17 @@ describe('useFieldsMetadata', () => {
       dataset: 'dataset_name',
     };
 
-    const { waitForNextUpdate } = renderHook(() => useFieldsMetadata(params));
+    renderHook(() => useFieldsMetadata(params));
 
-    await waitForNextUpdate();
-
-    expect(fieldsMetadataClient.find).toHaveBeenCalledWith(params);
+    await waitFor(() => expect(fieldsMetadataClient.find).toHaveBeenCalledWith(params));
   });
 
   it('should return an error if the API call fails', async () => {
     const error = new Error('Fetch fields metadata Failed');
     fieldsMetadataClient.find.mockRejectedValueOnce(error);
 
-    const { result, waitForNextUpdate } = renderHook(() => useFieldsMetadata());
-
-    await waitForNextUpdate();
+    const { result } = renderHook(() => useFieldsMetadata());
 
-    expect(result.current.error?.message).toMatch(error.message);
+    await waitFor(() => expect(result.current.error?.message).toMatch(error.message));
   });
 });
diff --git a/...bservability_solution/logs_shared/public/containers/logs/log_summary/log_summary.test.tsx b/...bservability_solution/logs_shared/public/containers/logs/log_summary/log_summary.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 // We are using this inside a `jest.mock` call. Jest requires dynamic dependencies to be prefixed with `mock`
 import { coreMock as mockCoreMock } from '@kbn/core/public/mocks';
 
@@ -56,14 +56,14 @@ describe('useLogSummary hook', () => {
       .mockResolvedValueOnce(firstMockResponse)
       .mockResolvedValueOnce(secondMockResponse);
 
-    const { result, waitForNextUpdate, rerender } = renderHook(
+    const { result, rerender } = renderHook(
       ({ logViewReference }) => useLogSummary(logViewReference, startTimestamp, endTimestamp, null),
       {
         initialProps: { logViewReference: LOG_VIEW_REFERENCE },
       }
     );
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(fetchLogSummaryMock).toHaveBeenCalledTimes(1);
     expect(fetchLogSummaryMock).toHaveBeenLastCalledWith(
@@ -75,7 +75,7 @@ describe('useLogSummary hook', () => {
     expect(result.current.buckets).toEqual(firstMockResponse.data.buckets);
 
     rerender({ logViewReference: CHANGED_LOG_VIEW_REFERENCE });
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(fetchLogSummaryMock).toHaveBeenCalledTimes(2);
     expect(fetchLogSummaryMock).toHaveBeenLastCalledWith(
@@ -101,15 +101,15 @@ describe('useLogSummary hook', () => {
       .mockResolvedValueOnce(firstMockResponse)
       .mockResolvedValueOnce(secondMockResponse);
 
-    const { result, waitForNextUpdate, rerender } = renderHook(
+    const { result, rerender } = renderHook(
       ({ filterQuery }) =>
         useLogSummary(LOG_VIEW_REFERENCE, startTimestamp, endTimestamp, filterQuery),
       {
         initialProps: { filterQuery: 'INITIAL_FILTER_QUERY' },
       }
     );
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(fetchLogSummaryMock).toHaveBeenCalledTimes(1);
     expect(fetchLogSummaryMock).toHaveBeenLastCalledWith(
@@ -121,7 +121,7 @@ describe('useLogSummary hook', () => {
     expect(result.current.buckets).toEqual(firstMockResponse.data.buckets);
 
     rerender({ filterQuery: 'CHANGED_FILTER_QUERY' });
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(fetchLogSummaryMock).toHaveBeenCalledTimes(2);
     expect(fetchLogSummaryMock).toHaveBeenLastCalledWith(
@@ -139,15 +139,15 @@ describe('useLogSummary hook', () => {
       .mockResolvedValueOnce(createMockResponse([]));
 
     const firstRange = createMockDateRange();
-    const { waitForNextUpdate, rerender } = renderHook(
+    const { rerender } = renderHook(
       ({ startTimestamp, endTimestamp }) =>
         useLogSummary(LOG_VIEW_REFERENCE, startTimestamp, endTimestamp, null),
       {
         initialProps: firstRange,
       }
     );
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(fetchLogSummaryMock).toHaveBeenCalledTimes(1);
     expect(fetchLogSummaryMock).toHaveBeenLastCalledWith(
       expect.objectContaining({
@@ -160,7 +160,7 @@ describe('useLogSummary hook', () => {
     const secondRange = createMockDateRange('now-20s', 'now');
 
     rerender(secondRange);
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(fetchLogSummaryMock).toHaveBeenCalledTimes(2);
     expect(fetchLogSummaryMock).toHaveBeenLastCalledWith(
@@ -176,7 +176,7 @@ describe('useLogSummary hook', () => {
     fetchLogSummaryMock.mockResolvedValueOnce(createMockResponse([]));
 
     const firstRange = createMockDateRange();
-    const { waitForNextUpdate, rerender } = renderHook(
+    const { rerender } = renderHook(
       ({ startTimestamp, endTimestamp }) =>
         useLogSummary(LOG_VIEW_REFERENCE, startTimestamp, endTimestamp, null),
       {
@@ -188,7 +188,7 @@ describe('useLogSummary hook', () => {
 
     // intentionally don't wait for an update to test the throttling
     rerender(secondRange);
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(fetchLogSummaryMock).toHaveBeenCalledTimes(1);
     expect(fetchLogSummaryMock).toHaveBeenLastCalledWith(

diff --git a/...ervability_solution/logs_shared/public/utils/data_search/use_data_search_request.test.tsx b/...ervability_solution/logs_shared/public/utils/data_search/use_data_search_request.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import React from 'react';
 import { firstValueFrom, Observable, of, Subject } from 'rxjs';
 import type { ISearchGeneric, IKibanaSearchResponse } from '@kbn/search-types';

diff --git a/...ion/logs_shared/public/utils/data_search/use_latest_partial_data_search_response.test.tsx b/...ion/logs_shared/public/utils/data_search/use_latest_partial_data_search_response.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
 import { IKibanaSearchRequest } from '@kbn/search-types';
 import { ParsedDataSearchRequestDescriptor, ParsedKibanaSearchResponse } from './types';