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

…grades obs-ux-infra_services-team (#201168) (#201608) # Backport This will backport the following commits from `main` to `8.x`: - [[React18] Migrate test suites to account for testing library upgrades obs-ux-infra_services-team (#201168)](#201168)  ### 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 · 874d6df · 874d6df
1 parent 5d9b7fa
commit 874d6df
Show file tree

Hide file tree

Showing 36 changed files with 394 additions and 312 deletions.
diff --git a/...tion/apm/public/components/app/correlations/use_failed_transactions_correlations.test.tsx b/...tion/apm/public/components/app/correlations/use_failed_transactions_correlations.test.tsx
@@ -5,10 +5,11 @@
  * 2.0.
  */
 
-import React, { ReactNode } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { merge } from 'lodash';
 import { createMemoryHistory } from 'history';
-import { renderHook, act } from '@testing-library/react-hooks';
+
+import { act, waitFor, renderHook } from '@testing-library/react';
 
 import { ApmPluginContextValue } from '../../../context/apm_plugin/apm_plugin_context';
 import {
@@ -22,7 +23,7 @@ import { fromQuery } from '../../shared/links/url_helpers';
 import { useFailedTransactionsCorrelations } from './use_failed_transactions_correlations';
 import type { APIEndpoint } from '../../../../server';
 
-function wrapper({ children, error = false }: { children?: ReactNode; error: boolean }) {
+function wrapper({ children, error = false }: PropsWithChildren<{ error?: boolean }>) {
   const getHttpMethodMock = (method: 'GET' | 'POST') =>
     jest.fn().mockImplementation(async (pathname) => {
       await delay(100);
@@ -107,39 +108,40 @@ describe('useFailedTransactionsCorrelations', () => {
         wrapper,
       });
 
-      try {
+      await waitFor(() =>
         expect(result.current.progress).toEqual({
           isRunning: true,
           loaded: 0,
-        });
-        expect(result.current.response).toEqual({ ccsWarning: false });
-        expect(typeof result.current.startFetch).toEqual('function');
-        expect(typeof result.current.cancelFetch).toEqual('function');
-      } finally {
-        unmount();
-      }
+        })
+      );
+
+      expect(result.current.response).toEqual({ ccsWarning: false });
+      expect(result.current.startFetch).toEqual(expect.any(Function));
+      expect(result.current.cancelFetch).toEqual(expect.any(Function));
+
+      unmount();
     });
 
     it('should not have received any results after 50ms', async () => {
       const { result, unmount } = renderHook(() => useFailedTransactionsCorrelations(), {
         wrapper,
       });
 
-      try {
-        jest.advanceTimersByTime(50);
+      jest.advanceTimersByTime(50);
 
+      await waitFor(() =>
         expect(result.current.progress).toEqual({
           isRunning: true,
           loaded: 0,
-        });
-        expect(result.current.response).toEqual({ ccsWarning: false });
-      } finally {
-        unmount();
-      }
+        })
+      );
+
+      expect(result.current.response).toEqual({ ccsWarning: false });
+      unmount();
     });
 
     it('should receive partial updates and finish running', async () => {
-      const { result, unmount, waitFor } = renderHook(() => useFailedTransactionsCorrelations(), {
+      const { result, unmount } = renderHook(() => useFailedTransactionsCorrelations(), {
         wrapper,
       });
 
@@ -253,29 +255,37 @@ describe('useFailedTransactionsCorrelations', () => {
   });
   describe('when throwing an error', () => {
     it('should automatically start fetching results', async () => {
-      const { result, unmount } = renderHook(() => useFailedTransactionsCorrelations(), {
-        wrapper,
-        initialProps: {
-          error: true,
-        },
+      const { result, unmount } = renderHook(useFailedTransactionsCorrelations, {
+        wrapper: ({ children }) =>
+          React.createElement(
+            wrapper,
+            {
+              error: true,
+            },
+            children
+          ),
       });
 
-      try {
+      await waitFor(() =>
         expect(result.current.progress).toEqual({
           isRunning: true,
           loaded: 0,
-        });
-      } finally {
-        unmount();
-      }
+        })
+      );
+
+      unmount();
     });
 
     it('should still be running after 50ms', async () => {
-      const { result, unmount } = renderHook(() => useFailedTransactionsCorrelations(), {
-        wrapper,
-        initialProps: {
-          error: true,
-        },
+      const { result, unmount } = renderHook(useFailedTransactionsCorrelations, {
+        wrapper: ({ children }) =>
+          React.createElement(
+            wrapper,
+            {
+              error: true,
+            },
+            children
+          ),
       });
 
       try {
@@ -292,11 +302,15 @@ describe('useFailedTransactionsCorrelations', () => {
     });
 
     it('should stop and return an error after more than 100ms', async () => {
-      const { result, unmount, waitFor } = renderHook(() => useFailedTransactionsCorrelations(), {
-        wrapper,
-        initialProps: {
-          error: true,
-        },
+      const { result, unmount } = renderHook(useFailedTransactionsCorrelations, {
+        wrapper: ({ children }) =>
+          React.createElement(
+            wrapper,
+            {
+              error: true,
+            },
+            children
+          ),
       });
 
       try {
@@ -316,7 +330,7 @@ describe('useFailedTransactionsCorrelations', () => {
 
   describe('when canceled', () => {
     it('should stop running', async () => {
-      const { result, unmount, waitFor } = renderHook(() => useFailedTransactionsCorrelations(), {
+      const { result, unmount } = renderHook(() => useFailedTransactionsCorrelations(), {
         wrapper,
       });
 

diff --git a/...ability_solution/apm/public/components/app/correlations/use_latency_correlations.test.tsx b/...ability_solution/apm/public/components/app/correlations/use_latency_correlations.test.tsx
@@ -5,10 +5,11 @@
  * 2.0.
  */
 
-import React, { ReactNode } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { merge } from 'lodash';
 import { createMemoryHistory } from 'history';
-import { renderHook, act } from '@testing-library/react-hooks';
+
+import { act, waitFor, renderHook } from '@testing-library/react';
 
 import { ApmPluginContextValue } from '../../../context/apm_plugin/apm_plugin_context';
 import {
@@ -22,7 +23,7 @@ import { fromQuery } from '../../shared/links/url_helpers';
 import { useLatencyCorrelations } from './use_latency_correlations';
 import type { APIEndpoint } from '../../../../server';
 
-function wrapper({ children, error = false }: { children?: ReactNode; error: boolean }) {
+function wrapper({ children, error = false }: PropsWithChildren<{ error?: boolean }>) {
   const getHttpMethodMock = (method: 'GET' | 'POST') =>
     jest.fn().mockImplementation(async (pathname) => {
       await delay(100);
@@ -86,16 +87,17 @@ function wrapper({ children, error = false }: { children?: ReactNode; error: boo
 }
 
 describe('useLatencyCorrelations', () => {
-  beforeEach(async () => {
-    jest.useFakeTimers({ legacyFakeTimers: true });
-  });
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
   describe('when successfully loading results', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
     it('should automatically start fetching results', async () => {
-      const { result, unmount } = renderHook(() => useLatencyCorrelations(), {
+      const { result, unmount } = renderHook(useLatencyCorrelations, {
         wrapper,
       });
 
@@ -113,7 +115,7 @@ describe('useLatencyCorrelations', () => {
     });
 
     it('should not have received any results after 50ms', async () => {
-      const { result, unmount } = renderHook(() => useLatencyCorrelations(), {
+      const { result, unmount } = renderHook(useLatencyCorrelations, {
         wrapper,
       });
 
@@ -131,7 +133,7 @@ describe('useLatencyCorrelations', () => {
     });
 
     it('should receive partial updates and finish running', async () => {
-      const { result, unmount, waitFor } = renderHook(() => useLatencyCorrelations(), {
+      const { result, unmount } = renderHook(useLatencyCorrelations, {
         wrapper,
       });
 
@@ -213,12 +215,17 @@ describe('useLatencyCorrelations', () => {
   });
 
   describe('when throwing an error', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
     it('should automatically start fetching results', async () => {
-      const { result, unmount } = renderHook(() => useLatencyCorrelations(), {
-        wrapper,
-        initialProps: {
-          error: true,
-        },
+      const { result, unmount } = renderHook(useLatencyCorrelations, {
+        wrapper: ({ children }) => wrapper({ children, error: true }),
       });
 
       try {
@@ -232,11 +239,8 @@ describe('useLatencyCorrelations', () => {
     });
 
     it('should still be running after 50ms', async () => {
-      const { result, unmount } = renderHook(() => useLatencyCorrelations(), {
-        wrapper,
-        initialProps: {
-          error: true,
-        },
+      const { result, unmount } = renderHook(useLatencyCorrelations, {
+        wrapper: ({ children }) => wrapper({ children, error: true }),
       });
 
       try {
@@ -253,31 +257,38 @@ describe('useLatencyCorrelations', () => {
     });
 
     it('should stop and return an error after more than 100ms', async () => {
-      const { result, unmount, waitFor } = renderHook(() => useLatencyCorrelations(), {
-        wrapper,
-        initialProps: {
-          error: true,
-        },
+      const { result, unmount } = renderHook(useLatencyCorrelations, {
+        wrapper: ({ children }) => wrapper({ children, error: true }),
       });
 
       try {
-        jest.advanceTimersByTime(150);
-        await waitFor(() => expect(result.current.progress.error).toBeDefined());
-
-        expect(result.current.progress).toEqual({
-          error: 'Something went wrong',
-          isRunning: false,
-          loaded: 0,
+        act(() => {
+          jest.advanceTimersByTime(150);
         });
+        await waitFor(() =>
+          expect(result.current.progress).toEqual({
+            error: 'Something went wrong',
+            isRunning: false,
+            loaded: 0,
+          })
+        );
       } finally {
         unmount();
       }
     });
   });
 
   describe('when canceled', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
     it('should stop running', async () => {
-      const { result, unmount, waitFor } = renderHook(() => useLatencyCorrelations(), {
+      const { result, unmount } = renderHook(useLatencyCorrelations, {
         wrapper,
       });
 

diff --git a/...ervability_solution/apm/public/components/app/infra_overview/infra_tabs/use_tabs.test.tsx b/...ervability_solution/apm/public/components/app/infra_overview/infra_tabs/use_tabs.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { ReactNode } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useTabs } from './use_tabs';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
 import { CoreStart } from '@kbn/core/public';

diff --git a/...lugins/observability_solution/apm/public/components/app/service_map/empty_banner.test.tsx b/...lugins/observability_solution/apm/public/components/app/service_map/empty_banner.test.tsx
@@ -58,11 +58,12 @@ describe('EmptyBanner', () => {
     it('does not render null', async () => {
       const component = renderWithTheme(<EmptyBanner />, { wrapper });
 
-      await act(async () => {
+      act(() => {
         cy.add({ data: { id: 'test id' } });
-        await waitFor(() => {
-          expect(component.container.children.length).toBeGreaterThan(0);
-        });
+      });
+
+      await waitFor(() => {
+        expect(component.container.children.length).toBeGreaterThan(0);
       });
     });
   });

diff --git a/...lity_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.test.tsx b/...lity_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
 import { EuiTheme } from '@kbn/kibana-react-plugin/common';

diff --git a/...k/plugins/observability_solution/apm/public/components/app/trace_link/trace_link.test.tsx b/...k/plugins/observability_solution/apm/public/components/app/trace_link/trace_link.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act, render, waitFor } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { shallow } from 'enzyme';
 import React, { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
@@ -67,12 +67,9 @@ describe('TraceLink', () => {
       },
     });
 
-    let result;
-    act(() => {
-      const component = render(<TraceLink />, renderOptions);
+    const component = render(<TraceLink />, renderOptions);
 
-      result = component.getByText('Fetching trace...');
-    });
+    const result = component.getByText('Fetching trace...');
     await waitFor(() => {});
     expect(result).toBeDefined();
   });

diff --git a/...y_solution/apm/public/components/routing/templates/apm_service_template/use_tabs.test.tsx b/...y_solution/apm/public/components/routing/templates/apm_service_template/use_tabs.test.tsx
@@ -6,7 +6,7 @@
  */
 import { CoreStart } from '@kbn/core/public';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import React, { ReactNode } from 'react';
 import { ServerlessType } from '../../../../../common/serverless';

diff --git a/...bility_solution/apm/public/components/shared/charts/timeline/marker/error_marker.test.tsx b/...bility_solution/apm/public/components/shared/charts/timeline/marker/error_marker.test.tsx
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import { fireEvent } from '@testing-library/react';
-import { act } from '@testing-library/react-hooks';
+import { fireEvent, act } from '@testing-library/react';
 import React, { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { MockApmPluginContextWrapper } from '../../../../../context/apm_plugin/mock_apm_plugin_context';