[ResponseOps][Cases] Remove appMockRender from flaky tests (#201406)

## Summary

This PR removes the usage of `appMockRender` from some flaky tests in
the hope they will stop being flaky. We suspect that the `appMockRender`
is the source of flakiness and we would like to verify our assumption.

Fixes: #189105
Fixes: #195698
Fixes: #189014
Fixes: #176679
Fixes: #188951
Fixes: #192672

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

(cherry picked from commit 3c2c891)

# Conflicts:
#	x-pack/plugins/cases/public/components/case_form_fields/severity.test.tsx

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

@@ -6,9 +6,7 @@
  */
 
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
+import { render, screen, waitFor } from '@testing-library/react';
 import { Severity } from './severity';
 import userEvent from '@testing-library/user-event';
 import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
@@ -17,18 +15,8 @@ import { FormTestComponent } from '../../common/test_utils';
 const onSubmit = jest.fn();
 
 describe('Severity form field', () => {
-  let appMockRender: AppMockRenderer;
-
-  beforeEach(() => {
-    appMockRender = createAppMockRenderer();
-  });
-
-  afterEach(async () => {
-    await appMockRender.clearQueryCache();
-  });
-
   it('renders', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <Severity isLoading={false} />
       </FormTestComponent>
@@ -40,7 +28,7 @@ describe('Severity form field', () => {
 
   // default to LOW in this test configuration
   it('defaults to the correct value', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <Severity isLoading={false} />
       </FormTestComponent>
@@ -51,7 +39,7 @@ describe('Severity form field', () => {
   });
 
   it('selects the correct value when changed', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <Severity isLoading={false} />
       </FormTestComponent>
@@ -73,7 +61,7 @@ describe('Severity form field', () => {
   });
 
   it('disables when loading data', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <Severity isLoading={true} />
       </FormTestComponent>

x-pack/plugins/cases/public/components/case_form_fields/title.test.tsx

@@ -7,7 +7,7 @@
 
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import type { FormHook } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
 import type { CaseFormFieldsSchemaProps } from './schema';
@@ -17,11 +17,9 @@ import userEvent from '@testing-library/user-event';
 
 import { Title } from './title';
 import { schema } from '../create/schema';
-import { createAppMockRenderer, type AppMockRenderer } from '../../common/mock';
 
 describe('Title', () => {
   let globalForm: FormHook;
-  let appMockRender: AppMockRenderer;
 
   const MockHookWrapperComponent: FC<PropsWithChildren<unknown>> = ({ children }) => {
     const { form } = useForm<CaseFormFieldsSchemaProps>({
@@ -38,11 +36,10 @@ describe('Title', () => {
 
   beforeEach(() => {
     jest.resetAllMocks();
-    appMockRender = createAppMockRenderer();
   });
 
   it('it renders', async () => {
-    appMockRender.render(
+    render(
       <MockHookWrapperComponent>
         <Title isLoading={false} />
       </MockHookWrapperComponent>
@@ -52,7 +49,7 @@ describe('Title', () => {
   });
 
   it('it disables the input when loading', async () => {
-    appMockRender.render(
+    render(
       <MockHookWrapperComponent>
         <Title isLoading={true} />
       </MockHookWrapperComponent>
@@ -61,7 +58,7 @@ describe('Title', () => {
   });
 
   it('it changes the title', async () => {
-    appMockRender.render(
+    render(
       <MockHookWrapperComponent>
         <Title isLoading={false} />
       </MockHookWrapperComponent>

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

@@ -6,31 +6,21 @@
  */
 
 import React from 'react';
-import { waitForEuiPopoverOpen, screen } from '@elastic/eui/lib/test/rtl';
-import { waitFor } from '@testing-library/react';
+import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
+import { render, waitFor, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
-
 import { FilterPopover } from '.';
 
 describe('FilterPopover ', () => {
-  let appMockRender: AppMockRenderer;
   const onSelectedOptionsChanged = jest.fn();
   const tags: string[] = ['coke', 'pepsi'];
 
   beforeEach(() => {
-    appMockRender = createAppMockRenderer();
     jest.clearAllMocks();
   });
 
-  afterEach(async () => {
-    await appMockRender.clearQueryCache();
-  });
-
   it('renders button label correctly', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -43,7 +33,7 @@ describe('FilterPopover ', () => {
   });
 
   it('renders empty label correctly', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -61,7 +51,7 @@ describe('FilterPopover ', () => {
   });
 
   it('renders string type options correctly', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -79,7 +69,7 @@ describe('FilterPopover ', () => {
   });
 
   it('should call onSelectionChange with selected option', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -100,7 +90,7 @@ describe('FilterPopover ', () => {
   });
 
   it('should call onSelectionChange with empty array when option is deselected', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -126,7 +116,7 @@ describe('FilterPopover ', () => {
     const maxLengthLabel = `You have selected maximum number of ${maxLength} tags to filter`;
 
     it('should show message when maximum options are selected', async () => {
-      appMockRender.render(
+      render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -152,7 +142,7 @@ describe('FilterPopover ', () => {
     });
 
     it('should not show message when maximum length label is missing', async () => {
-      appMockRender.render(
+      render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -176,7 +166,7 @@ describe('FilterPopover ', () => {
     });
 
     it('should not show message and disable options when maximum length property is missing', async () => {
-      appMockRender.render(
+      render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -198,7 +188,7 @@ describe('FilterPopover ', () => {
     });
 
     it('should allow to select more options when maximum length property is missing', async () => {
-      appMockRender.render(
+      render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}

x-pack/plugins/cases/public/components/user_actions/comment/registered_attachments.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import type {
   AttachmentType,
@@ -16,8 +16,6 @@ import { AttachmentActionType } from '../../../client/attachment_framework/types
 import { AttachmentTypeRegistry } from '../../../../common/registry';
 import { getMockBuilderArgs } from '../mock';
 import { createRegisteredAttachmentUserActionBuilder } from './registered_attachments';
-import type { AppMockRenderer } from '../../../common/mock';
-import { createAppMockRenderer } from '../../../common/mock';
 
 const getLazyComponent = () =>
   React.lazy(() => {
@@ -32,8 +30,6 @@ const getLazyComponent = () =>
   });
 
 describe('createRegisteredAttachmentUserActionBuilder', () => {
-  let appMockRender: AppMockRenderer;
-
   const attachmentTypeId = 'test';
   const builderArgs = getMockBuilderArgs();
   const registry = new AttachmentTypeRegistry<AttachmentType<CommonAttachmentViewProps>>(
@@ -77,7 +73,6 @@ describe('createRegisteredAttachmentUserActionBuilder', () => {
   };
 
   beforeEach(() => {
-    appMockRender = createAppMockRenderer();
     jest.clearAllMocks();
   });
 
@@ -161,8 +156,7 @@ describe('createRegisteredAttachmentUserActionBuilder', () => {
     const userAction =
       createRegisteredAttachmentUserActionBuilder(userActionBuilderArgs).build()[0];
 
-    // @ts-expect-error: children is a proper React element
-    appMockRender.render(userAction.children);
+    render(userAction.children);
 
     expect(await screen.findByText('My component')).toBeInTheDocument();
   });

x-pack/plugins/cases/public/components/user_actions/show_more_button.test.tsx

@@ -6,31 +6,25 @@
  */
 
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ShowMoreButton } from './show_more_button';
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
 
 const showMoreClickMock = jest.fn();
 
-// FLAKY: https://github.com/elastic/kibana/issues/192672
-describe.skip('ShowMoreButton', () => {
-  let appMockRender: AppMockRenderer;
-
+describe('ShowMoreButton', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    appMockRender = createAppMockRenderer();
   });
 
   it('renders correctly', () => {
-    appMockRender.render(<ShowMoreButton onShowMoreClick={showMoreClickMock} />);
+    render(<ShowMoreButton onShowMoreClick={showMoreClickMock} />);
 
     expect(screen.getByTestId('cases-show-more-user-actions')).toBeInTheDocument();
   });
 
   it('shows loading state and is disabled when isLoading is true', () => {
-    appMockRender.render(<ShowMoreButton onShowMoreClick={showMoreClickMock} isLoading={true} />);
+    render(<ShowMoreButton onShowMoreClick={showMoreClickMock} isLoading={true} />);
 
     const btn = screen.getByTestId('cases-show-more-user-actions');
 
@@ -40,7 +34,7 @@ describe.skip('ShowMoreButton', () => {
   });
 
   it('calls onShowMoreClick on button click', async () => {
-    appMockRender.render(<ShowMoreButton onShowMoreClick={showMoreClickMock} />);
+    render(<ShowMoreButton onShowMoreClick={showMoreClickMock} />);
 
     await userEvent.click(screen.getByTestId('cases-show-more-user-actions'));
     expect(showMoreClickMock).toHaveBeenCalled();