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

…grades kibana-visualizations (#201152) (#201424) # Backport This will backport the following commits from `main` to `8.x`: - [[React18] Migrate test suites to account for testing library upgrades kibana-visualizations (#201152)](#201152)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Eyo O. Eyo <[email protected]>
elastic · Nov 22, 2024 · 3d3701b · 3d3701b
1 parent 722d718
commit 3d3701b
Show file tree

Hide file tree

Showing 15 changed files with 60 additions and 60 deletions.
diff --git a/packages/kbn-visualization-utils/src/debounced_value.test.ts b/packages/kbn-visualization-utils/src/debounced_value.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 { useDebouncedValue } from './debounced_value';
 
 describe('useDebouncedValue', () => {

diff --git a/src/plugins/charts/public/services/active_cursor/use_active_cursor.test.ts b/src/plugins/charts/public/services/active_cursor/use_active_cursor.test.ts
@@ -8,7 +8,7 @@
  */
 
 import { TestScheduler } from 'rxjs/testing';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import type { Chart, PointerEvent } from '@elastic/charts';
 import type { Datatable } from '@kbn/expressions-plugin/public';
 import type { RefObject } from 'react';

diff --git a/src/plugins/charts/public/services/theme/theme.test.tsx b/src/plugins/charts/public/services/theme/theme.test.tsx
@@ -10,8 +10,7 @@
 import React from 'react';
 import { from } from 'rxjs';
 import { take } from 'rxjs';
-import { renderHook, act } from '@testing-library/react-hooks';
-import { render, act as renderAct } from '@testing-library/react';
+import { render, act as renderAct, renderHook, act } from '@testing-library/react';
 
 import { LIGHT_THEME, DARK_THEME } from '@elastic/charts';
 

diff --git a/src/plugins/expressions/public/react_expression_renderer/use_debounced_value.test.ts b/src/plugins/expressions/public/react_expression_renderer/use_debounced_value.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 { useDebouncedValue } from './use_debounced_value';
 
 describe('useDebouncedValue', () => {

diff --git a/src/plugins/expressions/public/react_expression_renderer/use_expression_renderer.test.ts b/src/plugins/expressions/public/react_expression_renderer/use_expression_renderer.test.ts
@@ -8,7 +8,7 @@
  */
 
 import type { RefObject } from 'react';
-import { act, renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import { renderHook, act, RenderHookResult } from '@testing-library/react';
 import { Subject } from 'rxjs';
 import type { IInterpreterRenderHandlers } from '../../common';
 import { ExpressionRendererParams, useExpressionRenderer } from './use_expression_renderer';
@@ -23,7 +23,7 @@ describe('useExpressionRenderer', () => {
     loading$: Subject<void>;
     render$: Subject<number>;
   };
-  let hook: RenderHookResult<ExpressionRendererParams, ReturnType<typeof useExpressionRenderer>>;
+  let hook: RenderHookResult<ReturnType<typeof useExpressionRenderer>, ExpressionRendererParams>;
 
   beforeEach(() => {
     nodeRef = { current: document.createElement('div') };

diff --git a/src/plugins/expressions/public/react_expression_renderer/use_shallow_memo.test.ts b/src/plugins/expressions/public/react_expression_renderer/use_shallow_memo.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 { useShallowMemo } from './use_shallow_memo';
 
 describe('useShallowMemo', () => {

diff --git a/...plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx b/...plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx
@@ -155,7 +155,7 @@ describe('Saved query management list component', () => {
 
   it('should render the saved queries on the selectable component', async () => {
     render(wrapSavedQueriesListComponentInContext(props));
-    expect(await screen.findAllByRole('option')).toHaveLength(1);
+    await waitFor(() => expect(screen.queryAllByRole('option')).toHaveLength(1));
     expect(screen.getByRole('option', { name: 'Test' })).toBeInTheDocument();
   });
 

diff --git a/src/plugins/vis_types/table/public/utils/use/use_pagination.test.ts b/src/plugins/vis_types/table/public/utils/use/use_pagination.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 { AggTypes } from '../../../common';
 import { usePagination } from './use_pagination';
 

diff --git a/src/plugins/vis_types/table/public/utils/use/use_ui_state.test.ts b/src/plugins/vis_types/table/public/utils/use/use_ui_state.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 { waitFor, renderHook, act } from '@testing-library/react';
 import type { PersistedState } from '@kbn/visualizations-plugin/public';
 import { TableVisUiState } from '../../types';
 import { useUiState } from './use_ui_state';
@@ -39,7 +39,7 @@ describe('useUiState', () => {
   });
 
   it('should subscribe on uiState changes and update local state', async () => {
-    const { result, unmount, waitForNextUpdate } = renderHook(() => useUiState(uiState));
+    const { result, unmount } = renderHook(() => useUiState(uiState));
 
     expect(uiState.on).toHaveBeenCalledWith('change', expect.any(Function));
     // @ts-expect-error
@@ -61,18 +61,18 @@ describe('useUiState', () => {
       updateOnChange();
     });
 
-    await waitForNextUpdate();
-
     // should update local state with new values
-    expect(result.current).toEqual({
-      columnsWidth: [],
-      sort: {
-        columnIndex: 1,
-        direction: 'asc',
-      },
-      setColumnsWidth: expect.any(Function),
-      setSort: expect.any(Function),
-    });
+    await waitFor(() =>
+      expect(result.current).toEqual({
+        columnsWidth: [],
+        sort: {
+          columnIndex: 1,
+          direction: 'asc',
+        },
+        setColumnsWidth: expect.any(Function),
+        setSort: expect.any(Function),
+      })
+    );
 
     act(() => {
       updateOnChange();

diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_chrome_visibility.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_chrome_visibility.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 { chromeServiceMock } from '@kbn/core/public/mocks';
 import { useChromeVisibility } from './use_chrome_visibility';

diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_editor_updates.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_editor_updates.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 { EventEmitter } from 'events';
 
 import { useEditorUpdates } from './use_editor_updates';

diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_linked_search_updates.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_linked_search_updates.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 { EventEmitter } from 'events';
 
 import { useLinkedSearchUpdates } from './use_linked_search_updates';

diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_saved_vis_instance.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_saved_vis_instance.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 { waitFor, renderHook } from '@testing-library/react';
 import { EventEmitter } from 'events';
 
 import { setTypes } from '../../../services';
@@ -127,15 +127,15 @@ describe('useSavedVisInstance', () => {
 
   describe('edit saved visualization route', () => {
     test('should load instance and initiate an editor if chrome is set up', async () => {
-      const { result, waitForNextUpdate } = renderHook(() =>
+      const { result } = renderHook(() =>
         useSavedVisInstance(mockServices, eventEmitter, true, undefined, savedVisId)
       );
 
       result.current.visEditorRef.current = document.createElement('div');
       expect(mockGetVisualizationInstance).toHaveBeenCalledWith(mockServices, savedVisId);
       expect(mockGetVisualizationInstance.mock.calls.length).toBe(1);
 
-      await waitForNextUpdate();
+      await waitFor(() => new Promise((resolve) => resolve(null)));
       expect(mockServices.chrome.setBreadcrumbs).toHaveBeenCalledWith('Test Vis');
       expect(mockServices.chrome.docTitle.change).toHaveBeenCalledWith('Test Vis');
       expect(getEditBreadcrumbs).toHaveBeenCalledWith(
@@ -156,7 +156,7 @@ describe('useSavedVisInstance', () => {
         },
         id: 'panel1',
       };
-      const { result, waitForNextUpdate } = renderHook(() =>
+      const { result } = renderHook(() =>
         useSavedVisInstance(
           mockServices,
           eventEmitter,
@@ -171,7 +171,7 @@ describe('useSavedVisInstance', () => {
       expect(mockGetVisualizationInstance).toHaveBeenCalledWith(mockServices, savedVisId);
       expect(mockGetVisualizationInstance.mock.calls.length).toBe(1);
 
-      await waitForNextUpdate();
+      await waitFor(() => new Promise((resolve) => resolve(null)));
       expect(mockServices.chrome.setBreadcrumbs).toHaveBeenCalledWith('Test Vis');
       expect(mockServices.chrome.docTitle.change).toHaveBeenCalledWith('Test Vis');
       expect(getEditBreadcrumbs).toHaveBeenCalledWith(
@@ -189,13 +189,13 @@ describe('useSavedVisInstance', () => {
     });
 
     test('should destroy the editor and the savedVis on unmount if chrome exists', async () => {
-      const { result, unmount, waitForNextUpdate } = renderHook(() =>
+      const { result, unmount } = renderHook(() =>
         useSavedVisInstance(mockServices, eventEmitter, true, undefined, savedVisId)
       );
 
       result.current.visEditorRef.current = document.createElement('div');
 
-      await waitForNextUpdate();
+      await waitFor(() => new Promise((resolve) => resolve(null)));
       unmount();
 
       expect(mockDefaultEditorControllerDestroy.mock.calls.length).toBe(1);
@@ -215,7 +215,7 @@ describe('useSavedVisInstance', () => {
     });
 
     test('should create new visualization based on search params', async () => {
-      const { result, waitForNextUpdate } = renderHook(() =>
+      const { result } = renderHook(() =>
         useSavedVisInstance(mockServices, eventEmitter, true, undefined, undefined)
       );
 
@@ -226,7 +226,7 @@ describe('useSavedVisInstance', () => {
         type: 'area',
       });
 
-      await waitForNextUpdate();
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       expect(getCreateBreadcrumbs).toHaveBeenCalled();
       expect(mockEmbeddableHandlerRender).not.toHaveBeenCalled();
@@ -263,7 +263,7 @@ describe('useSavedVisInstance', () => {
 
   describe('embeded mode', () => {
     test('should create new visualization based on search params', async () => {
-      const { result, unmount, waitForNextUpdate } = renderHook(() =>
+      const { result, unmount } = renderHook(() =>
         useSavedVisInstance(mockServices, eventEmitter, false, undefined, savedVisId)
       );
 
@@ -273,7 +273,7 @@ describe('useSavedVisInstance', () => {
 
       expect(mockGetVisualizationInstance).toHaveBeenCalledWith(mockServices, savedVisId);
 
-      await waitForNextUpdate();
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       expect(mockEmbeddableHandlerRender).toHaveBeenCalled();
       expect(result.current.visEditorController).toBeUndefined();

diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.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 { act, waitFor, renderHook } from '@testing-library/react';
 import { EventEmitter } from 'events';
 import { Observable } from 'rxjs';
 
@@ -159,11 +159,11 @@ describe('useVisualizeAppState', () => {
 
     it('should successfully update vis state and set up app state container', async () => {
       stateContainerGetStateMock.mockImplementation(() => state);
-      const { result, waitForNextUpdate } = renderHook(() =>
+      const { result } = renderHook(() =>
         useVisualizeAppState(mockServices, eventEmitter, savedVisInstance)
       );
 
-      await waitForNextUpdate();
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       const { aggs, ...visState } = stateContainer.getState().vis;
       const expectedNewVisState = {
@@ -183,11 +183,11 @@ describe('useVisualizeAppState', () => {
         ...visualizeAppStateStub,
         query: { query: 'test', language: 'kuery' },
       }));
-      const { result, waitForNextUpdate } = renderHook(() =>
+      const { result } = renderHook(() =>
         useVisualizeAppState(mockServices, eventEmitter, savedVisInstance)
       );
 
-      await waitForNextUpdate();
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       const { aggs, ...visState } = stateContainer.getState().vis;
       const expectedNewVisState = {

diff --git a/x-pack/plugins/graph/public/helpers/use_workspace_loader.test.tsx b/x-pack/plugins/graph/public/helpers/use_workspace_loader.test.tsx
@@ -10,7 +10,7 @@ import { spacesPluginMock } from '@kbn/spaces-plugin/public/mocks';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { createMockGraphStore } from '../state_management/mocks';
 import { Workspace } from '../types';
-import { renderHook, act, RenderHookOptions } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { ContentClient } from '@kbn/content-management-plugin/public';
 
 jest.mock('react-router-dom', () => {
@@ -51,15 +51,16 @@ describe('use_workspace_loader', () => {
   };
 
   it('should not redirect if outcome is exactMatch', async () => {
-    await act(async () => {
-      renderHook(
-        () => useWorkspaceLoader(defaultProps),
-        defaultProps as RenderHookOptions<UseWorkspaceLoaderProps>
-      );
+    renderHook((props) => useWorkspaceLoader(props), {
+      initialProps: defaultProps,
+    });
+
+    await waitFor(() => {
+      expect(defaultProps.spaces?.ui.redirectLegacyUrl).not.toHaveBeenCalled();
+      expect(defaultProps.store.dispatch).toHaveBeenCalled();
     });
-    expect(defaultProps.spaces?.ui.redirectLegacyUrl).not.toHaveBeenCalled();
-    expect(defaultProps.store.dispatch).toHaveBeenCalled();
   });
+
   it('should redirect if outcome is aliasMatch', async () => {
     const props = {
       ...defaultProps,
@@ -77,16 +78,16 @@ describe('use_workspace_loader', () => {
       },
     } as unknown as UseWorkspaceLoaderProps;
 
-    await act(async () => {
-      renderHook(
-        () => useWorkspaceLoader(props),
-        props as RenderHookOptions<UseWorkspaceLoaderProps>
-      );
-    });
-    expect(props.spaces?.ui.redirectLegacyUrl).toHaveBeenCalledWith({
-      path: '#/workspace/aliasTargetId?query={}',
-      aliasPurpose: 'savedObjectConversion',
-      objectNoun: 'Graph',
+    renderHook((_props) => useWorkspaceLoader(_props), {
+      initialProps: props,
     });
+
+    await waitFor(() =>
+      expect(props.spaces?.ui.redirectLegacyUrl).toHaveBeenCalledWith({
+        path: '#/workspace/aliasTargetId?query={}',
+        aliasPurpose: 'savedObjectConversion',
+        objectNoun: 'Graph',
+      })
+    );
   });
 });