[8.x] [React18] Migrate test suites to account for testing library upgrades 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)](https://github.com/elastic/kibana/pull/201156)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Eyo O. Eyo <7893459+eokoneyo@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2024-11-22 21:39:28 +11:00 · 2024-11-22 21:39:28 +11:00 · 03f474b157
commit 03f474b157
parent ad17f7aafc
11 changed files with 42 additions and 70 deletions
--- a/src/plugins/dashboard/public/dashboard_app/top_nav/add_new_panel/use_get_dashboard_panels.test.ts
+++ b/src/plugins/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';
--- 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';
--- 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,7 +27,7 @@ describe('useEmbeddableFactory', () => {
    );
    doStart();

-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
      useEmbeddableFactory({ factory: getFactory(), input: { id: 'hello' } })
    );

@ -36,10 +35,10 @@ describe('useEmbeddableFactory', () => {

    expect(loading).toBe(true);

-    await waitForNextUpdate();
-
-    const [embeddable] = result.current;
-    expect(embeddable).toBeDefined();
+    await waitFor(() => {
+      const [embeddable] = result.current;
+      expect(embeddable).toBeDefined();
+    });
  });
 });

--- a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_title.test.tsx
+++ b/src/plugins/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', () => {
--- 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';

--- 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();
--- 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();
--- 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';

--- 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({
--- 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';

--- 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();