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

…grades kibana-presentation (#201156) (#201321) # Backport This will backport the following commits from `main` to `8.x`: - [[React18] Migrate test suites to account for testing library upgrades kibana-presentation (#201156)](#201156)  ### 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 · 03f474b · 03f474b
1 parent ad17f7a
commit 03f474b
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 70 deletions.
diff --git a/...ins/dashboard/public/dashboard_app/top_nav/add_new_panel/use_get_dashboard_panels.test.ts b/...ins/dashboard/public/dashboard_app/top_nav/add_new_panel/use_get_dashboard_panels.test.ts
@@ -17,7 +17,7 @@ import {
   VisualizationsStart,
   type BaseVisType,
 } from '@kbn/visualizations-plugin/public';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { uiActionsService, visualizationsService } from '../../../services/kibana_services';
 import { useGetDashboardPanels } from './use_get_dashboard_panels';

diff --git a/src/plugins/dashboard/public/dashboard_listing/hooks/use_dashboard_listing_table.test.tsx b/src/plugins/dashboard/public/dashboard_listing/hooks/use_dashboard_listing_table.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 { getDashboardBackupService } from '../../services/dashboard_backup_service';
 import { getDashboardContentManagementService } from '../../services/dashboard_content_management_service';

diff --git a/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx b/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx
@@ -9,8 +9,7 @@
 
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, renderHook } from '@testing-library/react';
 import {
   HelloWorldEmbeddable,
   HelloWorldEmbeddableFactoryDefinition,
@@ -28,18 +27,18 @@ describe('useEmbeddableFactory', () => {
     );
     doStart();
 
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useEmbeddableFactory({ factory: getFactory(), input: { id: 'hello' } })
     );
 
     const [, loading] = result.current;
 
     expect(loading).toBe(true);
 
-    await waitForNextUpdate();
-
-    const [embeddable] = result.current;
-    expect(embeddable).toBeDefined();
+    await waitFor(() => {
+      const [embeddable] = result.current;
+      expect(embeddable).toBeDefined();
+    });
   });
 });
 

diff --git a/.../presentation_panel/public/panel_component/panel_header/presentation_panel_title.test.tsx b/.../presentation_panel/public/panel_component/panel_header/presentation_panel_title.test.tsx
@@ -8,8 +8,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, screen, fireEvent, renderHook } from '@testing-library/react';
 import { usePresentationPanelTitleClickHandler } from './presentation_panel_title';
 
 describe('usePresentationPanelTitleClickHandler', () => {

diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_autoplay_helper.test.tsx b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_autoplay_helper.test.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { FC, PropsWithChildren } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useAutoplayHelper } from './use_autoplay_helper';
 import { WorkpadRoutingContext, WorkpadRoutingContextType } from '../workpad_routing_context';
 

diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_page_sync.test.ts b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_page_sync.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { usePageSync } from './use_page_sync';
 
 const mockDispatch = jest.fn();

diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_refresh_helper.test.tsx b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_refresh_helper.test.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useRefreshHelper } from './use_refresh_helper';
 import { WorkpadRoutingContext, WorkpadRoutingContextType } from '../workpad_routing_context';
 
@@ -31,7 +31,7 @@ const getMockedContext = (context: any) =>
 
 const getContextWrapper =
   (context: WorkpadRoutingContextType) =>
-  ({ children }: PropsWithChildren<unknown>) =>
+  ({ children }: PropsWithChildren) =>
     <WorkpadRoutingContext.Provider value={context}>{children}</WorkpadRoutingContext.Provider>;
 
 describe('useRefreshHelper', () => {
@@ -77,7 +77,7 @@ describe('useRefreshHelper', () => {
     expect(mockDispatch).not.toHaveBeenCalledWith(refreshAction);
 
     state.transient.inFlight = true;
-    // @ts-expect-error @types/react@18 - Type '() => void' has no properties in common with type '{ children?: ReactNode; }'.
+
     rerender(useRefreshHelper);
 
     jest.runAllTimers();

diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_restore_history.test.tsx b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_restore_history.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useRestoreHistory } from './use_restore_history';
 import { encode } from '../route_state';
 

diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.test.tsx b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { useWorkpad } from './use_workpad';
 import { spacesService } from '../../../services/kibana_services';
 
@@ -62,7 +62,7 @@ describe('useWorkpad', () => {
       workpad: workpadResponse,
     });
 
-    const { waitFor, unmount } = renderHook(() => useWorkpad(workpadId, true, getRedirectPath));
+    const { unmount } = renderHook(() => useWorkpad(workpadId, true, getRedirectPath));
 
     try {
       await waitFor(() => expect(mockDispatch).toHaveBeenCalledTimes(3));
@@ -88,7 +88,7 @@ describe('useWorkpad', () => {
       aliasId,
     });
 
-    const { waitFor, unmount } = renderHook(() => useWorkpad(workpadId, true, getRedirectPath));
+    const { unmount } = renderHook(() => useWorkpad(workpadId, true, getRedirectPath));
 
     try {
       await waitFor(() => expect(mockDispatch).toHaveBeenCalledTimes(3));
@@ -118,7 +118,7 @@ describe('useWorkpad', () => {
       aliasPurpose: 'savedObjectConversion',
     });
 
-    const { waitFor, unmount } = renderHook(() => useWorkpad(workpadId, true, getRedirectPath));
+    const { unmount } = renderHook(() => useWorkpad(workpadId, true, getRedirectPath));
     try {
       await waitFor(() => expect(mockRedirectLegacyUrl).toHaveBeenCalled());
       expect(mockRedirectLegacyUrl).toBeCalledWith({

diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad_history.test.ts b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad_history.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useWorkpadHistory } from './use_workpad_history';
 import { encode } from '../route_state';
 

diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad_persist.test.tsx b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad_persist.test.tsx
@@ -4,11 +4,13 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { renderHook } from '@testing-library/react-hooks';
+
+import crypto from 'crypto';
+import { renderHook } from '@testing-library/react';
 import { useWorkpadPersist } from './use_workpad_persist';
 
 const mockGetState = jest.fn();
-const mockUpdateWorkpad = jest.fn();
+const mockUpdateWorkpad = jest.fn(() => Promise.resolve(null));
 const mockUpdateAssets = jest.fn();
 const mockUpdate = jest.fn();
 
@@ -36,53 +38,41 @@ jest.mock('../../../services', () => ({
 }));
 
 describe('useWorkpadPersist', () => {
+  const initialState = {
+    persistent: {
+      workpad: { id: crypto.randomUUID(), some: 'workpad' },
+    },
+    assets: {
+      asset1: 'some asset',
+      asset2: 'other asset',
+    },
+  };
+
   beforeEach(() => {
-    jest.resetAllMocks();
+    // create a default state for each test
+    mockGetState.mockReturnValue(initialState);
   });
 
-  afterAll(() => {
+  afterEach(() => {
     jest.clearAllMocks();
   });
 
   test('initial render does not persist state', () => {
-    const state = {
-      persistent: {
-        workpad: { some: 'workpad' },
-      },
-      assets: {
-        asset1: 'some asset',
-        asset2: 'other asset',
-      },
-    };
-
-    mockGetState.mockReturnValue(state);
-
     renderHook(useWorkpadPersist);
 
     expect(mockUpdateWorkpad).not.toBeCalled();
   });
 
   test('changes to workpad cause a workpad update', () => {
-    const state = {
-      persistent: {
-        workpad: { some: 'workpad' },
-      },
-      assets: {
-        asset1: 'some asset',
-        asset2: 'other asset',
-      },
-    };
-
-    mockGetState.mockReturnValue(state);
-
     const { rerender } = renderHook(useWorkpadPersist);
 
     const newState = {
-      ...state,
+      ...initialState,
       persistent: {
-        workpad: { new: 'workpad' },
+        workpad: { id: crypto.randomUUID(), new: 'workpad' },
       },
     };
+
     mockGetState.mockReturnValue(newState);
 
     rerender();
@@ -91,13 +81,6 @@ describe('useWorkpadPersist', () => {
   });
 
   test('non changes causes no updated', () => {
-    const state = {
-      persistent: {
-        workpad: { some: 'workpad' },
-      },
-    };
-    mockGetState.mockReturnValue(state);
-
     const { rerender } = renderHook(useWorkpadPersist);
 
     rerender();
@@ -106,26 +89,17 @@ describe('useWorkpadPersist', () => {
   });
 
   test('non write permissions causes no updates', () => {
-    const state = {
-      persistent: {
-        workpad: { some: 'workpad' },
-      },
-      transient: {
-        canUserWrite: false,
-      },
-    };
-    mockGetState.mockReturnValue(state);
-
     const { rerender } = renderHook(useWorkpadPersist);
 
     const newState = {
       persistent: {
-        workpad: { new: 'workpad value' },
+        workpad: { id: crypto.randomUUID(), new: 'workpad value' },
       },
       transient: {
         canUserWrite: false,
       },
     };
+
     mockGetState.mockReturnValue(newState);
 
     rerender();