[Remote clusters] Fix flaky jest tests (#58768)

x-pack/plugins/remote_clusters/__jest__/client_integration/remote_clusters_add.test.js

@@ -7,8 +7,6 @@
 import { pageHelpers, nextTick, setupEnvironment } from './helpers';
 import { NON_ALPHA_NUMERIC_CHARS, ACCENTED_CHARS } from './helpers/constants';
 
-jest.mock('ui/new_platform');
-
 const { setup } = pageHelpers.remoteClustersAdd;
 
 describe('Create Remote cluster', () => {

x-pack/plugins/remote_clusters/__jest__/client_integration/remote_clusters_edit.test.js

@@ -4,29 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-jest.mock('ui/new_platform');
+import { act } from 'react-dom/test-utils';
+
 import { RemoteClusterForm } from '../../public/application/sections/components/remote_cluster_form';
-// import { pageHelpers, setupEnvironment, nextTick } from './helpers';
-import { pageHelpers, nextTick } from './helpers';
+import { pageHelpers, setupEnvironment } from './helpers';
 import { REMOTE_CLUSTER_EDIT, REMOTE_CLUSTER_EDIT_NAME } from './helpers/constants';
 
-// const { setup } = pageHelpers.remoteClustersEdit;
+const { setup } = pageHelpers.remoteClustersEdit;
 const { setup: setupRemoteClustersAdd } = pageHelpers.remoteClustersAdd;
 
-// FLAKY: https://github.com/elastic/kibana/issues/57762
-// FLAKY: https://github.com/elastic/kibana/issues/57997
-// FLAKY: https://github.com/elastic/kibana/issues/57998
-describe.skip('Edit Remote cluster', () => {
-  // let server;
-  // let httpRequestsMockHelpers;
+describe('Edit Remote cluster', () => {
+  let server;
+  let httpRequestsMockHelpers;
   let component;
   let find;
   let exists;
-
-  /**
-   *
-   * commented out due to hooks being called regardless of skip
-   * https://github.com/facebook/jest/issues/8379
+  let waitFor;
 
   beforeAll(() => {
     ({ server, httpRequestsMockHelpers } = setupEnvironment());
@@ -39,13 +32,12 @@ describe.skip('Edit Remote cluster', () => {
   beforeEach(async () => {
     httpRequestsMockHelpers.setLoadRemoteClustersResponse([REMOTE_CLUSTER_EDIT]);
 
-    ({ component, find, exists } = setup());
-    await nextTick(100); // We need to wait next tick for the mock server response to kick in
-    component.update();
+    await act(async () => {
+      ({ component, find, exists, waitFor } = setup());
+      await waitFor('remoteClusterForm');
+    });
   });
 
-  */
-
   test('should have the title of the page set correctly', () => {
     expect(exists('remoteClusterPageTitle')).toBe(true);
     expect(find('remoteClusterPageTitle').text()).toEqual('Edit remote cluster');
@@ -60,14 +52,16 @@ describe.skip('Edit Remote cluster', () => {
    * the "create" remote cluster, we won't test it again but simply make sure that
    * the form component is indeed shared between the 2 app sections.
    */
-  test('should use the same Form component as the "<RemoteClusterEdit />" component', async () => {
-    const { component: addRemoteClusterComponent } = setupRemoteClustersAdd();
+  test('should use the same Form component as the "<RemoteClusterAdd />" component', async () => {
+    let addRemoteClusterTestBed;
 
-    await nextTick();
-    addRemoteClusterComponent.update();
+    await act(async () => {
+      addRemoteClusterTestBed = setupRemoteClustersAdd();
+      addRemoteClusterTestBed.waitFor('remoteClusterAddPage');
+    });
 
     const formEdit = component.find(RemoteClusterForm);
-    const formAdd = addRemoteClusterComponent.find(RemoteClusterForm);
+    const formAdd = addRemoteClusterTestBed.component.find(RemoteClusterForm);
 
     expect(formEdit.length).toBe(1);
     expect(formAdd.length).toBe(1);

x-pack/plugins/remote_clusters/__jest__/client_integration/remote_clusters_list.test.js

@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { act } from 'react-dom/test-utils';
 
 import {
   pageHelpers,
@@ -17,8 +18,6 @@ import { getRemoteClusterMock } from '../../fixtures/remote_cluster';
 
 import { PROXY_MODE } from '../../common/constants';
 
-jest.mock('ui/new_platform');
-
 const { setup } = pageHelpers.remoteClustersList;
 
 describe('<RemoteClusterList />', () => {
@@ -78,6 +77,7 @@ describe('<RemoteClusterList />', () => {
     let actions;
     let tableCellsValues;
     let rows;
+    let waitFor;
 
     // For deterministic tests, we need to make sure that remoteCluster1 comes before remoteCluster2
     // in the table list that is rendered. As the table orders alphabetically by index name
@@ -110,11 +110,11 @@ describe('<RemoteClusterList />', () => {
     beforeEach(async () => {
       httpRequestsMockHelpers.setLoadRemoteClustersResponse(remoteClusters);
 
-      // Mount the component
-      ({ component, find, exists, table, actions } = setup());
+      await act(async () => {
+        ({ component, find, exists, table, actions, waitFor } = setup());
 
-      await nextTick(100); // Make sure that the Http request is fulfilled
-      component.update();
+        await waitFor('remoteClusterListTable');
+      });
 
       // Read the remote clusters list table
       ({ rows, tableCellsValues } = table.getMetaData('remoteClusterListTable'));
@@ -241,8 +241,10 @@ describe('<RemoteClusterList />', () => {
         actions.clickBulkDeleteButton();
         actions.clickConfirmModalDeleteRemoteCluster();
 
-        await nextTick(600); // there is a 500ms timeout in the api action
-        component.update();
+        await act(async () => {
+          await nextTick(600); // there is a 500ms timeout in the api action
+          component.update();
+        });
 
         ({ rows } = table.getMetaData('remoteClusterListTable'));
 

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.js

@@ -884,7 +884,7 @@ export class RemoteClusterForm extends Component {
       <Fragment>
         {this.renderSaveErrorFeedback()}
 
-        <EuiForm>
+        <EuiForm data-test-subj="remoteClusterForm">
           <EuiDescribedFormGroup
             title={
               <EuiTitle size="s">

x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_add/remote_cluster_add.js

@@ -57,7 +57,11 @@ export class RemoteClusterAdd extends PureComponent {
     const { isAddingCluster, addClusterError } = this.props;
 
     return (
-      <EuiPageContent horizontalPosition="center" className="remoteClusterAddPage">
+      <EuiPageContent
+        horizontalPosition="center"
+        className="remoteClusterAddPage"
+        data-test-subj="remoteClusterAddPage"
+      >
         <RemoteClusterPageTitle
           title={
             <FormattedMessage