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

…grades fleet (#201166) (#201323) # Backport This will backport the following commits from `main` to `8.x`: - [[React18] Migrate test suites to account for testing library upgrades fleet (#201166)](#201166)  ### 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 · ac4caed · ac4caed
1 parent 8a32e35
commit ac4caed
Show file tree

Hide file tree

Showing 23 changed files with 170 additions and 196 deletions.
diff --git a/x-pack/plugins/fleet/public/applications/fleet/hooks/use_apm_service_href.test.ts b/x-pack/plugins/fleet/public/applications/fleet/hooks/use_apm_service_href.test.ts
@@ -4,7 +4,8 @@
  * 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 { waitFor, renderHook } from '@testing-library/react';
 
 import type { DataStream } from '../types';
 import * as useLocatorModule from '../../../hooks/use_locator';
@@ -29,12 +30,12 @@ describe('useApmServiceHref hook', () => {
       package: 'elastic_agent',
     } as DataStream;
 
-    const { result, waitForNextUpdate } = renderHook(() => useAPMServiceDetailHref(datastream));
-
-    await waitForNextUpdate();
+    const { result } = renderHook(() => useAPMServiceDetailHref(datastream));
 
-    expect(result.current).toMatchObject({ isSuccessful: true, href: undefined });
-    expect(apmLocatorMock).not.toBeCalled();
+    await waitFor(() => {
+      expect(result.current).toMatchObject({ isSuccessful: true, href: undefined });
+      expect(apmLocatorMock).not.toBeCalled();
+    });
   });
 
   const testCases = [
@@ -83,12 +84,12 @@ describe('useApmServiceHref hook', () => {
   it.each(testCases)(
     'it passes the correct params to apm locator for %s',
     async (datastream, locatorParams) => {
-      const { result, waitForNextUpdate } = renderHook(() => useAPMServiceDetailHref(datastream));
-
-      await waitForNextUpdate();
+      const { result } = renderHook(() => useAPMServiceDetailHref(datastream));
 
-      expect(result.current).toMatchObject({ isSuccessful: true, href: '' });
-      expect(apmLocatorMock).toBeCalledWith(expect.objectContaining(locatorParams));
+      await waitFor(() => {
+        expect(result.current).toMatchObject({ isSuccessful: true, href: '' });
+        expect(apmLocatorMock).toBeCalledWith(expect.objectContaining(locatorParams));
+      });
     }
   );
 });
diff --git a/...ations/fleet/sections/agent_policy/components/agent_policy_advanced_fields/hooks.test.tsx b/...ations/fleet/sections/agent_policy/components/agent_policy_advanced_fields/hooks.test.tsx
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { waitFor } from '@testing-library/react';
+
 import { createFleetTestRendererMock } from '../../../../../../mock';
 import type { MockedFleetStartServices } from '../../../../../../mock';
 import { useLicense } from '../../../../../../hooks/use_license';
@@ -189,12 +191,10 @@ describe('useOutputOptions', () => {
       hasAtLeast: () => true,
     } as unknown as LicenseService);
     mockApiCallsWithOutputs(testRenderer.startServices.http);
-    const { result, waitForNextUpdate } = testRenderer.renderHook(() =>
-      useOutputOptions({} as AgentPolicy)
-    );
+    const { result } = testRenderer.renderHook(() => useOutputOptions({} as AgentPolicy));
     expect(result.current.isLoading).toBeTruthy();
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(result.current.dataOutputOptions).toMatchInlineSnapshot(`
       Array [
         Object {
@@ -317,12 +317,10 @@ describe('useOutputOptions', () => {
       hasAtLeast: () => false,
     } as unknown as LicenseService);
     mockApiCallsWithOutputs(testRenderer.startServices.http);
-    const { result, waitForNextUpdate } = testRenderer.renderHook(() =>
-      useOutputOptions({} as AgentPolicy)
-    );
+    const { result } = testRenderer.renderHook(() => useOutputOptions({} as AgentPolicy));
     expect(result.current.isLoading).toBeTruthy();
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(result.current.dataOutputOptions).toMatchInlineSnapshot(`
       Array [
         Object {
@@ -445,12 +443,10 @@ describe('useOutputOptions', () => {
       hasAtLeast: () => true,
     } as unknown as LicenseService);
     mockApiCallsWithLogstashOutputs(testRenderer.startServices.http);
-    const { result, waitForNextUpdate } = testRenderer.renderHook(() =>
-      useOutputOptions({} as AgentPolicy)
-    );
+    const { result } = testRenderer.renderHook(() => useOutputOptions({} as AgentPolicy));
     expect(result.current.isLoading).toBeTruthy();
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(result.current.dataOutputOptions).toMatchInlineSnapshot(`
       Array [
         Object {
@@ -497,7 +493,7 @@ describe('useOutputOptions', () => {
       hasAtLeast: () => true,
     } as unknown as LicenseService);
     mockApiCallsWithLogstashOutputs(testRenderer.startServices.http);
-    const { result, waitForNextUpdate } = testRenderer.renderHook(() =>
+    const { result } = testRenderer.renderHook(() =>
       useOutputOptions({
         package_policies: [
           {
@@ -510,7 +506,7 @@ describe('useOutputOptions', () => {
     );
     expect(result.current.isLoading).toBeTruthy();
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(result.current.dataOutputOptions).toMatchInlineSnapshot(`
       Array [
         Object {
@@ -601,12 +597,10 @@ describe('useOutputOptions', () => {
       hasAtLeast: () => true,
     } as unknown as LicenseService);
     mockApiCallsWithRemoteESOutputs(testRenderer.startServices.http);
-    const { result, waitForNextUpdate } = testRenderer.renderHook(() =>
-      useOutputOptions({} as AgentPolicy)
-    );
+    const { result } = testRenderer.renderHook(() => useOutputOptions({} as AgentPolicy));
     expect(result.current.isLoading).toBeTruthy();
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(result.current.dataOutputOptions.length).toEqual(2);
     expect(result.current.dataOutputOptions[1].value).toEqual('remote1');
     expect(result.current.monitoringOutputOptions.length).toEqual(2);
@@ -619,12 +613,10 @@ describe('useOutputOptions', () => {
       hasAtLeast: () => true,
     } as unknown as LicenseService);
     mockApiCallsWithInternalOutputs(testRenderer.startServices.http);
-    const { result, waitForNextUpdate } = testRenderer.renderHook(() =>
-      useOutputOptions({} as AgentPolicy)
-    );
+    const { result } = testRenderer.renderHook(() => useOutputOptions({} as AgentPolicy));
     expect(result.current.isLoading).toBeTruthy();
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(result.current.dataOutputOptions).toMatchInlineSnapshot(`
       Array [
         Object {
@@ -670,12 +662,10 @@ describe('useFleetServerHostsOptions', () => {
   it('should not enable internal fleet server hosts', async () => {
     const testRenderer = createFleetTestRendererMock();
     mockApiCallsWithInternalFleetServerHost(testRenderer.startServices.http);
-    const { result, waitForNextUpdate } = testRenderer.renderHook(() =>
-      useFleetServerHostsOptions({} as AgentPolicy)
-    );
+    const { result } = testRenderer.renderHook(() => useFleetServerHostsOptions({} as AgentPolicy));
     expect(result.current.isLoading).toBeTruthy();
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(result.current.fleetServerHostsOptions).toMatchInlineSnapshot(`
       Array [
         Object {

diff --git a/...t/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/form.test.tsx b/...t/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/form.test.tsx
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import { act } from '@testing-library/react-hooks';
-import type { RenderHookResult } from '@testing-library/react-hooks';
+import type { RenderHookResult } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 
 import type { TestRenderer } from '../../../../../../../mock';
 import { createFleetTestRendererMock } from '../../../../../../../mock';
@@ -71,11 +71,11 @@ describe('useOnSubmit', () => {
 
   let testRenderer: TestRenderer;
   let renderResult: RenderHookResult<
-    Parameters<typeof useOnSubmit>,
-    ReturnType<typeof useOnSubmit>
+    ReturnType<typeof useOnSubmit>,
+    Parameters<typeof useOnSubmit>
   >;
-  const render = ({ isUpdate } = { isUpdate: false }) =>
-    (renderResult = testRenderer.renderHook(() =>
+  const render = async ({ isUpdate } = { isUpdate: false }) => {
+    renderResult = testRenderer.renderHook(() =>
       useOnSubmit({
         agentCount: 0,
         packageInfo,
@@ -85,7 +85,12 @@ describe('useOnSubmit', () => {
         queryParamsPolicyId: undefined,
         hasFleetAddAgentsPrivileges: true,
       })
-    ));
+    );
+
+    await waitFor(() => new Promise((resolve) => resolve(null)));
+
+    return renderResult;
+  };
 
   beforeEach(() => {
     testRenderer = createFleetTestRendererMock();
@@ -95,10 +100,8 @@ describe('useOnSubmit', () => {
   });
 
   describe('default API response', () => {
-    beforeEach(() => {
-      act(() => {
-        render();
-      });
+    beforeEach(async () => {
+      await render();
     });
 
     it('should set new values when package policy changes', () => {

diff --git a/.../fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx b/.../fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx
@@ -284,17 +284,15 @@ describe('When on the package policy create page', () => {
       let cancelButton: HTMLAnchorElement;
 
       beforeEach(async () => {
-        await act(async () => {
-          render();
+        render();
 
-          cancelLink = renderResult.getByTestId(
-            'createPackagePolicy_cancelBackLink'
-          ) as HTMLAnchorElement;
+        cancelLink = renderResult.getByTestId(
+          'createPackagePolicy_cancelBackLink'
+        ) as HTMLAnchorElement;
 
-          cancelButton = (await renderResult.findByTestId(
-            'createPackagePolicyCancelButton'
-          )) as HTMLAnchorElement;
-        });
+        cancelButton = (await renderResult.findByTestId(
+          'createPackagePolicyCancelButton'
+        )) as HTMLAnchorElement;
       });
 
       test('should use custom "cancel" URL', () => {

diff --git a/...ons/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_history_block.test.tsx b/...ons/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_history_block.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act } from '@testing-library/react-hooks';
+import { act, waitFor } from '@testing-library/react';
 
 import { createFleetTestRendererMock } from '../../../../../../mock';
 
@@ -36,7 +36,7 @@ describe('useHistoryBlock', () => {
 
       act(() => renderer.mountHistory.push('/test'));
       // needed because we have an async useEffect
-      await act(() => new Promise((resolve) => resolve()));
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       expect(renderer.startServices.overlays.openConfirm).toBeCalled();
       expect(renderer.startServices.application.navigateToUrl).toBeCalledWith(
@@ -53,7 +53,7 @@ describe('useHistoryBlock', () => {
 
       act(() => renderer.mountHistory.push('/test'));
       // needed because we have an async useEffect
-      await act(() => new Promise((resolve) => resolve()));
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       expect(renderer.startServices.overlays.openConfirm).toBeCalled();
       expect(renderer.startServices.application.navigateToUrl).not.toBeCalled();
@@ -81,7 +81,7 @@ describe('useHistoryBlock', () => {
 
       act(() => renderer.mountHistory.push('/test?param=test'));
       // needed because we have an async useEffect
-      await act(() => new Promise((resolve) => resolve()));
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       expect(renderer.startServices.overlays.openConfirm).toBeCalled();
       expect(renderer.startServices.application.navigateToUrl).toBeCalledWith(
@@ -98,7 +98,7 @@ describe('useHistoryBlock', () => {
 
       act(() => renderer.mountHistory.push('/test?param=test'));
       // needed because we have an async useEffect
-      await act(() => new Promise((resolve) => resolve()));
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       expect(renderer.startServices.overlays.openConfirm).toBeCalled();
       expect(renderer.startServices.application.navigateToUrl).not.toBeCalled();
@@ -127,7 +127,7 @@ describe('useHistoryBlock', () => {
 
       act(() => renderer.mountHistory.push('/test#/hash'));
       // needed because we have an async useEffect
-      await act(() => new Promise((resolve) => resolve()));
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       expect(renderer.startServices.overlays.openConfirm).toBeCalled();
       expect(renderer.startServices.application.navigateToUrl).toBeCalledWith(
@@ -144,7 +144,7 @@ describe('useHistoryBlock', () => {
 
       act(() => renderer.mountHistory.push('/test#/hash'));
       // needed because we have an async useEffect
-      await act(() => new Promise((resolve) => resolve()));
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       expect(renderer.startServices.overlays.openConfirm).toBeCalled();
       expect(renderer.startServices.application.navigateToUrl).not.toBeCalled();

diff --git a/...ns/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_package_policy.test.tsx b/...ns/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_package_policy.test.tsx
@@ -12,6 +12,7 @@
  * 2.0.
  */
 
+import { waitFor } from '@testing-library/react';
 import { omit } from 'lodash';
 
 import { sendGetPackageInfoByKey, sendUpgradePackagePolicyDryRun } from '../../../../../../hooks';
@@ -274,22 +275,22 @@ jest.mock('../../../../../../hooks/use_request', () => ({
 describe('usePackagePolicy', () => {
   it('should load the package policy if this is a not an upgrade', async () => {
     const renderer = createFleetTestRendererMock();
-    const { result, waitForNextUpdate } = renderer.renderHook(() =>
+    const { result } = renderer.renderHook(() =>
       usePackagePolicyWithRelatedData('package-policy-1', {})
     );
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(result.current.packagePolicy).toEqual(omit(mockPackagePolicy, 'id'));
   });
 
   it('should load the package policy if this is an upgrade', async () => {
     const renderer = createFleetTestRendererMock();
-    const { result, waitForNextUpdate } = renderer.renderHook(() =>
+    const { result } = renderer.renderHook(() =>
       usePackagePolicyWithRelatedData('package-policy-1', {
         forceUpgrade: true,
       })
     );
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(result.current.packagePolicy).toMatchInlineSnapshot(`
       Object {
         "description": "Nginx description",
@@ -514,12 +515,12 @@ describe('usePackagePolicy', () => {
       isLoading: false,
     } as any);
     const renderer = createFleetTestRendererMock();
-    const { result, waitForNextUpdate } = renderer.renderHook(() =>
+    const { result } = renderer.renderHook(() =>
       usePackagePolicyWithRelatedData('package-policy-2', {
         forceUpgrade: true,
       })
     );
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
     expect(result.current.packagePolicy).toMatchInlineSnapshot(`
       Object {
         "description": "Nginx description",

diff --git a/...fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/export_csv.test.tsx b/...fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/export_csv.test.tsx
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import type { RenderHookResult } from '@testing-library/react-hooks';
-import { act } from '@testing-library/react-hooks';
+import { act, type RenderHookResult } from '@testing-library/react';
 
 import { createFleetTestRendererMock } from '../../../../../../mock';