[8.x] [React@18] Upgrade `@testing-library/react` (#198918) (…

…#199592) # Backport This will backport the following commits from `main` to `8.x`: - [[React@18] Upgrade `@testing-library/react` (#198918)](#198918)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
elastic · Nov 11, 2024 · 1854055 · 1854055
1 parent 06580e9
commit 1854055
Show file tree

Hide file tree

Showing 17 changed files with 128 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -1518,9 +1518,9 @@
     "@storybook/react": "^6.5.16",
     "@storybook/testing-react": "^1.3.0",
     "@storybook/theming": "^6.5.16",
-    "@testing-library/dom": "^8.19.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/adm-zip": "^0.5.0",

diff --git a/packages/kbn-test/src/jest/mocks/react_dom_client_mock.ts b/packages/kbn-test/src/jest/mocks/react_dom_client_mock.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export {};
diff --git a/packages/kbn-test/src/jest/resolver.js b/packages/kbn-test/src/jest/resolver.js
@@ -58,6 +58,13 @@ module.exports = (request, options) => {
     });
   }
 
+  // This is a workaround to run tests with React 17 and the latest @testing-library/react
+  // This will be removed once we upgrade to React 18 and start transitioning to the Concurrent Mode
+  // Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
+  if (request === 'react-dom/client') {
+    return Path.resolve(__dirname, 'mocks/react_dom_client_mock.ts');
+  }
+
   if (request === `elastic-apm-node`) {
     return APM_AGENT_MOCK;
   }

diff --git a/packages/kbn-test/src/jest/setup/react_testing_library.js b/packages/kbn-test/src/jest/setup/react_testing_library.js
@@ -19,3 +19,34 @@ import { configure } from '@testing-library/react';
 
 // instead of default 'data-testid', use kibana's 'data-test-subj'
 configure({ testIdAttribute: 'data-test-subj', asyncUtilTimeout: 4500 });
+
+/* eslint-env jest */
+
+// This is a workaround to run tests with React 17 and the latest @testing-library/react
+// Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
+jest.mock('@testing-library/react', () => {
+  const actual = jest.requireActual('@testing-library/react');
+
+  return {
+    ...actual,
+    render: (ui, options) => actual.render(ui, { ...options, legacyRoot: true }),
+    renderHook: (render, options) => actual.renderHook(render, { ...options, legacyRoot: true }),
+  };
+});
+
+// This is a workaround to run tests with React 17 and the latest @testing-library/react
+// And prevent the act warnings that were supposed to be muted by @testing-library
+// The testing library mutes the act warnings in some cases by setting IS_REACT_ACT_ENVIRONMENT which is React@18 feature https://github.com/testing-library/react-testing-library/pull/1137/
+// Using this console override we're muting the act warnings as well
+// Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
+// NOTE: we're not muting all the act warnings but only those that testing-library wanted to mute
+const originalConsoleError = console.error;
+console.error = (...args) => {
+  if (global.IS_REACT_ACT_ENVIRONMENT === false) {
+    if (args[0].includes('Warning: An update to %s inside a test was not wrapped in act')) {
+      return;
+    }
+  }
+
+  originalConsoleError(...args);
+};
diff --git a/x-pack/packages/kbn-ai-assistant/src/utils/get_timeline_items_from_conversation.test.tsx b/x-pack/packages/kbn-ai-assistant/src/utils/get_timeline_items_from_conversation.test.tsx
@@ -18,7 +18,7 @@ const mockChatService = createMockChatService();
 
 let items: ReturnType<typeof getTimelineItemsfromConversation>;
 
-function Providers({ children }: { children: React.ReactElement }) {
+function Providers({ children }: { children: React.ReactNode }) {
   return (
     <IntlProvider locale="en" messages={{}}>
       <KibanaContextProvider

diff --git a/...ard/impl/data_quality_panel/data_quality_summary/summary_actions/check_all/index.test.tsx b/...ard/impl/data_quality_panel/data_quality_summary/summary_actions/check_all/index.test.tsx
@@ -403,10 +403,9 @@ describe('CheckAll', () => {
 
       // simulate the wall clock advancing
       for (let i = 0; i < totalIndexNames + 1; i++) {
-        act(() => {
+        await act(async () => {
           jest.advanceTimersByTime(1000 * 10);
         });
-
         await waitFor(() => {});
       }
     });

diff --git a/x-pack/plugins/cases/public/components/add_comment/index.test.tsx b/x-pack/plugins/cases/public/components/add_comment/index.test.tsx
@@ -21,12 +21,13 @@ import { CasesTimelineIntegrationProvider } from '../timeline_context';
 import { timelineIntegrationMock } from '../__mock__/timeline';
 import type { CaseAttachmentWithoutOwner } from '../../types';
 import type { AppMockRenderer } from '../../common/mock';
+import { useCreateAttachments } from '../../containers/use_create_attachments';
 
-jest.mock('../../containers/api', () => ({
-  createAttachments: jest.fn(),
-}));
+jest.mock('../../containers/use_create_attachments');
 
-const createAttachmentsMock = createAttachments as jest.Mock;
+const useCreateAttachmentsMock = useCreateAttachments as jest.Mock;
+
+const createAttachmentsMock = jest.fn().mockImplementation(() => defaultResponse);
 const onCommentSaving = jest.fn();
 const onCommentPosted = jest.fn();
 
@@ -58,7 +59,10 @@ describe('AddComment ', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     appMockRender = createAppMockRenderer();
-    createAttachmentsMock.mockImplementation(() => defaultResponse);
+    useCreateAttachmentsMock.mockReturnValue({
+      isLoading: false,
+      mutate: createAttachmentsMock,
+    });
   });
 
   afterEach(() => {
@@ -72,6 +76,11 @@ describe('AddComment ', () => {
   });
 
   it('should render spinner and disable submit when loading', async () => {
+    useCreateAttachmentsMock.mockReturnValue({
+      isLoading: true,
+      mutateAsync: createAttachmentsMock,
+    });
+
     appMockRender.render(<AddComment {...{ ...addCommentProps, showLoading: true }} />);
 
     fireEvent.change(screen.getByLabelText('caseComment'), {
@@ -109,16 +118,19 @@ describe('AddComment ', () => {
 
     await waitFor(() => expect(onCommentSaving).toBeCalled());
     await waitFor(() =>
-      expect(createAttachmentsMock).toBeCalledWith({
-        caseId: addCommentProps.caseId,
-        attachments: [
-          {
-            comment: sampleData.comment,
-            owner: SECURITY_SOLUTION_OWNER,
-            type: AttachmentType.user,
-          },
-        ],
-      })
+      expect(createAttachmentsMock).toBeCalledWith(
+        {
+          caseId: addCommentProps.caseId,
+          attachments: [
+            {
+              comment: sampleData.comment,
+              type: AttachmentType.user,
+            },
+          ],
+          caseOwner: SECURITY_SOLUTION_OWNER,
+        },
+        { onSuccess: expect.any(Function) }
+      )
     );
     await waitFor(() => {
       expect(screen.getByTestId('euiMarkdownEditorTextArea')).toHaveTextContent('');
@@ -258,16 +270,19 @@ describe('draft comment ', () => {
 
     await waitFor(() => {
       expect(onCommentSaving).toBeCalled();
-      expect(createAttachmentsMock).toBeCalledWith({
-        caseId: addCommentProps.caseId,
-        attachments: [
-          {
-            comment: sampleData.comment,
-            owner: SECURITY_SOLUTION_OWNER,
-            type: AttachmentType.user,
-          },
-        ],
-      });
+      expect(createAttachmentsMock).toBeCalledWith(
+        {
+          caseId: addCommentProps.caseId,
+          attachments: [
+            {
+              comment: sampleData.comment,
+              type: AttachmentType.user,
+            },
+          ],
+          caseOwner: SECURITY_SOLUTION_OWNER,
+        },
+        { onSuccess: expect.any(Function) }
+      );
     });
 
     await waitFor(() => {

diff --git a/x-pack/plugins/cases/public/components/create/index.test.tsx b/x-pack/plugins/cases/public/components/create/index.test.tsx
@@ -172,6 +172,8 @@ describe('CreateCase case', () => {
 
     await user.click(screen.getByTestId('create-case-submit'));
 
-    expect(defaultProps.onSuccess).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(defaultProps.onSuccess).toHaveBeenCalled();
+    });
   });
 });
diff --git a/x-pack/plugins/kubernetes_security/public/test/index.tsx b/x-pack/plugins/kubernetes_security/public/test/index.tsx
@@ -17,7 +17,7 @@ import { coreMock } from '@kbn/core/public/mocks';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 
-type UiRender = (ui: React.ReactElement, options?: RenderOptions) => RenderResult;
+type UiRender = (ui: React.ReactNode, options?: RenderOptions) => RenderResult;
 
 /**
  * Mocked app root context renderer
@@ -113,7 +113,7 @@ export const createAppRootMockRenderer = (): AppContextTestRender => {
     },
   });
 
-  const AppWrapper: React.FC<{ children: React.ReactElement }> = ({ children }) => (
+  const AppWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
     <AppRootProvider history={history} coreStart={coreStart}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </AppRootProvider>

diff --git a/...onents/shared/transaction_action_menu/__snapshots__/transaction_action_menu.test.tsx.snap b/...onents/shared/transaction_action_menu/__snapshots__/transaction_action_menu.test.tsx.snap
diff --git a/x-pack/plugins/security_solution/public/common/mock/endpoint/app_context_render.tsx b/x-pack/plugins/security_solution/public/common/mock/endpoint/app_context_render.tsx
@@ -283,7 +283,7 @@ export const createAppRootMockRenderer = (): AppContextTestRender => {
     },
   });
 
-  const AppWrapper: React.FC<{ children: React.ReactElement }> = ({ children }) => (
+  const AppWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
     <AppRootProvider
       store={store}
       history={history}

diff --git a/...ection_engine/rule_creation/components/related_integrations/related_integrations.test.tsx b/...ection_engine/rule_creation/components/related_integrations/related_integrations.test.tsx
@@ -499,6 +499,9 @@ describe('RelatedIntegrations form part', () => {
         comboBoxToggleButton: screen.getByTestId(COMBO_BOX_TOGGLE_BUTTON_TEST_ID),
         optionIndex: 0,
       });
+      await waitFor(() => {
+        expect(screen.getByTestId(VERSION_INPUT_TEST_ID)).toHaveValue('^1.2.0');
+      });
       await setVersion({ input: screen.getByTestId(VERSION_INPUT_TEST_ID), value: '1.0.0' });
       await submitForm();
       await waitFor(() => {
@@ -614,6 +617,9 @@ describe('RelatedIntegrations form part', () => {
       await selectFirstEuiComboBoxOption({
         comboBoxToggleButton: screen.getByTestId(COMBO_BOX_TOGGLE_BUTTON_TEST_ID),
       });
+      await waitFor(() => {
+        expect(screen.getByTestId(VERSION_INPUT_TEST_ID)).toHaveValue('^1.0.0');
+      });
       await setVersion({ input: screen.getByTestId(VERSION_INPUT_TEST_ID), value: '100' });
 
       expect(screen.getByTestId(RELATED_INTEGRATION_ROW)).toHaveTextContent(

diff --git a/x-pack/plugins/session_view/public/test/index.tsx b/x-pack/plugins/session_view/public/test/index.tsx
@@ -116,7 +116,7 @@ export const createAppRootMockRenderer = (): AppContextTestRender => {
     },
   });
 
-  const AppWrapper: React.FC<{ children: React.ReactElement }> = ({ children }) => (
+  const AppWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
     <AppRootProvider history={history} coreStart={coreStart}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </AppRootProvider>

diff --git a/x-pack/plugins/stack_connectors/public/connector_types/lib/test_utils.tsx b/x-pack/plugins/stack_connectors/public/connector_types/lib/test_utils.tsx
@@ -107,7 +107,7 @@ export interface AppMockRenderer {
 export const createAppMockRenderer = (): AppMockRenderer => {
   const services = createStartServicesMock();
 
-  const AppWrapper: React.FC<{ children: React.ReactElement }> = ({ children }) => (
+  const AppWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
     <I18nProvider>
       <KibanaContextProvider services={services}>{children}</KibanaContextProvider>
     </I18nProvider>

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.test.tsx
@@ -151,7 +151,7 @@ describe('health check', () => {
       // wait for useEffect to run
     });
 
-    const description = queryByRole(/banner/i);
+    const description = queryByRole('banner');
     expect(description!.textContent).toMatchInlineSnapshot(
       `"You must configure an encryption key to use Alerting. Learn more.(external, opens in a new tab or window)"`
     );

diff --git a/...gers_actions_ui/public/application/components/rules_setting/rules_settings_modal.test.tsx b/...gers_actions_ui/public/application/components/rules_setting/rules_settings_modal.test.tsx
@@ -116,6 +116,8 @@ const waitForModalLoad = async (options?: {
 
 describe('rules_settings_modal', () => {
   beforeEach(async () => {
+    jest.clearAllMocks();
+
     const [
       {
         application: { capabilities },

diff --git a/yarn.lock b/yarn.lock
@@ -9873,18 +9873,18 @@
   resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.1.4.tgz#86e04e677cd6c05fa230dd15ac223fa72d1d7090"
   integrity sha512-kIhULpw9TrGYnHp/8VfdcneIcxKnLixmADtukQRtJUmsVlMg0niMkwV0xZmi8hqa57xqilIHjWFA0GKvEjVU5g==
 
-"@testing-library/dom@^8.0.0", "@testing-library/dom@^8.19.0":
-  version "8.19.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f"
-  integrity sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==
+"@testing-library/dom@^10.4.0":
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
+  integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
-    aria-query "^5.0.0"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.3.0"
     chalk "^4.1.0"
     dom-accessibility-api "^0.5.9"
-    lz-string "^1.4.4"
+    lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
 "@testing-library/jest-dom@^6.5.0":
@@ -9908,14 +9908,12 @@
     "@babel/runtime" "^7.12.5"
     react-error-boundary "^3.1.0"
 
-"@testing-library/react@^12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
-  integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
+"@testing-library/react@^16.0.1":
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.0.1.tgz#29c0ee878d672703f5e7579f239005e4e0faa875"
+  integrity sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
-    "@types/react-dom" "<18.0.0"
 
 "@testing-library/user-event@^14.5.2":
   version "14.5.2"
@@ -10140,10 +10138,10 @@
   resolved "https://registry.yarnpkg.com/@types/archy/-/archy-0.0.32.tgz#8b572741dad9172dfbf289397af1bb41296d3e40"
   integrity sha512-5ZZ5+YGmUE01yejiXsKnTcvhakMZ2UllZlMsQni53Doc1JWhe21ia8VntRoRD6fAEWw08JBh/z9qQHJ+//MrIg==
 
-"@types/aria-query@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
-  integrity sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==
+"@types/aria-query@^5.0.1":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
+  integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==
 
 "@types/async@^3.2.3":
   version "3.2.15"
@@ -11171,7 +11169,7 @@
   resolved "https://registry.yarnpkg.com/@types/rbush/-/rbush-3.0.0.tgz#b6887d99b159e87ae23cd14eceff34f139842aa6"
   integrity sha512-W3ue/GYWXBOpkRm0VSoifrP3HV0Ni47aVJWvXyWMcbtpBy/l/K/smBRiJ+fI8f7shXRjZBiux+iJzYbh7VmcZg==
 
-"@types/react-dom@<18.0.0", "@types/react-dom@~18.2.0":
+"@types/react-dom@~18.2.0":
   version "18.2.25"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.25.tgz#2946a30081f53e7c8d585eb138277245caedc521"
   integrity sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==
@@ -12651,7 +12649,7 @@ aria-hidden@^1.2.2:
   dependencies:
     tslib "^2.0.0"
 
-aria-query@^5.0.0, aria-query@^5.1.3:
+aria-query@5.3.0, aria-query@^5.0.0, aria-query@^5.1.3:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
@@ -22566,7 +22564,7 @@ luxon@^1.25.0:
   resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.28.1.tgz#528cdf3624a54506d710290a2341aa8e6e6c61b0"
   integrity sha512-gYHAa180mKrNIUJCbwpmD0aTu9kV0dREDrwNnuyFAsO1Wt0EVYSZelPnJlbj9HplzXX/YWXHFTL45kvZ53M0pw==
 
-lz-string@^1.4.4:
+lz-string@^1.4.4, lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==