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

…grades obs-ux-management-team (#201164) (#203414) # Backport This will backport the following commits from `main` to `8.x`: - [[React18] Migrate test suites to account for testing library upgrades obs-ux-management-team (#201164)](#201164)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Eyo O. Eyo <[email protected]>
elastic · Dec 11, 2024 · 3720840 · 3720840
1 parent 0f28d24
commit 3720840
Show file tree

Hide file tree

Showing 37 changed files with 437 additions and 461 deletions.
diff --git a/x-pack/packages/observability/alert_details/src/hooks/use_alerts_history.test.tsx b/x-pack/packages/observability/alert_details/src/hooks/use_alerts_history.test.tsx
@@ -6,13 +6,9 @@
  */
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
-import {
-  type UseAlertsHistory,
-  useAlertsHistory,
-  type Props as useAlertsHistoryProps,
-} from './use_alerts_history';
+import { useAlertsHistory } from './use_alerts_history';
 
 const queryClient = new QueryClient({
   logger: {
@@ -44,7 +40,7 @@ describe('useAlertsHistory', () => {
 
   it('returns no data with error when http client is not provided', async () => {
     const http = undefined;
-    const { result, waitFor } = renderHook<useAlertsHistoryProps, UseAlertsHistory>(
+    const { result } = renderHook(
       () =>
         useAlertsHistory({
           http,
@@ -56,18 +52,14 @@ describe('useAlertsHistory', () => {
         wrapper,
       }
     );
-    await act(async () => {
-      await waitFor(() => result.current.isError);
-    });
-    expect(result.current.isError).toBeTruthy();
+    await waitFor(() => expect(result.current.isError).toBeTruthy());
     expect(result.current.isSuccess).toBeFalsy();
     expect(result.current.isLoading).toBeFalsy();
   });
 
   it('returns no data when API error', async () => {
     mockServices.http.post.mockRejectedValueOnce(new Error('ES error'));
-
-    const { result, waitFor } = renderHook<useAlertsHistoryProps, UseAlertsHistory>(
+    const { result } = renderHook(
       () =>
         useAlertsHistory({
           ...mockServices,
@@ -79,10 +71,7 @@ describe('useAlertsHistory', () => {
         wrapper,
       }
     );
-    await act(async () => {
-      await waitFor(() => result.current.isError);
-    });
-    expect(result.current.isError).toBeTruthy();
+    await waitFor(() => expect(result.current.isError).toBeTruthy());
     expect(result.current.isSuccess).toBeFalsy();
     expect(result.current.isLoading).toBeFalsy();
   });
@@ -130,7 +119,7 @@ describe('useAlertsHistory', () => {
       },
     });
 
-    const { result, waitFor } = renderHook<useAlertsHistoryProps, UseAlertsHistory>(
+    const { result } = renderHook(
       () =>
         useAlertsHistory({
           ...mockServices,
@@ -142,9 +131,7 @@ describe('useAlertsHistory', () => {
         wrapper,
       }
     );
-    await act(async () => {
-      await waitFor(() => result.current.isSuccess);
-    });
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
     expect(result.current.isLoading).toBeFalsy();
     expect(result.current.isError).toBeFalsy();
     expect(result.current.data.avgTimeToRecoverUS).toEqual(134959464.2857143);
@@ -167,7 +154,7 @@ describe('useAlertsHistory', () => {
       },
     });
 
-    const { result, waitFor } = renderHook<useAlertsHistoryProps, UseAlertsHistory>(
+    const { result } = renderHook(
       () =>
         useAlertsHistory({
           ...mockServices,
@@ -181,11 +168,7 @@ describe('useAlertsHistory', () => {
         wrapper,
       }
     );
-
-    await act(async () => {
-      await waitFor(() => result.current.isSuccess);
-    });
-
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
     expect(mockServices.http.post).toBeCalledWith('/internal/rac/alerts/find', {
       body:
         '{"size":0,"rule_type_ids":["apm"],"consumers":["foo"],"query":{"bool":{"must":[' +
@@ -215,7 +198,7 @@ describe('useAlertsHistory', () => {
       },
     });
 
-    const { result, waitFor } = renderHook<useAlertsHistoryProps, UseAlertsHistory>(
+    const { result } = renderHook(
       () =>
         useAlertsHistory({
           ...mockServices,
@@ -229,10 +212,7 @@ describe('useAlertsHistory', () => {
       }
     );
 
-    await act(async () => {
-      await waitFor(() => result.current.isSuccess);
-    });
-
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
     expect(mockServices.http.post).toBeCalledWith('/internal/rac/alerts/find', {
       body:
         '{"size":0,"rule_type_ids":["apm"],"query":{"bool":{"must":[' +

diff --git a/...oratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx b/...oratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 
 import { allSeriesKey, reportTypeKey, UrlStorageContextProvider } from './use_series_storage';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useLensAttributes } from './use_lens_attributes';
 import { ReportTypes } from '../configurations/constants';
 import { mockDataView } from '../rtl_helpers';
@@ -66,9 +66,15 @@ describe('useExpViewTimeRange', function () {
     jest.spyOn(lensHook, 'useLensFormulaHelper').mockReturnValue(formulaHelper);
   });
 
-  const lensAttributesSpy = jest.spyOn(lensAttributes, 'LensAttributes');
+  const lensAttributesSpy = jest
+    .spyOn(lensAttributes, 'LensAttributes')
+    .mockImplementation(function (...args) {
+      return {
+        getJSON: () => {},
+      } as lensAttributes.LensAttributes;
+    });
 
-  function Wrapper({ children }: { children: JSX.Element }) {
+  function Wrapper({ children }: React.PropsWithChildren) {
     return (
       <ExploratoryViewContextProvider
         reportTypes={reportTypesList}
@@ -78,7 +84,9 @@ describe('useExpViewTimeRange', function () {
         theme$={themeServiceMock.createTheme$()}
         {...coreMock.createStart()}
       >
-        <UrlStorageContextProvider storage={storage}>{children}</UrlStorageContextProvider>
+        <UrlStorageContextProvider storage={storage}>
+          {React.createElement(React.Fragment, {}, children)}
+        </UrlStorageContextProvider>
       </ExploratoryViewContextProvider>
     );
   }

diff --git a/...loratory_view/public/components/shared/exploratory_view/hooks/use_series_storage.test.tsx b/...loratory_view/public/components/shared/exploratory_view/hooks/use_series_storage.test.tsx
@@ -6,9 +6,8 @@
  */
 
 import React, { useEffect } from 'react';
-import { act, renderHook } from '@testing-library/react-hooks';
 import { Router, Route } from '@kbn/shared-ux-router';
-import { render } from '@testing-library/react';
+import { render, renderHook, act } from '@testing-library/react';
 import { UrlStorageContextProvider, useSeriesStorage, reportTypeKey } from './use_series_storage';
 import { getHistoryFromUrl } from '../rtl_helpers';
 import type { AppDataType } from '../types';
@@ -135,7 +134,7 @@ describe('userSeriesStorage', function () {
   });
 
   it('ensures that only one series has a breakdown', () => {
-    function wrapper({ children }: { children: React.ReactElement }) {
+    function wrapper({ children }: React.PropsWithChildren) {
       return (
         <UrlStorageContextProvider
           storage={{
@@ -145,7 +144,7 @@ describe('userSeriesStorage', function () {
             set: jest.fn(),
           }}
         >
-          {children}
+          {React.createElement(React.Fragment, {}, children)}
         </UrlStorageContextProvider>
       );
     }
@@ -166,7 +165,7 @@ describe('userSeriesStorage', function () {
 
   it('sets reportType when calling applyChanges', () => {
     const setStorage = jest.fn();
-    function wrapper({ children }: { children: React.ReactElement }) {
+    function wrapper({ children }: React.PropsWithChildren) {
       return (
         <UrlStorageContextProvider
           storage={{
@@ -178,7 +177,7 @@ describe('userSeriesStorage', function () {
             set: setStorage,
           }}
         >
-          {children}
+          {React.createElement(React.Fragment, {}, children)}
         </UrlStorageContextProvider>
       );
     }
@@ -197,7 +196,7 @@ describe('userSeriesStorage', function () {
 
   it('returns reportType in state, not url storage, from hook', () => {
     const setStorage = jest.fn();
-    function wrapper({ children }: { children: React.ReactElement }) {
+    function wrapper({ children }: React.PropsWithChildren) {
       return (
         <UrlStorageContextProvider
           storage={{
@@ -209,7 +208,7 @@ describe('userSeriesStorage', function () {
             set: setStorage,
           }}
         >
-          {children}
+          {React.createElement(React.Fragment, {}, children)}
         </UrlStorageContextProvider>
       );
     }
@@ -225,7 +224,7 @@ describe('userSeriesStorage', function () {
   it('ensures that telemetry is called', () => {
     const trackEvent = jest.fn();
     jest.spyOn(useTrackMetric, 'useUiTracker').mockReturnValue(trackEvent);
-    function wrapper({ children }: { children: React.ReactElement }) {
+    function wrapper({ children }: React.PropsWithChildren) {
       return (
         <UrlStorageContextProvider
           storage={{
@@ -237,7 +236,7 @@ describe('userSeriesStorage', function () {
             set: jest.fn(),
           }}
         >
-          {children}
+          {React.createElement(React.Fragment, {}, children)}
         </UrlStorageContextProvider>
       );
     }

diff --git a/.../exploratory_view/public/components/shared/exploratory_view/hooks/use_time_range.test.tsx b/.../exploratory_view/public/components/shared/exploratory_view/hooks/use_time_range.test.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 
 import { allSeriesKey, reportTypeKey, UrlStorageContextProvider } from './use_series_storage';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useExpViewTimeRange } from './use_time_range';
 import { ReportTypes } from '../configurations/constants';
 import { createKbnUrlStateStorage } from '@kbn/kibana-utils-plugin/public';
@@ -43,9 +43,14 @@ const mockMultipleSeries = [
 describe('useExpViewTimeRange', function () {
   const storage = createKbnUrlStateStorage({ useHash: false });
 
-  function Wrapper({ children }: { children: JSX.Element }) {
-    return <UrlStorageContextProvider storage={storage}>{children}</UrlStorageContextProvider>;
+  function Wrapper({ children }: React.PropsWithChildren) {
+    return (
+      <UrlStorageContextProvider storage={storage}>
+        {React.createElement(React.Fragment, {}, children)}
+      </UrlStorageContextProvider>
+    );
   }
+
   it('should return expected result when there is one series', async function () {
     await storage.set(allSeriesKey, mockSingleSeries);
     await storage.set(reportTypeKey, ReportTypes.KPI);