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

…grades security-detection-rule-management (#201177) (#201869) # Backport This will backport the following commits from `main` to `8.x`: - [[React18] Migrate test suites to account for testing library upgrades security-detection-rule-management (#201177)](#201177)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Eyo O. Eyo <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
elastic · Dec 4, 2024 · d26bdb1 · d26bdb1
1 parent d3730c6
commit d26bdb1
Show file tree

Hide file tree

Showing 16 changed files with 103 additions and 119 deletions.
diff --git a/...security_solution/public/common/components/ml_popover/hooks/use_enable_data_feed.test.tsx b/...security_solution/public/common/components/ml_popover/hooks/use_enable_data_feed.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React from 'react';
-import { renderHook, act } from '@testing-library/react-hooks';
+import { act, waitFor, renderHook } from '@testing-library/react';
 import { useEnableDataFeed } from './use_enable_data_feed';
 import { TestProviders } from '../../../mock';
 
@@ -78,21 +78,18 @@ describe('useSecurityJobsHelpers', () => {
           resolvePromiseCb = resolve;
         })
       );
-      const { result, waitForNextUpdate } = renderHook(() => useEnableDataFeed(), {
+      const { result } = renderHook(() => useEnableDataFeed(), {
         wrapper,
       });
       expect(result.current.isLoading).toBe(false);
 
       await act(async () => {
         const enableDataFeedPromise = result.current.enableDatafeed(JOB, TIMESTAMP);
-
-        await waitForNextUpdate();
-        expect(result.current.isLoading).toBe(true);
-
         resolvePromiseCb({});
         await enableDataFeedPromise;
-        expect(result.current.isLoading).toBe(false);
       });
+
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
     });
 
     it('does not call setupMlJob if job is already installed', async () => {

diff --git a/...ins/security_solution/public/common/components/ml_popover/hooks/use_security_jobs.test.ts b/...ins/security_solution/public/common/components/ml_popover/hooks/use_security_jobs.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { hasMlAdminPermissions } from '../../../../../common/machine_learning/has_ml_admin_permissions';
 import { hasMlLicense } from '../../../../../common/machine_learning/has_ml_license';
 import { useAppToasts } from '../../../hooks/use_app_toasts';
@@ -71,33 +71,31 @@ describe('useSecurityJobs', () => {
         bucketSpanSeconds: 900,
       };
 
-      const { result, waitForNextUpdate } = renderHook(() => useSecurityJobs(), {
+      const { result } = renderHook(() => useSecurityJobs(), {
         wrapper: TestProviders,
       });
-      await waitForNextUpdate();
-
-      expect(result.current.jobs).toHaveLength(6);
+      await waitFor(() => expect(result.current.jobs).toHaveLength(6));
       expect(result.current.jobs).toEqual(expect.arrayContaining([expectedSecurityJob]));
     });
 
     it('returns those permissions', async () => {
-      const { result, waitForNextUpdate } = renderHook(() => useSecurityJobs(), {
+      const { result } = renderHook(() => useSecurityJobs(), {
         wrapper: TestProviders,
       });
-      await waitForNextUpdate();
-
-      expect(result.current.isMlAdmin).toEqual(true);
-      expect(result.current.isLicensed).toEqual(true);
+      await waitFor(() => {
+        expect(result.current.isMlAdmin).toEqual(true);
+        expect(result.current.isLicensed).toEqual(true);
+      });
     });
 
     it('renders a toast error if an ML call fails', async () => {
       (getModules as jest.Mock).mockRejectedValue('whoops');
-      const { waitFor } = renderHook(() => useSecurityJobs(), {
+      renderHook(() => useSecurityJobs(), {
         wrapper: TestProviders,
       });
 
       // addError might be called after an arbitrary number of renders, so we
-      // need to use waitFor here instead of waitForNextUpdate
+      // need to use waitFor here instead of waitFor
       await waitFor(() => {
         expect(appToastsMock.addError).toHaveBeenCalledWith('whoops', {
           title: 'Security job fetch failure',

diff --git a/...ublic/detection_engine/rule_details_ui/pages/rule_details/use_redirect_legacy_url.test.ts b/...ublic/detection_engine/rule_details_ui/pages/rule_details/use_redirect_legacy_url.test.ts
@@ -4,10 +4,11 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-/* eslint-disable no-restricted-imports */
 
-import { renderHook, cleanup } from '@testing-library/react-hooks';
+import { renderHook, cleanup } from '@testing-library/react';
+// eslint-disable-next-line no-restricted-imports
 import type { UseLegacyUrlRedirectParams } from './use_redirect_legacy_url';
+// eslint-disable-next-line no-restricted-imports
 import { useLegacyUrlRedirect } from './use_redirect_legacy_url';
 import type { Rule } from '../../../rule_management/logic';
 import type { SpacesApi } from '@kbn/spaces-plugin/public';

diff --git a/...public/detection_engine/rule_details_ui/pages/rule_details/use_rule_details_tabs.test.tsx b/...public/detection_engine/rule_details_ui/pages/rule_details/use_rule_details_tabs.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { cleanup, renderHook } from '@testing-library/react-hooks';
+import { renderHook, cleanup } from '@testing-library/react';
 import type { UseRuleDetailsTabsProps } from './use_rule_details_tabs';
 import { RuleDetailTabs, useRuleDetailsTabs } from './use_rule_details_tabs';
 import type { Rule } from '../../../rule_management/logic';

diff --git a/...lution/public/detection_engine/rule_management/logic/bulk_actions/use_bulk_export.test.ts b/...lution/public/detection_engine/rule_management/logic/bulk_actions/use_bulk_export.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { BulkActionTypeEnum } from '../../../../../common/api/detection_engine/rule_management';
 import { useAppToasts } from '../../../../common/hooks/use_app_toasts';
 import { useRulesTableContextOptional } from '../../../rule_management_ui/components/rules_table/rules_table/rules_table_context';

diff --git a/...ublic/detection_engine/rule_management/logic/bulk_actions/use_execute_bulk_action.test.ts b/...ublic/detection_engine/rule_management/logic/bulk_actions/use_execute_bulk_action.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { BulkActionTypeEnum } from '../../../../../common/api/detection_engine/rule_management';
 import { useAppToasts } from '../../../../common/hooks/use_app_toasts';
 import { METRIC_TYPE, TELEMETRY_EVENT, track } from '../../../../common/lib/telemetry';

diff --git a/...ity_solution/public/detection_engine/rule_management/logic/use_alert_suppression.test.tsx b/...ity_solution/public/detection_engine/rule_management/logic/use_alert_suppression.test.tsx
@@ -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 { renderHook } from '@testing-library/react';
 import type { Type } from '@kbn/securitysolution-io-ts-alerting-types';
 import { useAlertSuppression } from './use_alert_suppression';
 

diff --git a/...ion/public/detection_engine/rule_management/logic/use_dissasociate_exception_list.test.ts b/...ion/public/detection_engine/rule_management/logic/use_dissasociate_exception_list.test.ts
@@ -5,16 +5,12 @@
  * 2.0.
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, waitFor, renderHook } from '@testing-library/react';
 
 import { coreMock } from '@kbn/core/public/mocks';
 
 import * as api from '../api/api';
 import { getRulesSchemaMock } from '../../../../common/api/detection_engine/model/rule_schema/mocks';
-import type {
-  ReturnUseDisassociateExceptionList,
-  UseDisassociateExceptionListProps,
-} from './use_disassociate_exception_list';
 import { useDisassociateExceptionList } from './use_disassociate_exception_list';
 
 const mockKibanaHttpService = coreMock.createStart().http;
@@ -33,10 +29,7 @@ describe('useDisassociateExceptionList', () => {
 
   test('initializes hook', async () => {
     await act(async () => {
-      const { result, waitForNextUpdate } = renderHook<
-        UseDisassociateExceptionListProps,
-        ReturnUseDisassociateExceptionList
-      >(() =>
+      const { result } = renderHook(() =>
         useDisassociateExceptionList({
           http: mockKibanaHttpService,
           ruleRuleId: 'rule_id',
@@ -45,9 +38,7 @@ describe('useDisassociateExceptionList', () => {
         })
       );
 
-      await waitForNextUpdate();
-
-      expect(result.current).toEqual([false, null]);
+      await waitFor(() => expect(result.current).toEqual([false, null]));
     });
   });
 });
diff --git a/.../security_solution/public/detection_engine/rule_management/logic/use_rule_indices.test.ts b/.../security_solution/public/detection_engine/rule_management/logic/use_rule_indices.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useRuleIndices } from './use_rule_indices';
 import { useGetInstalledJob } from '../../../common/components/ml/hooks/use_get_jobs';

diff --git a/...engine/rule_management_ui/components/rules_table/rules_table/rules_table_context.test.tsx b/...engine/rule_management_ui/components/rules_table/rules_table/rules_table_context.test.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import type { PropsWithChildren } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useUiSetting$ } from '../../../../../common/lib/kibana';
 import type { Rule, RulesSnoozeSettingsMap } from '../../../../rule_management/logic';
 import { useFindRules } from '../../../../rule_management/logic/use_find_rules';

diff --git a/...rule_management_ui/components/rules_table/rules_table/use_rules_table_saved_state.test.ts b/...rule_management_ui/components/rules_table/rules_table/use_rules_table_saved_state.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { RULES_TABLE_MAX_PAGE_SIZE } from '../../../../../../common/constants';
 import type {
   RulesTableStorageSavedState,

diff --git a/...anagement_ui/components/rules_table/rules_table/use_sync_rules_table_saved_state.test.tsx b/...anagement_ui/components/rules_table/rules_table/use_sync_rules_table_saved_state.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useReplaceUrlParams } from '../../../../../common/utils/global_query_string/helpers';
 import { useKibana } from '../../../../../common/lib/kibana';
 import { URL_PARAM_KEY } from '../../../../../common/hooks/use_url_state';

diff --git a/...on_engine/rule_monitoring/components/execution_events_table/use_execution_events.test.tsx b/...on_engine/rule_monitoring/components/execution_events_table/use_execution_events.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook, cleanup } from '@testing-library/react-hooks';
+import { cleanup, waitFor, renderHook } from '@testing-library/react';
 
 import {
   LogLevelEnum,
@@ -39,9 +39,9 @@ describe('useExecutionEvents', () => {
   it('calls the API via fetchRuleExecutionEvents', async () => {
     const fetchRuleExecutionEvents = jest.spyOn(api, 'fetchRuleExecutionEvents');
 
-    const { waitForNextUpdate } = render();
+    render();
 
-    await waitForNextUpdate();
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(fetchRuleExecutionEvents).toHaveBeenCalledTimes(1);
     expect(fetchRuleExecutionEvents).toHaveBeenLastCalledWith(
@@ -50,63 +50,63 @@ describe('useExecutionEvents', () => {
   });
 
   it('fetches data from the API', async () => {
-    const { result, waitForNextUpdate } = render();
+    const { result } = render();
 
     // It starts from a loading state
     expect(result.current.isLoading).toEqual(true);
     expect(result.current.isSuccess).toEqual(false);
     expect(result.current.isError).toEqual(false);
 
     // When fetchRuleExecutionEvents returns
-    await waitForNextUpdate();
-
-    // It switches to a success state
-    expect(result.current.isLoading).toEqual(false);
-    expect(result.current.isSuccess).toEqual(true);
-    expect(result.current.isError).toEqual(false);
-    expect(result.current.data).toEqual({
-      events: [
-        {
-          timestamp: '2021-12-29T10:42:59.996Z',
-          sequence: 0,
-          level: LogLevelEnum.info,
-          type: RuleExecutionEventTypeEnum['status-change'],
-          execution_id: 'execution-id-1',
-          message: 'Rule changed status to "succeeded". Rule execution completed without errors',
+    await waitFor(() => {
+      // It switches to a success state
+      expect(result.current.isLoading).toEqual(false);
+      expect(result.current.isSuccess).toEqual(true);
+      expect(result.current.isError).toEqual(false);
+      expect(result.current.data).toEqual({
+        events: [
+          {
+            timestamp: '2021-12-29T10:42:59.996Z',
+            sequence: 0,
+            level: LogLevelEnum.info,
+            type: RuleExecutionEventTypeEnum['status-change'],
+            execution_id: 'execution-id-1',
+            message: 'Rule changed status to "succeeded". Rule execution completed without errors',
+          },
+        ],
+        pagination: {
+          page: 1,
+          per_page: 20,
+          total: 1,
         },
-      ],
-      pagination: {
-        page: 1,
-        per_page: 20,
-        total: 1,
-      },
+      });
     });
   });
 
   it('handles exceptions from the API', async () => {
     const exception = new Error('Boom!');
     jest.spyOn(api, 'fetchRuleExecutionEvents').mockRejectedValue(exception);
 
-    const { result, waitForNextUpdate } = render();
+    const { result } = render();
 
     // It starts from a loading state
     expect(result.current.isLoading).toEqual(true);
     expect(result.current.isSuccess).toEqual(false);
     expect(result.current.isError).toEqual(false);
 
     // When fetchRuleExecutionEvents throws
-    await waitForNextUpdate();
-
-    // It switches to an error state
-    expect(result.current.isLoading).toEqual(false);
-    expect(result.current.isSuccess).toEqual(false);
-    expect(result.current.isError).toEqual(true);
-    expect(result.current.error).toEqual(exception);
-
-    // And shows a toast with the caught exception
-    expect(useToasts().addError).toHaveBeenCalledTimes(1);
-    expect(useToasts().addError).toHaveBeenCalledWith(exception, {
-      title: 'Failed to fetch rule execution events',
+    await waitFor(() => {
+      // It switches to an error state
+      expect(result.current.isLoading).toEqual(false);
+      expect(result.current.isSuccess).toEqual(false);
+      expect(result.current.isError).toEqual(true);
+      expect(result.current.error).toEqual(exception);
+
+      // And shows a toast with the caught exception
+      expect(useToasts().addError).toHaveBeenCalledTimes(1);
+      expect(useToasts().addError).toHaveBeenCalledWith(exception, {
+        title: 'Failed to fetch rule execution events',
+      });
     });
   });
 });
diff --git a/..._engine/rule_monitoring/components/execution_results_table/use_execution_results.test.tsx b/..._engine/rule_monitoring/components/execution_results_table/use_execution_results.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook, cleanup } from '@testing-library/react-hooks';
+import { cleanup, waitFor, renderHook } from '@testing-library/react';
 
 import { useExecutionResults } from './use_execution_results';
 import { useToasts } from '../../../../common/lib/kibana';
@@ -48,29 +48,27 @@ describe('useExecutionResults', () => {
   it('calls the API via fetchRuleExecutionResults', async () => {
     const fetchRuleExecutionResults = jest.spyOn(api, 'fetchRuleExecutionResults');
 
-    const { waitForNextUpdate } = render();
+    render();
 
-    await waitForNextUpdate();
+    await waitFor(() => expect(fetchRuleExecutionResults).toHaveBeenCalledTimes(1));
 
-    expect(fetchRuleExecutionResults).toHaveBeenCalledTimes(1);
     expect(fetchRuleExecutionResults).toHaveBeenLastCalledWith(
       expect.objectContaining({ ruleId: SOME_RULE_ID })
     );
   });
 
   it('fetches data from the API', async () => {
-    const { result, waitForNextUpdate } = render();
+    const { result } = render();
 
     // It starts from a loading state
     expect(result.current.isLoading).toEqual(true);
     expect(result.current.isSuccess).toEqual(false);
     expect(result.current.isError).toEqual(false);
 
     // When fetchRuleExecutionEvents returns
-    await waitForNextUpdate();
+    await waitFor(() => expect(result.current.isLoading).toEqual(false));
 
     // It switches to a success state
-    expect(result.current.isLoading).toEqual(false);
     expect(result.current.isSuccess).toEqual(true);
     expect(result.current.isError).toEqual(false);
     expect(result.current.data).toEqual({
@@ -107,18 +105,17 @@ describe('useExecutionResults', () => {
     const exception = new Error('Boom!');
     jest.spyOn(api, 'fetchRuleExecutionResults').mockRejectedValue(exception);
 
-    const { result, waitForNextUpdate } = render();
+    const { result } = render();
 
     // It starts from a loading state
     expect(result.current.isLoading).toEqual(true);
     expect(result.current.isSuccess).toEqual(false);
     expect(result.current.isError).toEqual(false);
 
     // When fetchRuleExecutionEvents throws
-    await waitForNextUpdate();
+    await waitFor(() => expect(result.current.isLoading).toEqual(false));
 
     // It switches to an error state
-    expect(result.current.isLoading).toEqual(false);
     expect(result.current.isSuccess).toEqual(false);
     expect(result.current.isError).toEqual(true);
     expect(result.current.error).toEqual(exception);