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

…grades ml-ui (#201161) (#201370) # Backport This will backport the following commits from `main` to `8.x`: - [[React18] Migrate test suites to account for testing library upgrades ml-ui (#201161)](#201161)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Eyo O. Eyo <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
elastic · Nov 26, 2024 · 6241281 · 6241281
1 parent 279795f
commit 6241281
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 65 deletions.
diff --git a/x-pack/packages/ml/data_grid/hooks/use_column_chart.test.tsx b/x-pack/packages/ml/data_grid/hooks/use_column_chart.test.tsx
@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, renderHook } from '@testing-library/react';
 
 import { KBN_FIELD_TYPES } from '@kbn/field-types';
 

diff --git a/x-pack/packages/ml/date_picker/src/hooks/use_timefilter.test.ts b/x-pack/packages/ml/date_picker/src/hooks/use_timefilter.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useDatePickerContext } from './use_date_picker_context';
 import { useTimefilter } from './use_timefilter';
 

diff --git a/x-pack/plugins/aiops/public/components/log_categorization/format_category.test.tsx b/x-pack/plugins/aiops/public/components/log_categorization/format_category.test.tsx
@@ -7,7 +7,7 @@
 
 import type { Category } from '@kbn/aiops-log-pattern-analysis/types';
 import { useCreateFormattedExample } from './format_category';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 jest.mock('../../hooks/use_eui_theme', () => ({
   useIsDarkTheme: () => false,

diff --git a/...s/public/components/log_rate_analysis_results_table/use_copy_to_clipboard_action.test.tsx b/...s/public/components/log_rate_analysis_results_table/use_copy_to_clipboard_action.test.tsx
@@ -7,8 +7,7 @@
 
 import type { ReactElement } from 'react';
 import userEvent from '@testing-library/user-event';
-import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, renderHook } from '@testing-library/react';
 
 import type { SignificantItem } from '@kbn/ml-agg-utils';
 

diff --git a/x-pack/plugins/aiops/public/hooks/use_filters_query.test.tsx b/x-pack/plugins/aiops/public/hooks/use_filters_query.test.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FilterQueryContextProvider, useFilterQueryUpdates } from './use_filters_query';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { dataPluginMock as mockDataPlugin } from '@kbn/data-plugin/public/mocks';
 import type { TimefilterConfig } from '@kbn/data-plugin/public/query';
 import { Timefilter } from '@kbn/data-plugin/public/query';

diff --git a/...ication/common/components/stats_table/components/field_data_row/use_column_chart.test.tsx b/...ication/common/components/stats_table/components/field_data_row/use_column_chart.test.tsx
@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, renderHook } from '@testing-library/react';
 
 import { KBN_FIELD_TYPES } from '@kbn/data-plugin/public';
 

diff --git a/x-pack/plugins/ml/common/types/storage.test.tsx b/x-pack/plugins/ml/common/types/storage.test.tsx
@@ -7,7 +7,8 @@
 
 import type { FC } from 'react';
 import React from 'react';
-import { renderHook, act } from '@testing-library/react-hooks';
+
+import { renderHook, act } from '@testing-library/react';
 
 import type { Storage } from '@kbn/kibana-utils-plugin/public';
 import { StorageContextProvider, useStorage } from '@kbn/ml-local-storage';
@@ -61,54 +62,43 @@ describe('useStorage', () => {
   });
 
   test('updates the storage value', async () => {
-    const { result, waitForNextUpdate } = renderHook(
-      () => useStorage('ml.gettingStarted.isDismissed'),
-      {
-        wrapper: Provider,
-      }
-    );
+    const { result } = renderHook(() => useStorage('ml.gettingStarted.isDismissed'), {
+      wrapper: Provider,
+    });
 
     const [value, setValue] = result.current;
 
     expect(value).toBe(true);
 
     await act(async () => {
       setValue(false);
-      await waitForNextUpdate();
     });
 
     expect(result.current[0]).toBe(false);
     expect(mockSet).toHaveBeenCalledWith('ml.gettingStarted.isDismissed', false);
   });
 
   test('removes the storage value', async () => {
-    const { result, waitForNextUpdate } = renderHook(
-      () => useStorage('ml.gettingStarted.isDismissed'),
-      {
-        wrapper: Provider,
-      }
-    );
+    const { result } = renderHook(() => useStorage('ml.gettingStarted.isDismissed'), {
+      wrapper: Provider,
+    });
 
     const [value, setValue] = result.current;
 
     expect(value).toBe(true);
 
     await act(async () => {
       setValue(undefined);
-      await waitForNextUpdate();
     });
 
     expect(result.current[0]).toBe(undefined);
     expect(mockRemove).toHaveBeenCalledWith('ml.gettingStarted.isDismissed');
   });
 
   test('updates the value on storage event', async () => {
-    const { result, waitForNextUpdate } = renderHook(
-      () => useStorage('ml.gettingStarted.isDismissed'),
-      {
-        wrapper: Provider,
-      }
-    );
+    const { result } = renderHook(() => useStorage('ml.gettingStarted.isDismissed'), {
+      wrapper: Provider,
+    });
 
     expect(result.current[0]).toBe(true);
 
@@ -130,7 +120,6 @@ describe('useStorage', () => {
           newValue: null,
         })
       );
-      await waitForNextUpdate();
     });
 
     expect(result.current[0]).toBe(undefined);
@@ -142,7 +131,6 @@ describe('useStorage', () => {
           newValue: 'false',
         })
       );
-      await waitForNextUpdate();
     });
 
     expect(result.current[0]).toBe(false);

diff --git a/x-pack/plugins/ml/public/application/contexts/ml/ml_notifications_context.test.tsx b/x-pack/plugins/ml/public/application/contexts/ml/ml_notifications_context.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { of, throwError } from 'rxjs';
 import { useMlNotifications, MlNotificationsContextProvider } from './ml_notifications_context';
 import { useStorage } from '@kbn/ml-local-storage';

diff --git a/x-pack/plugins/ml/public/application/hooks/use_as_observable.test.ts b/x-pack/plugins/ml/public/application/hooks/use_as_observable.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import { useAsObservable } from './use_as_observable';
 
 describe('useAsObservable', () => {
@@ -16,6 +16,8 @@ describe('useAsObservable', () => {
   test('provides and observable preserving a reference', () => {
     const { result, rerender } = renderHook(useAsObservable, { initialProps: 1 });
 
+    const initial = result.current;
+
     let observableValue;
     const subscriptionMock = jest.fn((v) => (observableValue = v));
 
@@ -27,15 +29,15 @@ describe('useAsObservable', () => {
 
     act(() => rerender(1));
 
-    expect(result.all[0]).toStrictEqual(result.all[1]);
+    expect(initial).toStrictEqual(result.current);
 
     expect(subscriptionMock).toHaveBeenCalledWith(1);
     expect(subscriptionMock).toHaveBeenCalledTimes(1);
     expect(observableValue).toEqual(1);
   });
 
   test('updates the subject with a new value', async () => {
-    const { result, rerender, waitForNextUpdate } = renderHook(useAsObservable, {
+    const { result, rerender } = renderHook(useAsObservable, {
       initialProps: 'test',
     });
 
@@ -50,7 +52,6 @@ describe('useAsObservable', () => {
 
     await act(async () => {
       rerender('test update');
-      await waitForNextUpdate();
     });
 
     expect(subscriptionMock).toHaveBeenCalledTimes(2);

diff --git a/x-pack/plugins/ml/public/application/routing/use_resolver.test.ts b/x-pack/plugins/ml/public/application/routing/use_resolver.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { useMlKibana, useMlLicenseInfo } from '../contexts/kibana';
 import { usePermissionCheck } from '../capabilities/check_capabilities';
 import { useRouteResolver } from './use_resolver';
@@ -63,8 +63,8 @@ describe('useResolver', () => {
   it.skip('redirects to the access denied page if some required capabilities are missing', async () => {
     (usePermissionCheck as jest.Mock<boolean[]>).mockReturnValueOnce([false]);
 
-    const { waitForNextUpdate } = renderHook(() => useRouteResolver('full', ['canGetCalendars']));
-    await waitForNextUpdate();
+    renderHook(() => useRouteResolver('full', ['canGetCalendars']));
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(useMlKibana().services.application.navigateToUrl).toHaveBeenCalled();
   });
 });
diff --git a/x-pack/plugins/transform/public/app/hooks/use_index_data.test.tsx b/x-pack/plugins/transform/public/app/hooks/use_index_data.test.tsx
@@ -7,8 +7,7 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen, waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, screen, waitFor, renderHook } from '@testing-library/react';
 
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import type { CoreSetup } from '@kbn/core/public';
@@ -47,7 +46,7 @@ describe('Transform: useIndexData()', () => {
       </QueryClientProvider>
     );
 
-    const { result, waitForNextUpdate } = renderHook(
+    const { result } = renderHook(
       () =>
         useIndexData({
           dataView: {
@@ -62,13 +61,13 @@ describe('Transform: useIndexData()', () => {
       { wrapper }
     );
 
-    const IndexObj: UseIndexDataReturnType = result.current;
-
-    await waitForNextUpdate();
+    await waitFor(() => {
+      const IndexObj: UseIndexDataReturnType = result.current;
 
-    expect(IndexObj.errorMessage).toBe('');
-    expect(IndexObj.status).toBe(INDEX_STATUS.UNUSED);
-    expect(IndexObj.tableItems).toEqual([]);
+      expect(IndexObj.errorMessage).toBe('');
+      expect(IndexObj.status).toBe(INDEX_STATUS.UNUSED);
+      expect(IndexObj.tableItems).toEqual([]);
+    });
   });
 
   test('dataView set triggers loading', async () => {
@@ -78,7 +77,7 @@ describe('Transform: useIndexData()', () => {
       </QueryClientProvider>
     );
 
-    const { result, waitForNextUpdate } = renderHook(
+    const { result } = renderHook(
       () =>
         useIndexData({
           dataView: {
@@ -108,11 +107,11 @@ describe('Transform: useIndexData()', () => {
 
     const IndexObj: UseIndexDataReturnType = result.current;
 
-    await waitForNextUpdate();
-
-    expect(IndexObj.errorMessage).toBe('');
-    expect(IndexObj.status).toBe(INDEX_STATUS.LOADING);
-    expect(IndexObj.tableItems).toEqual([]);
+    await waitFor(() => {
+      expect(IndexObj.errorMessage).toBe('');
+      expect(IndexObj.status).toBe(INDEX_STATUS.LOADING);
+      expect(IndexObj.tableItems).toEqual([]);
+    });
   });
 });
 

diff --git a/.../public/app/sections/edit_transform/state_management/edit_transform_flyout_state.test.tsx b/.../public/app/sections/edit_transform/state_management/edit_transform_flyout_state.test.tsx
@@ -6,7 +6,8 @@
  */
 
 import React, { type FC, type PropsWithChildren } from 'react';
-import { act, renderHook } from '@testing-library/react-hooks';
+
+import { renderHook, act } from '@testing-library/react';
 
 import { getTransformConfigMock } from './__mocks__/transform_config';
 

diff --git a/...m/public/app/sections/transform_management/components/transform_list/use_actions.test.tsx b/...m/public/app/sections/transform_management/components/transform_list/use_actions.test.tsx
@@ -7,7 +7,7 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 
 jest.mock('../../../../app_dependencies');
 
@@ -19,12 +19,11 @@ describe('Transform: Transform List Actions', () => {
     const wrapper: FC<PropsWithChildren<unknown>> = ({ children }) => (
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     );
-    const { result, waitForNextUpdate } = renderHook(
-      () => useActions({ forceDisable: false, transformNodes: 1 }),
-      { wrapper }
-    );
+    const { result } = renderHook(() => useActions({ forceDisable: false, transformNodes: 1 }), {
+      wrapper,
+    });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const actions = result.current.actions;
 

diff --git a/...m/public/app/sections/transform_management/components/transform_list/use_columns.test.tsx b/...m/public/app/sections/transform_management/components/transform_list/use_columns.test.tsx
@@ -7,7 +7,7 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 
 import { useColumns } from './use_columns';
 
@@ -19,11 +19,11 @@ describe('Transform: Job List Columns', () => {
     const wrapper: FC<PropsWithChildren<unknown>> = ({ children }) => (
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     );
-    const { result, waitForNextUpdate } = renderHook(() => useColumns([], () => {}, 1, [], false), {
+    const { result } = renderHook(() => useColumns([], () => {}, 1, [], false), {
       wrapper,
     });
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     const columns: ReturnType<typeof useColumns>['columns'] = result.current.columns;