[ML] Migrate tests to react-testing-library.

x-pack/legacy/plugins/transform/public/__mocks__/shared_imports.ts

@@ -6,12 +6,14 @@
 
 jest.mock('ui/new_platform');
 
-export function XJsonMode() {}
-export function setDependencyCache() {}
-export const useRequest = () => ({
+export const expandLiteralStrings = jest.fn();
+export const XJsonMode = jest.fn();
+export const setDependencyCache = jest.fn();
+export const useRequest = jest.fn(() => ({
   isLoading: false,
   error: null,
   data: undefined,
-});
+}));
 export { mlInMemoryTableBasicFactory } from '../../../ml/public/application/components/ml_in_memory_table';
 export const SORT_DIRECTION = { ASC: 'asc' };
+export const KqlFilterBar = jest.fn(() => null);

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx

@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import { createPublicShim } from '../../../../../shim';
 import { getAppProviders } from '../../../../app_dependencies';
@@ -14,32 +15,28 @@ import { SearchItems } from '../../../../hooks/use_search_items';
 
 import { SourceIndexPreview } from './source_index_preview';
 
-// workaround to make React.memo() work with enzyme
-jest.mock('react', () => {
-  const r = jest.requireActual('react');
-  return { ...r, memo: (x: any) => x };
-});
-
 jest.mock('ui/new_platform');
 jest.mock('../../../../../shared_imports');
 
 describe('Transform: <SourceIndexPreview />', () => {
   test('Minimal initialization', () => {
+    // Arrange
     const props = {
       indexPattern: {
         title: 'the-index-pattern-title',
         fields: [] as any[],
       } as SearchItems['indexPattern'],
       query: getPivotQuery('the-query'),
     };
-
     const Providers = getAppProviders(createPublicShim());
-    const wrapper = shallow(
+    const { getByText } = render(
       <Providers>
         <SourceIndexPreview {...props} />
       </Providers>
     );
 
-    expect(wrapper).toMatchSnapshot();
+    // Act
+    // Assert
+    expect(getByText(`Source index ${props.indexPattern.title}`)).toBeInTheDocument();
   });
 });

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx

@@ -4,25 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import { createPublicShim } from '../../../../../shim';
 import { getAppProviders } from '../../../../app_dependencies';
 
 import { StepCreateForm } from './step_create_form';
 
-// workaround to make React.memo() work with enzyme
-jest.mock('react', () => {
-  const r = jest.requireActual('react');
-  return { ...r, memo: (x: any) => x };
-});
-
 jest.mock('ui/new_platform');
 jest.mock('../../../../../shared_imports');
 
 describe('Transform: <StepCreateForm />', () => {
   test('Minimal initialization', () => {
+    // Arrange
     const props = {
       createIndexPattern: false,
       transformId: 'the-transform-id',
@@ -32,12 +28,14 @@ describe('Transform: <StepCreateForm />', () => {
     };
 
     const Providers = getAppProviders(createPublicShim());
-    const wrapper = shallow(
+    const { getByText } = render(
       <Providers>
         <StepCreateForm {...props} />
       </Providers>
     );
 
-    expect(wrapper).toMatchSnapshot();
+    // Act
+    // Assert
+    expect(getByText('Create and start')).toBeInTheDocument();
   });
 });

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/pivot_preview.test.tsx

@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import { createPublicShim } from '../../../../../shim';
 import { getAppProviders } from '../../../../app_dependencies';
@@ -20,17 +21,12 @@ import { SearchItems } from '../../../../hooks/use_search_items';
 
 import { PivotPreview } from './pivot_preview';
 
-// workaround to make React.memo() work with enzyme
-jest.mock('react', () => {
-  const r = jest.requireActual('react');
-  return { ...r, memo: (x: any) => x };
-});
-
 jest.mock('ui/new_platform');
 jest.mock('../../../../../shared_imports');
 
 describe('Transform: <PivotPreview />', () => {
   test('Minimal initialization', () => {
+    // Arrange
     const groupBy: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
@@ -54,12 +50,14 @@ describe('Transform: <PivotPreview />', () => {
     };
 
     const Providers = getAppProviders(createPublicShim());
-    const wrapper = shallow(
+    const { getByText } = render(
       <Providers>
         <PivotPreview {...props} />
       </Providers>
     );
 
-    expect(wrapper).toMatchSnapshot();
+    // Act
+    // Assert
+    expect(getByText('Transform pivot preview')).toBeInTheDocument();
   });
 });

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx

@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import { createPublicShim } from '../../../../../shim';
 import { getAppProviders } from '../../../../app_dependencies';
@@ -19,25 +20,28 @@ import { SearchItems } from '../../../../hooks/use_search_items';
 
 import { StepDefineForm, getAggNameConflictToastMessages } from './step_define_form';
 
-// workaround to make React.memo() work with enzyme
-jest.mock('react', () => {
-  const r = jest.requireActual('react');
-  return { ...r, memo: (x: any) => x };
-});
-
 jest.mock('ui/new_platform');
 jest.mock('../../../../../shared_imports');
 
 describe('Transform: <DefinePivotForm />', () => {
   test('Minimal initialization', () => {
+    // Arrange
+    const searchItems = {
+      indexPattern: {
+        title: 'the-index-pattern-title',
+        fields: [] as any[],
+      } as SearchItems['indexPattern'],
+    };
     const Providers = getAppProviders(createPublicShim());
-    const wrapper = shallow(
+    const { getByLabelText } = render(
       <Providers>
-        <StepDefineForm onChange={() => {}} searchItems={{} as SearchItems} />
+        <StepDefineForm onChange={jest.fn()} searchItems={searchItems as SearchItems} />
       </Providers>
     );
 
-    expect(wrapper).toMatchSnapshot();
+    // Act
+    // Assert
+    expect(getByLabelText('Index pattern')).toBeInTheDocument();
   });
 });
 

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx

@@ -4,9 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
+import { createPublicShim } from '../../../../../shim';
+import { getAppProviders } from '../../../../app_dependencies';
 import {
   PivotAggsConfig,
   PivotGroupByConfig,
@@ -18,16 +21,18 @@ import { SearchItems } from '../../../../hooks/use_search_items';
 import { StepDefineExposedState } from './step_define_form';
 import { StepDefineSummary } from './step_define_summary';
 
-// workaround to make React.memo() work with enzyme
-jest.mock('react', () => {
-  const r = jest.requireActual('react');
-  return { ...r, memo: (x: any) => x };
-});
-
+jest.mock('ui/new_platform');
 jest.mock('../../../../../shared_imports');
 
 describe('Transform: <DefinePivotSummary />', () => {
   test('Minimal initialization', () => {
+    // Arrange
+    const searchItems = {
+      indexPattern: {
+        title: 'the-index-pattern-title',
+        fields: [] as any[],
+      } as SearchItems['indexPattern'],
+    };
     const groupBy: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
@@ -51,10 +56,16 @@ describe('Transform: <DefinePivotSummary />', () => {
       valid: true,
     };
 
-    const wrapper = shallow(
-      <StepDefineSummary formState={formState} searchItems={{} as SearchItems} />
+    const Providers = getAppProviders(createPublicShim());
+    const { getByText } = render(
+      <Providers>
+        <StepDefineSummary formState={formState} searchItems={searchItems as SearchItems} />
+      </Providers>
     );
 
-    expect(wrapper).toMatchSnapshot();
+    // Act
+    // Assert
+    expect(getByText('Group by')).toBeInTheDocument();
+    expect(getByText('Aggregations')).toBeInTheDocument();
   });
 });