[testing] replace testing-library/dom package with testing-library/re…

…act (#170594)

## Summary

Removes `testing-library/dom` from dependencies. As all the utilities
from`dom` are available already in `testing-library/react`, there's no
need to have both `dom` and `react` libraries available in our
package.json.

Following the [@testing-library/react
documentation:](https://testing-library.com/docs/react-testing-library/intro)

> [React Testing
Library](https://github.com/testing-library/react-testing-library)
builds on top of DOM Testing Library by adding APIs for working with
React components.

Let's just import everything from `testing-library/react`, this way we
won't need to worry about inconsistencies between `testing-library/dom`
we have in our `package.json` and the one that is
`testing-library/react` dependency.

package.json

@@ -1276,7 +1276,6 @@
     "@storybook/react-docgen-typescript-plugin": "^1.0.1",
     "@storybook/testing-react": "^1.3.0",
     "@storybook/theming": "^6.5.16",
-    "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",

packages/kbn-cell-actions/src/hooks/use_data_grid_column_cell_actions.test.tsx

@@ -13,8 +13,8 @@ import {
   EuiDataGridRefProps,
   type EuiDataGridColumnCellAction,
 } from '@elastic/eui';
-import { render, waitFor } from '@testing-library/react';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { render, waitFor, act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import { makeAction } from '../mocks/helpers';
 import {
   useDataGridColumnsCellActions,

packages/kbn-resizable-layout/src/panels_resizable.test.tsx

@@ -24,7 +24,7 @@ jest.mock('@elastic/eui', () => ({
 }));
 
 import * as eui from '@elastic/eui';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { ResizableLayoutDirection } from '../types';
 
 describe('Panels resizable', () => {

packages/kbn-securitysolution-exception-list-components/src/list_header/use_list_header.test.ts

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { act, renderHook } from '@testing-library/react-hooks';
 import { useExceptionListHeader } from './use_list_header';
 

src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import {

src/plugins/ui_actions/public/context_menu/open_context_menu.test.ts

@@ -7,7 +7,7 @@
  */
 
 import { createInteractionPositionTracker } from './open_context_menu';
-import { fireEvent } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/react';
 
 let targetEl: Element;
 const top = 100;

src/plugins/ui_actions/public/tests/execute_trigger_actions.test.ts

@@ -10,7 +10,7 @@ import { ActionDefinition } from '../actions';
 import { openContextMenu } from '../context_menu';
 import { uiActionsPluginMock } from '../mocks';
 import type { Trigger } from '@kbn/ui-actions-browser';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 jest.mock('../context_menu');
 

src/plugins/unified_histogram/public/chart/hooks/use_total_hits.test.ts

@@ -15,7 +15,7 @@ import { renderHook } from '@testing-library/react-hooks';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_source/mocks';
 import { of, Subject, throwError } from 'rxjs';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { RequestAdapter } from '@kbn/inspector-plugin/common';
 import { DataViewType, SearchSourceSearchOptions } from '@kbn/data-plugin/common';
 import { expressionsPluginMock } from '@kbn/expressions-plugin/public/mocks';

src/plugins/unified_search/public/query_string_input/query_string_input.test.tsx

@@ -15,8 +15,7 @@ import {
 import React from 'react';
 import { I18nProvider } from '@kbn/i18n-react';
 import { mount } from 'enzyme';
-import { waitFor } from '@testing-library/dom';
-import { render } from '@testing-library/react';
+import { waitFor, render } from '@testing-library/react';
 
 import { EuiTextArea, EuiIcon } from '@elastic/eui';
 

x-pack/packages/security-solution/navigation/src/navigation.test.ts

@@ -7,7 +7,7 @@
 import { useGetAppUrl, useNavigateTo } from './navigation';
 import { mockGetUrlForApp, mockNavigateToApp, mockNavigateToUrl } from '../mocks/context';
 import { renderHook } from '@testing-library/react-hooks';
-import { fireEvent } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/react';
 
 jest.mock('./context');
 

x-pack/plugins/alerting/public/hooks/use_archive_maintenance_window.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { act, renderHook } from '@testing-library/react-hooks/dom';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 import { MaintenanceWindow } from '../pages/maintenance_windows/types';
 import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';

x-pack/plugins/alerting/public/hooks/use_create_maintenance_window.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { act, renderHook } from '@testing-library/react-hooks/dom';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 import { MaintenanceWindow } from '../pages/maintenance_windows/types';
 import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';

x-pack/plugins/alerting/public/hooks/use_find_maintenance_windows.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { renderHook } from '@testing-library/react-hooks/dom';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';
 import { useFindMaintenanceWindows } from './use_find_maintenance_windows';

x-pack/plugins/alerting/public/hooks/use_finish_and_archive_maintenance_window.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { act, renderHook } from '@testing-library/react-hooks/dom';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 import { MaintenanceWindow } from '../pages/maintenance_windows/types';
 import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';

x-pack/plugins/alerting/public/hooks/use_finish_maintenance_window.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { act, renderHook } from '@testing-library/react-hooks/dom';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 import { MaintenanceWindow } from '../pages/maintenance_windows/types';
 import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';

x-pack/plugins/alerting/public/hooks/use_get_maintenance_window.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { renderHook } from '@testing-library/react-hooks/dom';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';
 import { useGetMaintenanceWindow } from './use_get_maintenance_window';

x-pack/plugins/alerting/public/hooks/use_update_maintenance_window.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { act, renderHook } from '@testing-library/react-hooks/dom';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 import { MaintenanceWindow } from '../pages/maintenance_windows/types';
 import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';

x-pack/plugins/alerting/public/pages/maintenance_windows/components/status_filter.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import { Query } from '@elastic/eui';
-import { fireEvent } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/react';
 import React from 'react';
 
 import { AppMockRenderer, createAppMockRenderer } from '../../../lib/test_utils';

x-pack/plugins/alerting/public/pages/maintenance_windows/components/table_actions_popover.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { fireEvent } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/react';
 import React from 'react';
 
 import { AppMockRenderer, createAppMockRenderer } from '../../../lib/test_utils';

x-pack/plugins/cases/public/common/mock/test_providers.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 
+import { render as reactRender } from '@testing-library/react';
 import type { RenderOptions, RenderResult } from '@testing-library/react';
 import type { ILicense } from '@kbn/licensing-plugin/public';
 import type { ScopedFilesClient } from '@kbn/files-plugin/public';
@@ -20,7 +21,6 @@ import { I18nProvider } from '@kbn/i18n-react';
 import { createMockFilesClient } from '@kbn/shared-ux-file-mocks';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import { render as reactRender } from '@testing-library/react';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { FilesContext } from '@kbn/shared-ux-file-context';
 

x-pack/plugins/cases/public/common/use_cases_toast.test.tsx

@@ -14,7 +14,7 @@ import { alertComment, basicComment, mockCase } from '../containers/mock';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import type { SupportedCaseAttachment } from '../types';
-import { getByTestId } from '@testing-library/dom';
+import { getByTestId } from '@testing-library/react';
 import { OWNER_INFO } from '../../common/constants';
 
 jest.mock('./lib/kibana');

x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { act, renderHook } from '@testing-library/react-hooks';
 import userEvent from '@testing-library/user-event';
 import React from 'react';

x-pack/plugins/cases/public/components/all_cases/severity_filter.test.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';
 import userEvent from '@testing-library/user-event';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
 import { SeverityFilter } from './severity_filter';
 

x-pack/plugins/cases/public/components/all_cases/use_actions.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import userEvent from '@testing-library/user-event';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks/dom';
 
 import { useActions } from './use_actions';

x-pack/plugins/cases/public/components/case_action_bar/actions.test.tsx

@@ -13,7 +13,7 @@ import { basicCase, basicPush } from '../../containers/mock';
 import { Actions } from './actions';
 import * as i18n from '../case_view/translations';
 import * as api from '../../containers/api';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 jest.mock('../../containers/api');
 

x-pack/plugins/cases/public/components/case_view/components/case_view_alerts.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { OBSERVABILITY_OWNER } from '../../../../common/constants';
 import { alertCommentWithIndices, basicCase } from '../../../containers/mock';
 import type { AppMockRenderer } from '../../../common/mock';

x-pack/plugins/cases/public/components/case_view/index.test.tsx

@@ -30,7 +30,7 @@ import { useGetSupportedActionConnectors } from '../../containers/configure/use_
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';
 import CaseView from '.';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { useGetTags } from '../../containers/use_get_tags';
 import { casesQueriesKeys } from '../../containers/constants';
 import {

x-pack/plugins/cases/public/components/create/form.test.tsx

@@ -7,8 +7,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { act, render, within, fireEvent } from '@testing-library/react';
-import { waitFor } from '@testing-library/dom';
+import { act, render, within, fireEvent, waitFor } from '@testing-library/react';
 import { licensingMock } from '@kbn/licensing-plugin/public/mocks';
 
 import { NONE_CONNECTOR_ID } from '../../../common/constants';

x-pack/plugins/cases/public/components/create/severity.test.tsx

@@ -15,7 +15,7 @@ import { Severity } from './severity';
 import type { FormProps } from './schema';
 import { schema } from './schema';
 import userEvent from '@testing-library/user-event';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
 
 let globalForm: FormHook;

x-pack/plugins/cases/public/components/custom_fields/index.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from '@testing-library/dom';
+import { screen, waitFor } from '@testing-library/react';
 
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';

x-pack/plugins/cases/public/components/experimental_badge/experimental_badge.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { screen } from '@testing-library/dom';
+import { screen } from '@testing-library/react';
 
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';

x-pack/plugins/cases/public/components/visualizations/actions/add_to_existing_case.test.tsx

@@ -24,7 +24,7 @@ import {
   mockTimeRange,
 } from './mocks';
 import { useKibana } from '../../../common/lib/kibana';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { canUseCases } from '../../../client/helpers/can_use_cases';
 import { getCaseOwnerByAppId } from '../../../../common/utils/owner';
 

x-pack/plugins/cases/public/components/visualizations/actions/add_to_new_case.test.tsx

@@ -8,7 +8,7 @@
 import { LENS_EMBEDDABLE_TYPE, type Embeddable as LensEmbeddable } from '@kbn/lens-plugin/public';
 import { ErrorEmbeddable } from '@kbn/embeddable-plugin/public';
 import type { Action } from '@kbn/ui-actions-plugin/public';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 
 import { createAddToNewCaseLensAction } from './add_to_new_case';
 import type { ActionContext } from './types';

x-pack/plugins/cases/public/containers/configure/use_get_case_configuration.test.tsx

@@ -8,7 +8,7 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { useGetCaseConfiguration } from './use_get_case_configuration';
 import * as api from './api';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { useToasts } from '../../common/lib/kibana';
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';

x-pack/plugins/cases/public/containers/use_get_case.test.tsx

@@ -8,7 +8,7 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { useGetCase } from './use_get_case';
 import * as api from './api';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useToasts } from '../common/lib/kibana';

x-pack/plugins/cases/public/containers/use_get_feature_ids.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import { renderHook } from '@testing-library/react-hooks';
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { useToasts } from '../common/lib/kibana';
 import type { AppMockRenderer } from '../common/mock';
 import { createAppMockRenderer } from '../common/mock';

x-pack/plugins/cases/server/services/notifications/templates/assignees/renderer.test.ts

@@ -6,7 +6,7 @@
  */
 
 import { mockCases } from '../../../../mocks';
-import { getByText } from '@testing-library/dom';
+import { getByText } from '@testing-library/react';
 import { assigneesTemplateRenderer } from './renderer';
 import type { CaseSavedObjectTransformed } from '../../../../common/types/case';
 

x-pack/plugins/cases/server/services/notifications/templates/assignees/template.test.ts

@@ -6,7 +6,7 @@
  */
 
 import { mockCases } from '../../../../mocks';
-import { getByText } from '@testing-library/dom';
+import { getByText } from '@testing-library/react';
 import { assigneesTemplateRenderer } from './renderer';
 import type { CaseSavedObjectTransformed } from '../../../../common/types/case';
 

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/summary_section.test.tsx

@@ -6,13 +6,12 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { expectIdsInDoc } from '../../../test/utils';
 import { DASHBOARD_COUNTER_CARDS } from '../test_subjects';
 import { SummarySection } from './summary_section';
 import { mockDashboardData } from '../mock';
 import { TestProvider } from '../../../test/test_provider';
-import { screen } from '@testing-library/react';
 import { KSPM_POLICY_TEMPLATE } from '../../../../common/constants';
 
 describe('<CloudSummarySection />', () => {

x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/engine_assignment_selector.test.tsx

@@ -13,7 +13,7 @@ import { engines } from '../../__mocks__/engines.mock';
 
 import React from 'react';
 
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import { EuiComboBox, EuiComboBoxOptionOption, EuiRadioGroup } from '@elastic/eui';

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/group_assignment_selector.test.tsx

@@ -11,7 +11,7 @@ import { setMockActions, setMockValues } from '../../../__mocks__/kea_logic';
 
 import React from 'react';
 
-import { waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import { EuiComboBox, EuiComboBoxOptionOption, EuiRadioGroup } from '@elastic/eui';

x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/components/action_menu/action_menu.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import { render } from '../../rtl_helpers';
-import { fireEvent, screen } from '@testing-library/dom';
+import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 import { sampleAttribute } from '../../configurations/test_data/sample_attribute';
 import * as pluginHook from '../../../../../hooks/use_plugin_context';