[React18] use waitFor with assertion callbacks in place of waitForNextUpdate

.eslintrc.js

@@ -892,6 +892,17 @@ module.exports = {
             message:
               'lodash.template is unsafe, and not compatible with our content security policy.',
           },
+          {
+            object: 'renderHook',
+            property: 'waitFor',
+            message:
+              "use waitFor exported from @testing-library/react instead. waitFor is not available on the returned object from renderHook in it's next version",
+          },
+          {
+            property: 'waitForNextUpdate',
+            message:
+              "use waitFor exported from @testing-library/react instead. waitForNextUpdate is not available on the returned object from renderHook in it's next version.",
+          },
         ],
       },
     },

package.json

@@ -50,6 +50,7 @@
     "dev-docs": "scripts/dev_docs.sh",
     "es": "node scripts/es",
     "preinstall": "node ./preinstall_check",
+    "postinstall": "patch-package",
     "kbn": "node scripts/kbn",
     "lint": "yarn run lint:es && yarn run lint:style",
     "lint:es": "node scripts/eslint",
@@ -1778,6 +1779,8 @@
     "oboe": "^2.1.4",
     "openapi-types": "^10.0.0",
     "p-reflect": "2.1.0",
+    "patch-package": "^8.0.0",
+    "pbf": "3.2.1",
     "peggy": "^1.2.0",
     "picomatch": "^2.3.1",
     "pidusage": "^3.0.2",
@@ -1791,6 +1794,7 @@
     "postcss-loader": "^4.2.0",
     "postcss-prefix-selector": "^1.16.0",
     "postcss-scss": "^4.0.4",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.8",
     "proxy": "^2.1.1",
     "raw-loader": "^3.1.0",

packages/kbn-alerts-ui-shared/src/alert_filter_controls/hooks/use_filters_sync_to_local_storage.test.ts

@@ -9,6 +9,7 @@
 
 import type { ControlGroupRuntimeState } from '@kbn/controls-plugin/public';
 import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, act } from '@testing-library/react';
 import { useControlGroupSyncToLocalStorage } from './use_control_group_sync_to_local_storage';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 
@@ -37,52 +38,60 @@ describe('Filters Sync to Local Storage', () => {
   afterEach(() => {
     mockLocalStorage = {};
   });
-  it('should not be undefined if localStorage has initial value', () => {
+  it('should not be undefined if localStorage has initial value', async () => {
     global.localStorage.setItem(TEST_STORAGE_KEY, JSON.stringify(DEFAULT_STORED_VALUE));
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useControlGroupSyncToLocalStorage({
         Storage,
         storageKey: TEST_STORAGE_KEY,
         shouldSync: true,
       })
     );
-    waitForNextUpdate();
-    expect(result.current.controlGroupState).toMatchObject(DEFAULT_STORED_VALUE);
+    await waitFor(() =>
+      expect(result.current.controlGroupState).toMatchObject(DEFAULT_STORED_VALUE)
+    );
   });
-  it('should be undefined if localstorage as NO initial value', () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
+  it('should be undefined if localstorage as NO initial value', async () => {
+    const { result } = renderHook(() =>
       useControlGroupSyncToLocalStorage({
         Storage,
         storageKey: TEST_STORAGE_KEY,
         shouldSync: true,
       })
     );
-    waitForNextUpdate();
-    expect(result.current.controlGroupState).toBeUndefined();
-    expect(result.current.setControlGroupState).toBeTruthy();
+    await waitFor(() =>
+      expect(result.current).toEqual(
+        expect.objectContaining({
+          controlGroupState: undefined,
+          setControlGroupState: expect.any(Function),
+        })
+      )
+    );
   });
-  it('should be update values to local storage when sync is ON', () => {
-    const { result, waitFor } = renderHook(() =>
+  it('should be update values to local storage when sync is ON', async () => {
+    const { result } = renderHook(() =>
       useControlGroupSyncToLocalStorage({
         Storage,
         storageKey: TEST_STORAGE_KEY,
         shouldSync: true,
       })
     );
-    waitFor(() => {
+    await waitFor(() => {
       expect(result.current.controlGroupState).toBeUndefined();
       expect(result.current.setControlGroupState).toBeTruthy();
     });
-    result.current.setControlGroupState(DEFAULT_STORED_VALUE);
-    waitFor(() => {
+    act(() => {
+      result.current.setControlGroupState(DEFAULT_STORED_VALUE);
+    });
+    await waitFor(() => {
       expect(result.current.controlGroupState).toMatchObject(DEFAULT_STORED_VALUE);
       expect(global.localStorage.getItem(TEST_STORAGE_KEY)).toBe(
         JSON.stringify(DEFAULT_STORED_VALUE)
       );
     });
   });
-  it('should not update values to local storage when sync is OFF', () => {
-    const { waitFor, result, rerender } = renderHook(() =>
+  it('should not update values to local storage when sync is OFF', async () => {
+    const { result, rerender } = renderHook(() =>
       useControlGroupSyncToLocalStorage({
         Storage,
         storageKey: TEST_STORAGE_KEY,
@@ -91,20 +100,20 @@ describe('Filters Sync to Local Storage', () => {
     );
 
     // Sync is ON
-    waitFor(() => {
+    await waitFor(() => {
       expect(result.current.controlGroupState).toBeUndefined();
       expect(result.current.setControlGroupState).toBeTruthy();
     });
 
     result.current.setControlGroupState(DEFAULT_STORED_VALUE);
-    waitFor(() => {
+    await waitFor(() => {
       expect(result.current.controlGroupState).toMatchObject(DEFAULT_STORED_VALUE);
     });
 
     // Sync is OFF
     rerender({ storageKey: TEST_STORAGE_KEY, shouldSync: false });
     result.current.setControlGroupState(ANOTHER_SAMPLE_VALUE);
-    waitFor(() => {
+    await waitFor(() => {
       expect(result.current.controlGroupState).toMatchObject(ANOTHER_SAMPLE_VALUE);
       // old value
       expect(global.localStorage.getItem(TEST_STORAGE_KEY)).toBe(

packages/kbn-alerts-ui-shared/src/common/hooks/use_fetch_alerts_fields_query.test.tsx

@@ -11,6 +11,7 @@ import React, { FC } from 'react';
 import { AlertConsumers } from '@kbn/rule-data-utils';
 import * as ReactQuery from '@tanstack/react-query';
 import { renderHook } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
 import { testQueryClientConfig } from '../test_utils/test_query_client_config';
 import { useFetchAlertsFieldsQuery } from './use_fetch_alerts_fields_query';
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
@@ -88,35 +89,37 @@ describe('useFetchAlertsFieldsQuery', () => {
   });
 
   it('should call the api only once', async () => {
-    const { result, rerender, waitForValueToChange } = renderHook(
+    const { result, rerender } = renderHook(
       () => useFetchAlertsFieldsQuery({ http: mockHttpClient, featureIds: ['apm'] }),
       {
         wrapper,
       }
     );
 
-    await waitForValueToChange(() => result.current.data);
-
-    expect(mockHttpGet).toHaveBeenCalledTimes(1);
-    expect(result.current.data).toEqual({
-      browserFields: { fakeCategory: {} },
-      fields: [
-        {
-          name: 'fakeCategory',
-        },
-      ],
+    await waitFor(() => {
+      expect(mockHttpGet).toHaveBeenCalledTimes(1);
+      expect(result.current.data).toEqual({
+        browserFields: { fakeCategory: {} },
+        fields: [
+          {
+            name: 'fakeCategory',
+          },
+        ],
+      });
     });
 
     rerender();
 
-    expect(mockHttpGet).toHaveBeenCalledTimes(1);
-    expect(result.current.data).toEqual({
-      browserFields: { fakeCategory: {} },
-      fields: [
-        {
-          name: 'fakeCategory',
-        },
-      ],
+    await waitFor(() => {
+      expect(mockHttpGet).toHaveBeenCalledTimes(1);
+      expect(result.current.data).toEqual({
+        browserFields: { fakeCategory: {} },
+        fields: [
+          {
+            name: 'fakeCategory',
+          },
+        ],
+      });
     });
   });
 
@@ -132,8 +135,10 @@ describe('useFetchAlertsFieldsQuery', () => {
       }
     );
 
-    expect(mockHttpGet).toHaveBeenCalledTimes(0);
-    expect(result.current.data).toEqual(emptyData);
+    await waitFor(() => {
+      expect(mockHttpGet).toHaveBeenCalledTimes(0);
+      expect(result.current.data).toEqual(emptyData);
+    });
   });
 
   it('should not fetch if all featureId are not valid', async () => {
@@ -148,8 +153,10 @@ describe('useFetchAlertsFieldsQuery', () => {
       }
     );
 
-    expect(mockHttpGet).toHaveBeenCalledTimes(0);
-    expect(result.current.data).toEqual(emptyData);
+    await waitFor(() => {
+      expect(mockHttpGet).toHaveBeenCalledTimes(0);
+      expect(result.current.data).toEqual(emptyData);
+    });
   });
 
   it('should filter out the non valid feature id', async () => {
@@ -164,9 +171,11 @@ describe('useFetchAlertsFieldsQuery', () => {
       }
     );
 
-    expect(mockHttpGet).toHaveBeenCalledTimes(1);
-    expect(mockHttpGet).toHaveBeenCalledWith('/internal/rac/alerts/browser_fields', {
-      query: { featureIds: ['apm', 'logs'] },
+    await waitFor(() => {
+      expect(mockHttpGet).toHaveBeenCalledTimes(1);
+      expect(mockHttpGet).toHaveBeenCalledWith('/internal/rac/alerts/browser_fields', {
+        query: { featureIds: ['apm', 'logs'] },
+      });
     });
   });
 });

packages/kbn-alerts-ui-shared/src/common/hooks/use_fetch_alerts_index_names_query.test.tsx

@@ -10,6 +10,7 @@
 import React, { FunctionComponent } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
 import { testQueryClientConfig } from '../test_utils/test_query_client_config';
 import { useFetchAlertsIndexNamesQuery } from './use_fetch_alerts_index_names_query';
 import { fetchAlertsIndexNames } from '../apis/fetch_alerts_index_names';
@@ -56,14 +57,14 @@ describe('useFetchAlertsIndexNamesQuery', () => {
   });
 
   it('correctly caches the index names', async () => {
-    const { result, rerender, waitForValueToChange } = renderHook(
+    const { result, rerender } = renderHook(
       () => useFetchAlertsIndexNamesQuery({ http: mockHttpClient, featureIds: ['apm'] }),
       {
         wrapper,
       }
     );
 
-    await waitForValueToChange(() => result.current.data);
+    await waitFor(() => result.current.data);
 
     expect(mockFetchAlertsIndexNames).toHaveBeenCalledTimes(1);