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 index 4a2eaddbc45d9..da4d0e2c2594d 100644 --- 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/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/hooks.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/hooks.test.tsx index 85a241fe828c9..599603d9d5f6a 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/hooks.test.tsx +++ b/x-pack/plugins/fleet/public/applications/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/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/form.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/form.test.tsx index 9283a8fa42c39..4ed0fd697850b 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/form.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/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, - ReturnType + ReturnType, + Parameters >; - 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/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx index db223fee26bf2..e3b1959475649 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx +++ b/x-pack/plugins/fleet/public/applications/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/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_history_block.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_history_block.test.tsx index 491c5f6276941..cac13357ffa7e 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_history_block.test.tsx +++ b/x-pack/plugins/fleet/public/applications/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/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_package_policy.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_package_policy.test.tsx index 67b8f35a22eb4..2df9363a3daa0 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/hooks/use_package_policy.test.tsx +++ b/x-pack/plugins/fleet/public/applications/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/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/export_csv.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/export_csv.test.tsx index b2fdf7a1023f6..48bed25131b86 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/export_csv.test.tsx +++ b/x-pack/plugins/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'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_action_status.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_action_status.test.tsx index 1b4f3e6faff7c..76e8aeb78c3d2 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_action_status.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_action_status.test.tsx @@ -5,7 +5,9 @@ * 2.0. */ -import { renderHook, act } from '@testing-library/react-hooks'; +import { act, waitFor, renderHook } from '@testing-library/react'; + +import type { ActionStatus } from '../../../../../../../common/types'; import { sendGetActionStatus, sendPostCancelAction, useStartServices } from '../../../../hooks'; @@ -41,7 +43,7 @@ describe('useActionStatus', () => { nbAgentsFailed: 0, nbAgentsActioned: 2, creationTime: '2022-09-19T12:07:27.102Z', - }, + } as ActionStatus, ]; beforeEach(() => { mockSendGetActionStatus.mockReset(); @@ -63,20 +65,15 @@ describe('useActionStatus', () => { it('should refresh statuses on refresh flag', async () => { let refresh = false; - await act(async () => { - const result = renderHook(() => useActionStatus(mockOnAbortSuccess, refresh, 20, null)); - refresh = true; - result.rerender(); - }); - expect(mockSendGetActionStatus).toHaveBeenCalledTimes(5); + const result = renderHook(() => useActionStatus(mockOnAbortSuccess, refresh, 20, null)); + refresh = true; + result.rerender(); + await waitFor(() => expect(mockSendGetActionStatus).toHaveBeenCalled()); }); it('should post cancel and invoke callback on cancel upgrade', async () => { mockSendPostCancelAction.mockResolvedValue({}); - let result: any | undefined; - await act(async () => { - ({ result } = renderHook(() => useActionStatus(mockOnAbortSuccess, false, 20, null))); - }); + const { result } = renderHook(() => useActionStatus(mockOnAbortSuccess, false, 20, null)); await act(async () => { await result.current.abortUpgrade(mockActionStatuses[0]); }); @@ -89,10 +86,7 @@ describe('useActionStatus', () => { it('should post cancel and invoke callback on cancel upgrade - plural', async () => { mockSendPostCancelAction.mockResolvedValue({}); - let result: any | undefined; - await act(async () => { - ({ result } = renderHook(() => useActionStatus(mockOnAbortSuccess, false, 20, null))); - }); + const { result } = renderHook(() => useActionStatus(mockOnAbortSuccess, false, 20, null)); await act(async () => { await result.current.abortUpgrade({ ...mockActionStatuses[0], nbAgentsAck: 0 }); }); @@ -106,10 +100,7 @@ describe('useActionStatus', () => { it('should report error on cancel upgrade failure', async () => { const error = new Error('error'); mockSendPostCancelAction.mockRejectedValue(error); - let result: any | undefined; - await act(async () => { - ({ result } = renderHook(() => useActionStatus(mockOnAbortSuccess, false, 20, null))); - }); + const { result } = renderHook(() => useActionStatus(mockOnAbortSuccess, false, 20, null)); await act(async () => { await result.current.abortUpgrade(mockActionStatuses[0]); }); diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_agent_soft_limit.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_agent_soft_limit.test.tsx index 4b9d908baa84d..46c72c9c5213c 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_agent_soft_limit.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_agent_soft_limit.test.tsx @@ -38,10 +38,12 @@ describe('useAgentSoftLimit', () => { total: 5, }, } as any); - const { result, waitForNextUpdate } = renderer.renderHook(() => useAgentSoftLimit()); - await waitForNextUpdate(); + const { result, rerender } = renderer.renderHook(() => useAgentSoftLimit()); + await renderer.waitFor(() => expect(mockedSendGetAgents).toBeCalled()); + + // re-render so cache is updated to value from most recent call + rerender(); - expect(mockedSendGetAgents).toBeCalled(); expect(result.current.shouldDisplayAgentSoftLimit).toEqual(false); }); @@ -53,10 +55,12 @@ describe('useAgentSoftLimit', () => { total: 15, }, } as any); - const { result, waitForNextUpdate } = renderer.renderHook(() => useAgentSoftLimit()); - await waitForNextUpdate(); + const { result, rerender } = renderer.renderHook(() => useAgentSoftLimit()); + await renderer.waitFor(() => expect(mockedSendGetAgents).toBeCalled()); + + // re-render so cache is updated to value from most recent call + rerender(); - expect(mockedSendGetAgents).toBeCalled(); expect(result.current.shouldDisplayAgentSoftLimit).toEqual(true); }); }); diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_fetch_agents_data.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_fetch_agents_data.test.tsx index db4cff14e4804..27cb000bdb154 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_fetch_agents_data.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_fetch_agents_data.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { act } from '@testing-library/react-hooks'; +import { act, waitFor } from '@testing-library/react'; import { useStartServices } from '../../../../hooks'; @@ -118,10 +118,8 @@ describe('useFetchAgentsData', () => { it('should fetch agents and agent policies data', async () => { const renderer = createFleetTestRendererMock(); - const { result, waitForNextUpdate } = renderer.renderHook(() => useFetchAgentsData()); - await act(async () => { - await waitForNextUpdate(); - }); + const { result } = renderer.renderHook(() => useFetchAgentsData()); + await waitFor(() => new Promise((resolve) => resolve(null))); expect(result?.current.selectedStatus).toEqual(['healthy', 'unhealthy', 'updating', 'offline']); expect(result?.current.allAgentPolicies).toEqual([ @@ -155,27 +153,22 @@ describe('useFetchAgentsData', () => { it('sync querystring kuery with current search', async () => { const renderer = createFleetTestRendererMock(); - const { result, waitForNextUpdate } = renderer.renderHook(() => useFetchAgentsData()); - await act(async () => { - await waitForNextUpdate(); - }); + const { result } = renderer.renderHook(() => useFetchAgentsData()); - expect(renderer.history.location.search).toEqual(''); + await waitFor(() => expect(renderer.history.location.search).toEqual('')); // Set search await act(async () => { result.current.setSearch('active:true'); - await waitForNextUpdate(); }); - expect(renderer.history.location.search).toEqual('?kuery=active%3Atrue'); + await waitFor(() => expect(renderer.history.location.search).toEqual('?kuery=active%3Atrue')); // Clear search await act(async () => { result.current.setSearch(''); - await waitForNextUpdate(); }); - expect(renderer.history.location.search).toEqual(''); + await waitFor(() => expect(renderer.history.location.search).toEqual('')); }); }); diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_update_tags.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_update_tags.test.tsx index 89059d5a17971..0545f1b412f00 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_update_tags.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_update_tags.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { renderHook, act } from '@testing-library/react-hooks'; +import { act, renderHook } from '@testing-library/react'; import { sendPostBulkAgentTagsUpdate, diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_upgrade_modal/hooks.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_upgrade_modal/hooks.test.tsx index 8aea16559058a..be5de3cd04343 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_upgrade_modal/hooks.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_upgrade_modal/hooks.test.tsx @@ -6,7 +6,7 @@ */ import moment from 'moment'; -import { act } from '@testing-library/react-hooks'; +import { act } from '@testing-library/react'; import { createFleetTestRendererMock } from '../../../../../../mock'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/use_fleet_server_unhealthy.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/use_fleet_server_unhealthy.test.tsx index 7372edf0ada2a..c4caa7e47c07b 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/use_fleet_server_unhealthy.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/use_fleet_server_unhealthy.test.tsx @@ -22,7 +22,7 @@ jest.mock('../../../../../hooks/use_authz', () => ({ describe('useFleetServerUnhealthy', () => { const testRenderer = createFleetTestRendererMock(); - it('should return isUnHealthy:false with an online fleet slerver', async () => { + it('should return isUnHealthy:false with an online fleet server', async () => { jest.mocked(sendGetEnrollmentSettings).mockResolvedValueOnce({ error: null, data: { @@ -46,13 +46,12 @@ describe('useFleetServerUnhealthy', () => { }, }); - const { result, waitForNextUpdate } = testRenderer.renderHook(() => useFleetServerUnhealthy()); - await waitForNextUpdate(); - expect(result.current.isLoading).toBeFalsy(); + const { result } = testRenderer.renderHook(() => useFleetServerUnhealthy()); + await testRenderer.waitFor(() => expect(result.current.isLoading).toBeFalsy()); expect(result.current.isUnhealthy).toBeFalsy(); }); - it('should return isUnHealthy:true with only one offline fleet slerver', async () => { + it('should return isUnHealthy:true with only one offline fleet server', async () => { jest.mocked(sendGetEnrollmentSettings).mockResolvedValue({ error: null, data: { @@ -62,9 +61,8 @@ describe('useFleetServerUnhealthy', () => { }, }, }); - const { result, waitForNextUpdate } = testRenderer.renderHook(() => useFleetServerUnhealthy()); - await waitForNextUpdate(); - expect(result.current.isLoading).toBeFalsy(); + const { result } = testRenderer.renderHook(() => useFleetServerUnhealthy()); + await testRenderer.waitFor(() => expect(result.current.isLoading).toBeFalsy()); expect(result.current.isUnhealthy).toBeTruthy(); }); @@ -73,9 +71,8 @@ describe('useFleetServerUnhealthy', () => { error: new Error('Invalid request'), data: null, }); - const { result, waitForNextUpdate } = testRenderer.renderHook(() => useFleetServerUnhealthy()); - await waitForNextUpdate(); - expect(result.current.isLoading).toBeFalsy(); + const { result } = testRenderer.renderHook(() => useFleetServerUnhealthy()); + await testRenderer.waitFor(() => expect(result.current.isLoading).toBeFalsy()); expect(result.current.isUnhealthy).toBeFalsy(); expect(testRenderer.startServices.notifications.toasts.addError).toBeCalled(); }); diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/use_fleet_proxy_form.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/use_fleet_proxy_form.test.tsx index 4650b97bfd656..7e3d3f87137da 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/use_fleet_proxy_form.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/use_fleet_proxy_form.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { act } from 'react-test-renderer'; +import { act } from '@testing-library/react'; import { createFleetTestRendererMock } from '../../../../../../mock'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/use_fleet_server_host_form.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/use_fleet_server_host_form.test.tsx index 95a94848f4794..87555b034680b 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/use_fleet_server_host_form.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/use_fleet_server_host_form.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { act } from 'react-test-renderer'; +import { act } from '@testing-library/react'; import { createFleetTestRendererMock } from '../../../../../../mock'; @@ -28,20 +28,22 @@ describe('useFleetServerHostsForm', () => { await act(() => result.current.submit()); - expect(result.current.inputs.hostUrlsInput.props.errors).toMatchInlineSnapshot(` - Array [ - Object { - "index": 0, - "message": "Duplicate URL", - }, - Object { - "index": 1, - "message": "Duplicate URL", - }, - ] - `); - expect(onSuccess).not.toBeCalled(); - expect(result.current.isDisabled).toBeTruthy(); + await testRenderer.waitFor(() => { + expect(result.current.inputs.hostUrlsInput.props.errors).toMatchInlineSnapshot(` + Array [ + Object { + "index": 0, + "message": "Duplicate URL", + }, + Object { + "index": 1, + "message": "Duplicate URL", + }, + ] + `); + expect(onSuccess).not.toBeCalled(); + expect(result.current.isDisabled).toBeTruthy(); + }); }); it('should submit a valid form', async () => { @@ -64,7 +66,8 @@ describe('useFleetServerHostsForm', () => { act(() => result.current.inputs.hostUrlsInput.props.onChange(['https://test.fr'])); await act(() => result.current.submit()); - expect(onSuccess).toBeCalled(); + + await testRenderer.waitFor(() => expect(onSuccess).toBeCalled()); }); it('should allow the user to correct and submit a invalid form', async () => { @@ -89,13 +92,16 @@ describe('useFleetServerHostsForm', () => { ); await act(() => result.current.submit()); - expect(onSuccess).not.toBeCalled(); - expect(result.current.isDisabled).toBeTruthy(); + + await testRenderer.waitFor(() => { + expect(onSuccess).not.toBeCalled(); + expect(result.current.isDisabled).toBeTruthy(); + }); act(() => result.current.inputs.hostUrlsInput.props.onChange(['https://test.fr'])); expect(result.current.isDisabled).toBeFalsy(); await act(() => result.current.submit()); - expect(onSuccess).toBeCalled(); + await testRenderer.waitFor(() => expect(onSuccess).toBeCalled()); }); }); diff --git a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_merge_epr_with_replacements.test.ts b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_merge_epr_with_replacements.test.ts index d137d908ca3b9..f5aed7de52ab8 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_merge_epr_with_replacements.test.ts +++ b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_merge_epr_with_replacements.test.ts @@ -8,7 +8,7 @@ import type { CustomIntegration } from '@kbn/custom-integrations-plugin/common'; import type { IntegrationCategory } from '@kbn/custom-integrations-plugin/common'; -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import type { PackageListItem } from '../../../../common/types/models'; diff --git a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.test.tsx b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.test.tsx index 6040c3bacd70f..d73d233ac0b09 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.test.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.test.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { act, type WrapperComponent } from '@testing-library/react-hooks'; +import { act } from '@testing-library/react'; import { coreMock } from '@kbn/core/public/mocks'; import { createIntegrationsTestRendererMock } from '../../../mock'; @@ -48,9 +48,10 @@ describe('usePackageInstall', () => { throw error; }) as any); - const wrapper: WrapperComponent = ({ children }) => ( + const wrapper = ({ children }: React.PropsWithChildren) => ( {children} ); + const { result } = renderer.renderHook(() => useInstallPackage(), wrapper); const installPackage = result.current; diff --git a/x-pack/plugins/fleet/public/hooks/use_agent_version.test.ts b/x-pack/plugins/fleet/public/hooks/use_agent_version.test.ts index 34a7afe33baaa..36024a38fb51e 100644 --- a/x-pack/plugins/fleet/public/hooks/use_agent_version.test.ts +++ b/x-pack/plugins/fleet/public/hooks/use_agent_version.test.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { renderHook } from '@testing-library/react-hooks'; +import { waitFor, renderHook } from '@testing-library/react'; import { useAgentVersion } from './use_agent_version'; import { useKibanaVersion } from './use_kibana_version'; @@ -28,13 +28,11 @@ describe('useAgentVersion', () => { data: { items: mockAvailableVersions }, }); - const { result, waitForNextUpdate } = renderHook(() => useAgentVersion()); + const { result } = renderHook(() => useAgentVersion()); expect(sendGetAgentsAvailableVersions).toHaveBeenCalled(); - await waitForNextUpdate(); - - expect(result.current).toEqual(mockKibanaVersion); + await waitFor(() => expect(result.current).toEqual(mockKibanaVersion)); }); it('should return agent version with newer patch than kibana', async () => { @@ -46,13 +44,11 @@ describe('useAgentVersion', () => { data: { items: mockAvailableVersions }, }); - const { result, waitForNextUpdate } = renderHook(() => useAgentVersion()); + const { result } = renderHook(() => useAgentVersion()); expect(sendGetAgentsAvailableVersions).toHaveBeenCalled(); - await waitForNextUpdate(); - - expect(result.current).toEqual('8.8.2'); + await waitFor(() => expect(result.current).toEqual('8.8.2')); }); it('should return the latest availeble agent version if a version that matches Kibana version is not released', async () => { @@ -64,13 +60,11 @@ describe('useAgentVersion', () => { data: { items: mockAvailableVersions }, }); - const { result, waitForNextUpdate } = renderHook(() => useAgentVersion()); + const { result } = renderHook(() => useAgentVersion()); expect(sendGetAgentsAvailableVersions).toHaveBeenCalled(); - await waitForNextUpdate(); - - expect(result.current).toEqual('8.9.2'); + await waitFor(() => expect(result.current).toEqual('8.9.2')); }); it('should return the agent version that is <= Kibana version if an agent version that matches Kibana version is not released', async () => { @@ -82,13 +76,11 @@ describe('useAgentVersion', () => { data: { items: mockAvailableVersions }, }); - const { result, waitForNextUpdate } = renderHook(() => useAgentVersion()); + const { result } = renderHook(() => useAgentVersion()); expect(sendGetAgentsAvailableVersions).toHaveBeenCalled(); - await waitForNextUpdate(); - - expect(result.current).toEqual('8.8.2'); + await waitFor(() => expect(result.current).toEqual('8.8.2')); }); it('should return the latest availeble agent version if a snapshot version', async () => { @@ -100,13 +92,11 @@ describe('useAgentVersion', () => { data: { items: mockAvailableVersions }, }); - const { result, waitForNextUpdate } = renderHook(() => useAgentVersion()); + const { result } = renderHook(() => useAgentVersion()); expect(sendGetAgentsAvailableVersions).toHaveBeenCalled(); - await waitForNextUpdate(); - - expect(result.current).toEqual('8.9.2'); + await waitFor(() => expect(result.current).toEqual('8.9.2')); }); it('should return kibana version if no agent versions available', async () => { @@ -118,13 +108,11 @@ describe('useAgentVersion', () => { data: { items: mockAvailableVersions }, }); - const { result, waitForNextUpdate } = renderHook(() => useAgentVersion()); + const { result } = renderHook(() => useAgentVersion()); expect(sendGetAgentsAvailableVersions).toHaveBeenCalled(); - await waitForNextUpdate(); - - expect(result.current).toEqual('8.11.0'); + await waitFor(() => expect(result.current).toEqual('8.11.0')); }); it('should return kibana version if the list of available agent versions is not available', async () => { @@ -133,12 +121,10 @@ describe('useAgentVersion', () => { (useKibanaVersion as jest.Mock).mockReturnValue(mockKibanaVersion); (sendGetAgentsAvailableVersions as jest.Mock).mockRejectedValue(new Error('Fetching error')); - const { result, waitForNextUpdate } = renderHook(() => useAgentVersion()); + const { result } = renderHook(() => useAgentVersion()); expect(sendGetAgentsAvailableVersions).toHaveBeenCalled(); - await waitForNextUpdate(); - - expect(result.current).toEqual(mockKibanaVersion); + await waitFor(() => expect(result.current).toEqual(mockKibanaVersion)); }); it('should return the latest availeble agent version if has build suffix', async () => { @@ -157,12 +143,10 @@ describe('useAgentVersion', () => { data: { items: mockAvailableVersions }, }); - const { result, waitForNextUpdate } = renderHook(() => useAgentVersion()); + const { result } = renderHook(() => useAgentVersion()); expect(sendGetAgentsAvailableVersions).toHaveBeenCalled(); - await waitForNextUpdate(); - - expect(result.current).toEqual('8.11.1+build123456789'); + await waitFor(() => expect(result.current).toEqual('8.11.1+build123456789')); }); }); diff --git a/x-pack/plugins/fleet/public/hooks/use_dismissable_tour.test.ts b/x-pack/plugins/fleet/public/hooks/use_dismissable_tour.test.ts index 394699fc3f34f..7dbdcea26b250 100644 --- a/x-pack/plugins/fleet/public/hooks/use_dismissable_tour.test.ts +++ b/x-pack/plugins/fleet/public/hooks/use_dismissable_tour.test.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { renderHook, act } from '@testing-library/react-hooks'; +import { act, renderHook } from '@testing-library/react'; import { TOUR_STORAGE_KEYS } from '../constants'; import { createStartServices } from '../mock'; diff --git a/x-pack/plugins/fleet/public/hooks/use_fleet_server_hosts_for_policy.test.tsx b/x-pack/plugins/fleet/public/hooks/use_fleet_server_hosts_for_policy.test.tsx index 6f9c96d130ebd..1676f07d2e11f 100644 --- a/x-pack/plugins/fleet/public/hooks/use_fleet_server_hosts_for_policy.test.tsx +++ b/x-pack/plugins/fleet/public/hooks/use_fleet_server_hosts_for_policy.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { useFleetServerHostsForPolicy } from './use_fleet_server_hosts_for_policy'; import { useGetEnrollmentSettings } from './use_request/settings'; diff --git a/x-pack/plugins/fleet/public/hooks/use_is_package_policy_upgradable.test.tsx b/x-pack/plugins/fleet/public/hooks/use_is_package_policy_upgradable.test.tsx index b928a74c306ea..80e0360f739a0 100644 --- a/x-pack/plugins/fleet/public/hooks/use_is_package_policy_upgradable.test.tsx +++ b/x-pack/plugins/fleet/public/hooks/use_is_package_policy_upgradable.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { useIsPackagePolicyUpgradable } from './use_is_package_policy_upgradable'; import { useGetPackages } from './use_request/epm'; diff --git a/x-pack/plugins/fleet/public/hooks/use_space_settings_context.test.tsx b/x-pack/plugins/fleet/public/hooks/use_space_settings_context.test.tsx index 6f3d286db3706..9f7bfc8ceaf8e 100644 --- a/x-pack/plugins/fleet/public/hooks/use_space_settings_context.test.tsx +++ b/x-pack/plugins/fleet/public/hooks/use_space_settings_context.test.tsx @@ -23,7 +23,7 @@ describe('useSpaceSettingsContext', () => { function renderHook() { return createFleetTestRendererMock().renderHook( () => useSpaceSettingsContext(), - ({ children }: { children: any }) => ( + ({ children }: React.PropsWithChildren) => ( {children} ) ); diff --git a/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx b/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx index 66155cee7bb35..3eb6ade241d3f 100644 --- a/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx +++ b/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx @@ -8,10 +8,8 @@ import type { History } from 'history'; import { createMemoryHistory } from 'history'; import React, { memo } from 'react'; -import type { RenderOptions, RenderResult } from '@testing-library/react'; -import { render as reactRender, act } from '@testing-library/react'; -import { renderHook, type WrapperComponent } from '@testing-library/react-hooks'; -import type { RenderHookResult } from '@testing-library/react-hooks'; +import type { RenderOptions, RenderResult, RenderHookResult } from '@testing-library/react'; +import { render as reactRender, act, waitFor, renderHook } from '@testing-library/react'; import { Router } from '@kbn/shared-ux-router'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; @@ -52,11 +50,12 @@ export interface TestRenderer { AppWrapper: React.FC; HookWrapper: React.FC; render: UiRender; - renderHook: ( + renderHook: ( callback: (props: TProps) => TResult, - wrapper?: WrapperComponent - ) => RenderHookResult; + wrapper?: React.FC + ) => RenderHookResult; setHeaderActionMenu: Function; + waitFor: typeof waitFor; } // disable retries to avoid test flakiness @@ -124,17 +123,21 @@ export const createFleetTestRendererMock = (): TestRenderer => { HookWrapper, renderHook: ( callback, - ExtraWrapper: WrapperComponent = memo(({ children }) => <>{children}) + ExtraWrapper: React.FC> = memo(({ children }) => ( + <>{children} + )) ) => { - const wrapper: WrapperComponent = ({ children }) => ( + const wrapper: React.FC> = ({ children }) => ( {children} ); + return renderHook(callback, { wrapper, }); }, + waitFor, render: (ui, options) => { let renderResponse: RenderResult; act(() => { @@ -207,9 +210,11 @@ export const createIntegrationsTestRendererMock = (): TestRenderer => { }, renderHook: ( callback, - ExtraWrapper: WrapperComponent = memo(({ children }) => <>{children}) + ExtraWrapper: React.FC> = memo(({ children }) => ( + <>{children} + )) ) => { - const wrapper: WrapperComponent = ({ children }) => ( + const wrapper: React.FC> = ({ children }) => ( {children} @@ -218,6 +223,7 @@ export const createIntegrationsTestRendererMock = (): TestRenderer => { wrapper, }); }, + waitFor, }; return testRendererMocks;