[8.19] [ML] Migrate Enzyme tests to RTL (#225423) (#226102)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[ML] Migrate `Enzyme` tests to `RTL`
(#225423)](#225423)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Robert
Jaszczurek","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-06-30T12:10:03Z","message":"[ML]
Migrate `Enzyme` tests to `RTL` (#225423)\n\nResolves
https://github.com/elastic/kibana/issues/223197","sha":"a01759c410312b65134c9daf505d94f8e55b9c44","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","Team:ML","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[ML]
Migrate `Enzyme` tests to
`RTL`","number":225423,"url":"https://github.com/elastic/kibana/pull/225423","mergeCommit":{"message":"[ML]
Migrate `Enzyme` tests to `RTL` (#225423)\n\nResolves
https://github.com/elastic/kibana/issues/223197","sha":"a01759c410312b65134c9daf505d94f8e55b9c44"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/225828","number":225828,"state":"MERGED","mergeCommit":{"sha":"7776cc0162e38bed303dd06b6819667a0e725f64","message":"[9.1]
[ML] Migrate `Enzyme` tests to `RTL` (#225423) (#225828)\n\n#
Backport\n\nThis will backport the following commits from `main` to
`9.1`:\n- [[ML] Migrate `Enzyme` tests to
`RTL`\n(#225423)](https://github.com/elastic/kibana/pull/225423)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Robert Jaszczurek
<[email protected]>"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/225423","number":225423,"mergeCommit":{"message":"[ML]
Migrate `Enzyme` tests to `RTL` (#225423)\n\nResolves
https://github.com/elastic/kibana/issues/223197","sha":"a01759c410312b65134c9daf505d94f8e55b9c44"}}]}]
BACKPORT-->

Co-authored-by: Robert Jaszczurek <[email protected]>

Author: kibanamachine

x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/__snapshots__/list.test.tsx.snap

@@ -6,11 +6,13 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import type { Job } from '../../../../../common/types/anomaly_detection_jobs';
 
 import type { CustomUrlListProps } from './list';
 import { CustomUrlList } from './list';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 
 jest.mock('../../../contexts/kibana');
 
@@ -53,27 +55,32 @@ function prepareTest(setCustomUrlsFn: jest.Mock) {
     dataViewListItems: [],
   };
 
-  return shallow(<CustomUrlList {...props} />);
+  return render(
+    <IntlProvider>
+      <CustomUrlList {...props} />
+    </IntlProvider>
+  );
 }
 
 describe('CustomUrlList', () => {
-  const setCustomUrls = jest.fn(() => {});
+  const setCustomUrls = jest.fn();
 
   test('renders a list of custom URLs', () => {
-    const wrapper = prepareTest(setCustomUrls);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = prepareTest(setCustomUrls);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('switches custom URL field to textarea and calls setCustomUrls on change', () => {
-    const wrapper = prepareTest(setCustomUrls);
-    wrapper.update();
-    const url1LabelInput = wrapper.find('[data-test-subj="mlJobEditCustomUrlInput_0"]');
-    url1LabelInput.simulate('focus');
-    wrapper.update();
-    const url1LabelTextarea = wrapper.find('[data-test-subj="mlJobEditCustomUrlTextarea_0"]');
-    expect(url1LabelTextarea).toBeDefined();
-    url1LabelTextarea.simulate('change', { target: { value: 'Edit' } });
-    wrapper.update();
+  test('switches custom URL field to textarea and calls setCustomUrls on change', async () => {
+    const { getByTestId } = prepareTest(setCustomUrls);
+    const user = userEvent.setup();
+
+    const input = getByTestId('mlJobEditCustomUrlInput_0');
+    await user.click(input);
+
+    const textarea = getByTestId('mlJobEditCustomUrlTextarea_0');
+    expect(textarea).toBeInTheDocument();
+
+    await user.type(textarea, 'Edit');
     expect(setCustomUrls).toHaveBeenCalled();
   });
 });

x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.test.tsx

@@ -211,8 +211,8 @@ export const CustomUrlList: FC<CustomUrlListProps> = ({
       : [];
 
     return (
-      <>
-        <EuiFlexGroup key={`url_${index}`} data-test-subj={`mlJobEditCustomUrlItem_${index}`}>
+      <React.Fragment key={`url_${index}`}>
+        <EuiFlexGroup data-test-subj={`mlJobEditCustomUrlItem_${index}`}>
           <EuiFlexItem grow={false}>
             <EuiFormRow
               label={
@@ -341,7 +341,7 @@ export const CustomUrlList: FC<CustomUrlListProps> = ({
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-      </>
+      </React.Fragment>
     );
   });
 

x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import { mount } from 'enzyme';
 import React from 'react';
+import { render } from '@testing-library/react';
 import { TimeRangeBar } from './timerange_bar';
 
 describe('TimeRangeBar', () => {
@@ -17,16 +17,16 @@ describe('TimeRangeBar', () => {
   };
 
   test('Renders gantt bar when isRunning is false', () => {
-    const wrapper = mount(<TimeRangeBar timerange={timeRange} />);
-    const ganttBar = wrapper.find('div[data-test-subj="mlJobSelectorGanttBar"]');
+    const { getByTestId } = render(<TimeRangeBar timerange={timeRange} />);
+    const ganttBar = getByTestId('mlJobSelectorGanttBar');
 
-    expect(ganttBar).toHaveLength(1);
+    expect(ganttBar).toBeInTheDocument();
   });
 
   test('Renders running animation bar when isRunning is true', () => {
-    const wrapper = mount(<TimeRangeBar timerange={timeRange} isRunning={true} />);
-    const runningBar = wrapper.find('div[data-test-subj="mlJobSelectorGanttBarRunning"]');
+    const { getByTestId } = render(<TimeRangeBar timerange={timeRange} isRunning={true} />);
+    const runningBar = getByTestId('mlJobSelectorGanttBarRunning');
 
-    expect(runningBar).toHaveLength(1);
+    expect(runningBar).toBeInTheDocument();
   });
 });

x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar.test.js

@@ -5,17 +5,31 @@
  * 2.0.
  */
 
-import { mount } from 'enzyme';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { CreateAnalyticsButton } from './create_analytics_button';
 
 describe('Data Frame Analytics: <CreateAnalyticsButton />', () => {
-  test('Minimal initialization', () => {
-    const wrapper = mount(
-      <CreateAnalyticsButton isDisabled={false} navigateToSourceSelection={jest.fn()} />
+  test('renders button with correct text', () => {
+    render(<CreateAnalyticsButton isDisabled={false} navigateToSourceSelection={jest.fn()} />);
+
+    expect(screen.getByText('Create job')).toBeInTheDocument();
+  });
+
+  test('calls navigateToSourceSelection when clicked', async () => {
+    const navigateToSourceSelection = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <CreateAnalyticsButton
+        isDisabled={false}
+        navigateToSourceSelection={navigateToSourceSelection}
+      />
     );
 
-    expect(wrapper.find('EuiButton').text()).toBe('Create job');
+    await user.click(screen.getByText('Create job'));
+    expect(navigateToSourceSelection).toHaveBeenCalledTimes(1);
   });
 });

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.test.tsx

@@ -6,12 +6,17 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { ExplorerNoInfluencersFound } from './explorer_no_influencers_found';
 
 describe('ExplorerNoInfluencersFound', () => {
   test('snapshot', () => {
-    const wrapper = shallow(<ExplorerNoInfluencersFound viewBySwimlaneFieldName="field_name" />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <IntlProvider>
+        <ExplorerNoInfluencersFound viewBySwimlaneFieldName="field_name" />
+      </IntlProvider>
+    );
+    expect(container).toMatchSnapshot();
   });
 });

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_button/create_analytics_button.test.tsx

@@ -6,12 +6,17 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { ExplorerNoResultsFound } from './explorer_no_results_found';
 
-describe('ExplorerNoInfluencersFound', () => {
+describe('ExplorerNoResultsFound', () => {
   test('snapshot', () => {
-    const wrapper = shallow(<ExplorerNoResultsFound />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <IntlProvider>
+        <ExplorerNoResultsFound hasResults={false} selectedJobsRunning={false} />
+      </IntlProvider>
+    );
+    expect(container.firstChild).toMatchSnapshot();
   });
 });