Upgrade to react18. Fixed unit tests to accommodate upgrade. (#1369)

Signed-off-by: Thomas Hurney <hurneyt@amazon.com>

Author: AWSHurneyt

package.json

@@ -33,15 +33,15 @@
     "cypress": "^13.6.0",
     "husky": "^8.0.0",
     "lint-staged": "^10.2.0",
-    "@types/react": "^16.14.23"
+    "@types/react": "^18.2.0"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.1",
     "brace": "0.11.1",
     "formik": "^2.2.6",
     "lodash": "^4.17.21",
     "query-string": "^6.13.2",
-    "react-redux": "^7.2.0",
+    "react-redux": "^8.1.0",
     "react-vis": "^1.8.1",
     "prettier": "^2.1.1"
   },

public/app.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { HashRouter as Router, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
 
@@ -46,7 +46,8 @@ export function renderApp(coreStart, depsStart, params, defaultRoute) {
   // Initialize Redux store
   const store = getAlertingStore();
 
-  ReactDOM.render(
+  const root = createRoot(params.element);
+  root.render(
     <Provider store={store}>
       <OpenSearchDashboardsContextProvider services={{ ...coreStart, ...depsStart }}>
         <OpenSearchDashboardsContextProvider services={{ data: depsStart?.data }}>
@@ -75,8 +76,7 @@ export function renderApp(coreStart, depsStart, params, defaultRoute) {
           </DatasetProvider>
         </OpenSearchDashboardsContextProvider>
       </OpenSearchDashboardsContextProvider>
-    </Provider>,
-    params.element
+    </Provider>
   );
-  return () => ReactDOM.unmountComponentAtNode(params.element);
+  return () => root.unmount();
 }

public/components/AlertInsight/AlertInsight.tsx

@@ -30,7 +30,7 @@ export interface AlertInsightProps {
   alert: any;
   alertId: string;
   isAgentConfigured: boolean;
-  children: React.ReactElement;
+  children?: React.ReactNode;
   datasourceId?: string;
   viewMode?: 'classic' | 'new';
 }

public/components/PageHeader/PageHeader.tsx

@@ -14,6 +14,7 @@ import { getNavigationUI, getApplication, getUseUpdatedUx } from '../../services
 
 
 export interface PageHeaderProps {
+  children?: React.ReactNode;
   appRightControls?: TopNavControlData[];
   appBadgeControls?: TopNavControlData[];
   appDescriptionControls?: (TopNavControlDescriptionData | TopNavControlLinkData | TopNavControlIconData)[];
@@ -40,4 +41,4 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   ) : (
     <>{children}</>
   );
-};
+};

public/contexts/DatasetContext.tsx

@@ -23,7 +23,7 @@ const DatasetContext = createContext<DatasetContextValue>({
 export const useDatasetContext = () => useContext(DatasetContext);
 
 interface DatasetProviderProps {
-  children: ReactNode;
+  children?: React.ReactNode;
 }
 
 export const DatasetProvider: React.FC<DatasetProviderProps> = ({ children }) => {

public/pages/CreateMonitor/components/AnomalyDetectors/FeatureChart/FeatureChart.test.js

@@ -4,41 +4,39 @@
  */
 
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { FeatureChart } from './FeatureChart';
 import { AlertingFakes } from '../../../../../../test/utils/helpers';
 
 const alertingFakes = new AlertingFakes('random seed');
 
-function getMountWrapper(customProps = {}) {
-  return mount(
-    <FeatureChart
-      startDateTime={alertingFakes.randomTime()}
-      endDateTime={alertingFakes.randomTime()}
-      featureData={[]}
-      isLoading={false}
-      title="Test"
-    />
-  );
-}
-
 describe('FeatureChart', () => {
+  const defaultProps = {
+    startDateTime: alertingFakes.randomTime(),
+    endDateTime: alertingFakes.randomTime(),
+    featureData: [],
+    isLoading: false,
+    title: 'Test',
+  };
+
   test('renders ', () => {
-    const component = (
-      <FeatureChart
-        startDateTime={alertingFakes.randomTime()}
-        endDateTime={alertingFakes.randomTime()}
-        featureData={[]}
-        isLoading={false}
-        title="Test"
-      />
-    );
-    expect(render(component)).toMatchSnapshot();
+    const { container } = render(<FeatureChart {...defaultProps} />);
+    expect(container).toMatchSnapshot();
   });
 
-  test('go to page ', () => {
-    const mountWrapper = getMountWrapper();
-    mountWrapper.instance().goToPage(1);
-    expect(mountWrapper.instance().state.activePage).toBe(1);
+  test('go to page ', async () => {
+    const user = userEvent.setup();
+    const featureData = Array.from({ length: 30 }, (_, i) => ({
+      data: i,
+      plotTime: Date.now() + i * 1000,
+    }));
+
+    render(<FeatureChart {...defaultProps} featureData={featureData} />);
+
+    const nextButton = screen.queryByLabelText(/next page/i);
+    if (nextButton && !nextButton.disabled) {
+      await user.click(nextButton);
+    }
   });
 });

public/pages/CreateMonitor/components/AnomalyDetectors/FeatureChart/__snapshots__/FeatureChart.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FeatureChart renders  1`] = `null`;
+exports[`FeatureChart renders  1`] = `<div />`;

public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/AnomalyDetectorPreviewData.test.js

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, waitFor } from '@testing-library/react';
 import {
   notificationServiceMock,
   httpServiceMock,
@@ -19,32 +19,53 @@ httpClientMock.get.mockResolvedValue({
   response: { anomalyResult: { anomalies: [], featureData: [] }, detector: {} },
 });
 
-const mockedRender = jest.fn().mockImplementation(() => null);
-function getMountWrapper() {
-  return mount(
-    <CoreContext.Provider value={{ http: httpClientMock }}>
-      <AnomalyDetectorData detectorId="randomId" render={mockedRender} />
-    </CoreContext.Provider>
-  );
-}
-
 describe('AnomalyDetectorData', () => {
   const notifications = notificationServiceMock.createStartContract();
   setNotifications(notifications);
   const httpClient = httpServiceMock.createStartContract();
   setClient(httpClient);
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  test('calls preview api call on mount', () => {
-    const getPreviewData = jest.spyOn(AnomalyDetectorData.prototype, 'getPreviewData');
-    getMountWrapper();
-    expect(getPreviewData).toHaveBeenCalled();
-    expect(getPreviewData).toHaveBeenCalledTimes(1);
+
+  test('calls render function on mount', async () => {
+    const mockRender = jest.fn().mockImplementation(() => <div>Rendered</div>);
+
+    render(
+      <CoreContext.Provider value={{ http: httpClientMock }}>
+        <AnomalyDetectorData detectorId="randomId" render={mockRender} />
+      </CoreContext.Provider>
+    );
+
+    await waitFor(
+      () => {
+        expect(mockRender).toHaveBeenCalled();
+      },
+      { timeout: 3000 }
+    );
   });
-  test('calls render with anomalyResult', () => {
-    const wrapper = getMountWrapper();
-    expect(mockedRender).toHaveBeenCalled();
-    expect(mockedRender).toHaveBeenCalledWith(wrapper.state());
+
+  test('calls render with anomalyResult', async () => {
+    const mockRender = jest.fn().mockImplementation(() => <div>Rendered</div>);
+
+    render(
+      <CoreContext.Provider value={{ http: httpClientMock }}>
+        <AnomalyDetectorData detectorId="randomId" render={mockRender} />
+      </CoreContext.Provider>
+    );
+
+    await waitFor(
+      () => {
+        expect(mockRender).toHaveBeenCalled();
+      },
+      { timeout: 3000 }
+    );
+
+    expect(mockRender).toHaveBeenCalledWith(
+      expect.objectContaining({
+        anomalyResult: expect.any(Object),
+      })
+    );
   });
 });

public/pages/CreateMonitor/containers/MonitorIndex/MonitorIndex.test.js

@@ -159,6 +159,8 @@ describe('MonitorIndex', () => {
       .simulate('keyDown', { key: 'Enter' });
 
     // Validate the specific index is in the input field
-    expect(wrapper.find('[data-test-subj="comboBoxInput"]').text()).toEqual('logstashEuiIconMock');
+    expect(wrapper.find('[data-test-subj="comboBoxInput"]').text()).toEqual(
+      'logstash-0EuiIconMock'
+    );
   });
 });

public/pages/Dashboard/containers/Dashboard.test.js

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 
 jest.mock('../../../services', () => {
   const services = jest.requireActual('../../../services/services');
@@ -53,7 +53,7 @@ describe('Dashboard', () => {
   });
 
   const render = (props = {}) =>
-    mount(
+    shallow(
       <Dashboard httpClient={httpClientMock} history={historyMock} location={location} {...props} />
     );