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

…grades kibana-security (#201151) (#202144) # Backport This will backport the following commits from `main` to `8.x`: - [[React18] Migrate test suites to account for testing library upgrades kibana-security (#201151)](#201151)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Eyo O. Eyo <[email protected]>
elastic · Nov 28, 2024 · defbb8b · defbb8b
1 parent 4e73cb1
commit defbb8b
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 43 deletions.
diff --git a/packages/kbn-user-profile-components/src/hooks/use_update_user_profile.test.tsx b/packages/kbn-user-profile-components/src/hooks/use_update_user_profile.test.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { act, renderHook, type WrapperComponent } from '@testing-library/react-hooks';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import React from 'react';
 import { BehaviorSubject, first, lastValueFrom, of } from 'rxjs';
 
@@ -35,7 +35,7 @@ const security = {
 
 const { http, notifications } = core;
 
-const wrapper: WrapperComponent<React.PropsWithChildren<{}>> = ({ children }) => (
+const wrapper = ({ children }: React.PropsWithChildren<unknown>) => (
   <UserProfilesKibanaProvider
     core={core}
     security={security}
@@ -78,7 +78,7 @@ describe('useUpdateUserProfile() hook', () => {
       await lastValueFrom(updateDone.pipe(first((v) => v === true)));
     });
 
-    const { result, waitForNextUpdate } = renderHook(() => useUpdateUserProfile(), { wrapper });
+    const { result } = renderHook(() => useUpdateUserProfile(), { wrapper });
     const { update } = result.current;
 
     expect(result.current.isLoading).toBeFalsy();
@@ -90,9 +90,7 @@ describe('useUpdateUserProfile() hook', () => {
     expect(result.current.isLoading).toBeTruthy();
 
     updateDone.next(true); // Resolve the http.post promise
-    await waitForNextUpdate();
-
-    expect(result.current.isLoading).toBeFalsy();
+    await waitFor(() => expect(result.current.isLoading).toBeFalsy());
   });
 
   test('should show a success notification by default', async () => {
@@ -118,7 +116,9 @@ describe('useUpdateUserProfile() hook', () => {
       return true;
     };
 
-    const { result } = renderHook(() => useUpdateUserProfile({ pageReloadChecker }), { wrapper });
+    const { result } = renderHook(() => useUpdateUserProfile({ pageReloadChecker }), {
+      wrapper,
+    });
     const { update } = result.current;
 
     await act(async () => {
@@ -146,7 +146,9 @@ describe('useUpdateUserProfile() hook', () => {
       userProfile$: of(initialValue),
     };
 
-    const { result } = renderHook(() => useUpdateUserProfile({ pageReloadChecker }), { wrapper });
+    const { result } = renderHook(() => useUpdateUserProfile({ pageReloadChecker }), {
+      wrapper,
+    });
     const { update } = result.current;
 
     const nextValue = { userSettings: { darkMode: 'light' as const } };

diff --git a/x-pack/packages/security/form_components/src/form_changes.test.tsx b/x-pack/packages/security/form_components/src/form_changes.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 
 import type { RevertFunction } from './form_changes';
 import { useFormChanges } from './form_changes';

diff --git a/x-pack/plugins/cases/public/components/case_form_fields/tags.test.tsx b/x-pack/plugins/cases/public/components/case_form_fields/tags.test.tsx
@@ -47,11 +47,14 @@ describe('Tags', () => {
   };
 
   beforeEach(() => {
-    jest.clearAllMocks();
     useGetTagsMock.mockReturnValue({ data: ['test'] });
     appMockRender = createAppMockRenderer();
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('it renders', async () => {
     appMockRender.render(
       <MockHookWrapperComponent>

diff --git a/x-pack/plugins/security/public/account_management/user_profile/user_profile.test.tsx b/x-pack/plugins/security/public/account_management/user_profile/user_profile.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import { mount } from 'enzyme';
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';

diff --git a/x-pack/plugins/security/public/components/use_badge.test.tsx b/x-pack/plugins/security/public/components/use_badge.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import React from 'react';
 
 import { coreMock } from '@kbn/core/public/mocks';

diff --git a/x-pack/plugins/security/public/components/use_capabilities.test.tsx b/x-pack/plugins/security/public/components/use_capabilities.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import React from 'react';
 
 import { coreMock } from '@kbn/core/public/mocks';

diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space_content_tab.test.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space_content_tab.test.tsx
@@ -114,7 +114,7 @@ describe('EditSpaceContentTab', () => {
       </TestComponent>
     );
 
-    await waitFor(() => null);
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(getSpaceContentSpy).toHaveBeenCalledTimes(1);
     expect(getSpaceContentSpy).toHaveBeenCalledWith(space.id);

diff --git a/x-pack/plugins/spaces/public/management/edit_space/provider/edit_space_provider.test.tsx b/x-pack/plugins/spaces/public/management/edit_space/provider/edit_space_provider.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 
@@ -88,10 +88,8 @@ describe('EditSpaceProvider', () => {
     });
 
     it('throws when the hook is used within a tree that does not have the provider', () => {
-      const { result } = renderHook(useEditSpaceServices);
-      expect(result.error).toBeDefined();
-      expect(result.error?.message).toEqual(
-        expect.stringMatching('EditSpaceService Context is missing.')
+      expect(() => renderHook(useEditSpaceServices)).toThrow(
+        /EditSpaceService Context is missing./
       );
     });
   });
@@ -109,12 +107,7 @@ describe('EditSpaceProvider', () => {
     });
 
     it('throws when the hook is used within a tree that does not have the provider', () => {
-      const { result } = renderHook(useEditSpaceStore);
-
-      expect(result.error).toBeDefined();
-      expect(result.error?.message).toEqual(
-        expect.stringMatching('EditSpaceStore Context is missing.')
-      );
+      expect(() => renderHook(useEditSpaceStore)).toThrow(/EditSpaceStore Context is missing./);
     });
   });
 });
diff --git a/...es/public/management/edit_space/roles/component/space_assign_role_privilege_form.test.tsx b/...es/public/management/edit_space/roles/component/space_assign_role_privilege_form.test.tsx
@@ -157,7 +157,7 @@ describe('PrivilegesRolesForm', () => {
 
     renderPrivilegeRolesForm();
 
-    await waitFor(() => null);
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     ['all', 'read', 'custom'].forEach((privilege) => {
       expect(screen.queryByTestId(`${privilege}-privilege-button`)).not.toBeInTheDocument();
@@ -174,9 +174,9 @@ describe('PrivilegesRolesForm', () => {
 
     renderPrivilegeRolesForm();
 
-    await waitFor(() => null);
-
-    expect(screen.getByTestId('space-assign-role-create-roles-privilege-button')).toBeDisabled();
+    await waitFor(() =>
+      expect(screen.getByTestId('space-assign-role-create-roles-privilege-button')).toBeDisabled()
+    );
   });
 
   it('makes a request to refetch available roles if page transitions back from a user interaction page visibility change', () => {
@@ -208,7 +208,7 @@ describe('PrivilegesRolesForm', () => {
       preSelectedRoles: roles,
     });
 
-    await waitFor(() => null);
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(screen.getByTestId(`${FEATURE_PRIVILEGES_READ}-privilege-button`)).toHaveAttribute(
       'aria-pressed',
@@ -234,11 +234,11 @@ describe('PrivilegesRolesForm', () => {
       ],
     });
 
-    await waitFor(() => null);
-
-    expect(screen.getByTestId(`${FEATURE_PRIVILEGES_ALL}-privilege-button`)).toHaveAttribute(
-      'aria-pressed',
-      String(true)
+    await waitFor(() =>
+      expect(screen.getByTestId(`${FEATURE_PRIVILEGES_ALL}-privilege-button`)).toHaveAttribute(
+        'aria-pressed',
+        String(true)
+      )
     );
   });
 
@@ -256,7 +256,7 @@ describe('PrivilegesRolesForm', () => {
       preSelectedRoles: roles,
     });
 
-    await waitFor(() => null);
+    await waitFor(() => new Promise((resolve) => resolve(null)));
 
     expect(screen.getByTestId(`${FEATURE_PRIVILEGES_READ}-privilege-button`)).toHaveAttribute(
       'aria-pressed',
@@ -290,9 +290,9 @@ describe('PrivilegesRolesForm', () => {
         preSelectedRoles: roles,
       });
 
-      await waitFor(() => null);
-
-      expect(screen.getByTestId('privilege-conflict-callout')).toBeInTheDocument();
+      await waitFor(() =>
+        expect(screen.getByTestId('privilege-conflict-callout')).toBeInTheDocument()
+      );
     });
 
     it('does not display the permission conflict message when roles with the same privilege levels are selected', async () => {
@@ -312,9 +312,9 @@ describe('PrivilegesRolesForm', () => {
         preSelectedRoles: roles,
       });
 
-      await waitFor(() => null);
-
-      expect(screen.queryByTestId('privilege-conflict-callout')).not.toBeInTheDocument();
+      await waitFor(() =>
+        expect(screen.queryByTestId('privilege-conflict-callout')).not.toBeInTheDocument()
+      );
     });
   });
 
@@ -348,7 +348,7 @@ describe('PrivilegesRolesForm', () => {
         preSelectedRoles: roles,
       });
 
-      await waitFor(() => null);
+      await waitFor(() => new Promise((resolve) => resolve(null)));
 
       await userEvent.click(screen.getByTestId('custom-privilege-button'));