React 17 to 18 upgrade (#3483)

web/package.json

@@ -47,10 +47,10 @@
     "ol": "^9.0.0-dev.1700506701744",
     "ol-pmtiles": "^0.4.0",
     "prettier": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-redux": "^8.0.0",
-    "react-router-dom": "^6.0.0",
+    "react-router-dom": "^6.22.3",
     "recharts": "^2.1.8",
     "typescript": "^5.0.0"
   },
@@ -85,13 +85,14 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/instrument-cra": "^1.4.0",
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/user-event": "^14.1.1",
-    "@types/jest": "^29.0.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
     "@types/recharts": "^1.8.23",
     "cypress": "^13.0.0",
     "eslint": "^8.12.0",

web/src/app/App.tsx

@@ -10,14 +10,12 @@ LicenseInfo.setLicenseKey(MUI_LICENSE)
 
 const App: React.FunctionComponent = () => {
   return (
-    <React.StrictMode>
-      <StyledEngineProvider injectFirst>
-        <CssBaseline />
-        <ThemeProvider theme={theme}>
-          <WPSRoutes />
-        </ThemeProvider>
-      </StyledEngineProvider>
-    </React.StrictMode>
+    <StyledEngineProvider injectFirst>
+      <CssBaseline />
+      <ThemeProvider theme={theme}>
+        <WPSRoutes />
+      </ThemeProvider>
+    </StyledEngineProvider>
   )
 }
 

web/src/app/Routes.tsx

@@ -33,10 +33,21 @@ const WPSRoutes: React.FunctionComponent = () => {
     <Router>
       <Suspense fallback={<LoadingBackdrop isLoadingWithoutError={true} />}>
         <Routes>
-          <Route path={LANDING_PAGE_ROUTE} element={<LandingPage />} />
+          <Route
+            path={LANDING_PAGE_ROUTE}
+            element={
+              <React.StrictMode>
+                <LandingPage />
+              </React.StrictMode>
+            }
+          />
           <Route
             path={PERCENTILE_CALC_ROUTE}
-            element={<PercentileCalculatorPageWithDisclaimer showDisclaimer={shouldShowDisclaimer} />}
+            element={
+              <React.StrictMode>
+                <PercentileCalculatorPageWithDisclaimer showDisclaimer={shouldShowDisclaimer} />
+              </React.StrictMode>
+            }
           />
           <Route
             path={HFI_CALC_ROUTE}
@@ -46,7 +57,14 @@ const WPSRoutes: React.FunctionComponent = () => {
               </AuthWrapper>
             }
           />
-          <Route path={C_HAINES_ROUTE} element={<CHainesPage />} />
+          <Route
+            path={C_HAINES_ROUTE}
+            element={
+              <React.StrictMode>
+                <CHainesPage />
+              </React.StrictMode>
+            }
+          />
           <Route
             path={FIRE_BEHAVIOR_CALC_ROUTE}
             element={

web/src/components/dateRangePicker/dateRangePickerWrapper.test.tsx

@@ -36,7 +36,7 @@ describe('DateRangePickerWrapper', () => {
     const datePickerWrapper = getByTestId('date-range-picker-menu')
 
     expect(datePickerWrapper).toBeDefined()
-    expect(toggleMock).toBeCalledTimes(0)
-    expect(onChangeMock).toBeCalledTimes(0)
+    expect(toggleMock).toHaveBeenCalledTimes(0)
+    expect(onChangeMock).toHaveBeenCalledTimes(0)
   })
 })

web/src/components/dateRangePicker/menu.test.tsx

@@ -114,11 +114,11 @@ describe('Menu', () => {
     expect(endDateLabel).toBeDefined()
     expect(endDateLabel).toHaveTextContent(format(endDate, 'MMMM dd, yyyy'))
 
-    expect(onDayClickMock).toBeCalledTimes(0)
-    expect(onDayHoverMock).toBeCalledTimes(0)
-    expect(onMonthNavigateMock).toBeCalledTimes(0)
-    expect(setFirstMonthMock).toBeCalledTimes(0)
-    expect(setSecondMonthMock).toBeCalledTimes(0)
+    expect(onDayClickMock).toHaveBeenCalledTimes(0)
+    expect(onDayHoverMock).toHaveBeenCalledTimes(0)
+    expect(onMonthNavigateMock).toHaveBeenCalledTimes(0)
+    expect(setFirstMonthMock).toHaveBeenCalledTimes(0)
+    expect(setSecondMonthMock).toHaveBeenCalledTimes(0)
   })
 
   it('should render the start and end dates defaults when no range is specified', () => {

web/src/components/dateRangePicker/month.test.tsx

@@ -105,20 +105,24 @@ describe('Month', () => {
     expect(startDay.className).toMatch(/Day-buttonContainer/)
     const startDayButton = within(startDay).getByRole('button') as HTMLInputElement
 
-    startDayButton.focus()
-    fireEvent.click(startDayButton)
-    await waitFor(() => expect(onDayClickMock).toBeCalledTimes(1))
+    await waitFor(() => {
+      startDayButton.focus()
+      fireEvent.click(startDayButton)
+      expect(onDayClickMock).toHaveBeenCalledTimes(1)
+    })
 
     const endDay = getByTestId(`day-${endDate.toISOString().split('T')[0]}`)
 
     const endDayButton = within(endDay).getByRole('button') as HTMLInputElement
-    endDayButton.focus()
 
-    fireEvent.click(endDayButton)
-    await waitFor(() => expect(onDayClickMock).toBeCalledTimes(2))
+    await waitFor(() => {
+      endDayButton.focus()
+      fireEvent.click(endDayButton)
+      expect(onDayClickMock).toHaveBeenCalledTimes(2)
+    })
 
-    expect(onDayHoverMock).toBeCalledTimes(0)
-    expect(onMonthNavigateMock).toBeCalledTimes(0)
+    expect(onDayHoverMock).toHaveBeenCalledTimes(0)
+    expect(onMonthNavigateMock).toHaveBeenCalledTimes(0)
   })
   it('should disable day buttons outside of 7 day range', async () => {
     const dateRange = { startDate: new Date('2021/2/1'), endDate: new Date('2021/2/7') }

web/src/features/auth/components/AuthWrapper.tsx

@@ -47,7 +47,7 @@ const AuthWrapper = ({ children }: Props) => {
     return <div>You are not authenticated!</div>
   }
 
-  return children
+  return <React.StrictMode>{children}</React.StrictMode>
 }
 
 export default React.memo(AuthWrapper)

web/src/features/fba/components/map/FBAMap.tsx

@@ -292,6 +292,9 @@ const FBAMap = (props: FBAMapProps) => {
     }
 
     setMap(mapObject)
+    return () => {
+      mapObject.setTarget('')
+    }
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {

web/src/features/fba/components/map/legend.test.tsx

@@ -56,11 +56,11 @@ describe('Legend', () => {
     const zoneStatus = getByTestId('zone-checkbox')
     const zoneStatusCheckbox = within(zoneStatus).getByRole('checkbox')
     await userEvent.click(zoneStatusCheckbox)
-    await waitFor(() => expect(setShowZoneStatus).toBeCalledTimes(1))
+    await waitFor(() => expect(setShowZoneStatus).toHaveBeenCalledTimes(1))
 
     const hfi = getByTestId('hfi-checkbox')
     const hfiCheckbox = within(hfi).getByRole('checkbox')
     await userEvent.click(hfiCheckbox)
-    await waitFor(() => expect(setShowHFI).toBeCalledTimes(1))
+    await waitFor(() => expect(setShowHFI).toHaveBeenCalledTimes(1))
   })
 })

web/src/features/hfiCalculator/components/fireStartsDropdown.test.tsx

@@ -25,7 +25,7 @@ describe('FireStartsDropdown', () => {
     const input = within(autocomplete).getByRole('combobox') as HTMLInputElement
 
     await waitFor(() => expect(input.value).toBe(lowestFireStarts.label))
-    await waitFor(() => expect(setFireStartsMock).toBeCalledTimes(0))
+    await waitFor(() => expect(setFireStartsMock).toHaveBeenCalledTimes(0))
   })
   it('should change value on change and call parent callback', async () => {
     const setFireStartsMock = jest.fn()
@@ -48,8 +48,8 @@ describe('FireStartsDropdown', () => {
     await waitFor(() => expect(input.value).toBe('2'))
 
     await userEvent.type(autocomplete, '{enter}')
-    await waitFor(() => expect(setFireStartsMock).toBeCalledTimes(1))
-    await waitFor(() => expect(setFireStartsMock).toBeCalledWith(testAreaId, dayOffset, highestFireStarts))
+    await waitFor(() => expect(setFireStartsMock).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(setFireStartsMock).toHaveBeenCalledWith(testAreaId, dayOffset, highestFireStarts))
   })
   it('should be disabled when fire starts are not enabled', async () => {
     const setFireStartsMock = jest.fn()

web/src/features/hfiCalculator/components/fuelTypeDropdown.test.tsx

@@ -65,8 +65,8 @@ describe('FuelTypeDropdown', () => {
     await user.type(input, '{enter}')
 
     await waitFor(() => expect(input.value).toBe(fuelTypes[5].abbrev))
-    await waitFor(() => expect(setFuelTypeMock).toBeCalledTimes(1))
-    await waitFor(() => expect(setFuelTypeMock).toBeCalledWith(testStation.code, fuelTypes[5].id))
+    await waitFor(() => expect(setFuelTypeMock).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(setFuelTypeMock).toHaveBeenCalledWith(testStation.code, fuelTypes[5].id))
   })
   it('should be disabled when set fuel type is disabled', async () => {
     const setFuelTypeMock = jest.fn()

web/src/features/hfiCalculator/components/planningAreaReadyToggle.test.tsx

@@ -49,10 +49,11 @@ describe('PlanningAreaReadyToggle', () => {
     )
     const togglebutton = getByTestId('hfi-toggle-ready')
 
-    togglebutton.focus()
-    userEvent.click(togglebutton)
-
-    await waitFor(() => expect(toggleMockFn).toHaveBeenCalledTimes(1))
+    await waitFor(() => {
+      togglebutton.focus()
+      userEvent.click(togglebutton)
+      expect(toggleMockFn).toHaveBeenCalledTimes(1)
+    })
   })
   it('should render the button disabled if no ready state exists', () => {
     const { getByTestId } = render(

web/src/features/hfiCalculator/components/stationAdmin/adminFuelTypeDropdown.test.tsx

@@ -31,10 +31,10 @@ describe('AdminFuelTypesDropdown', () => {
     userEvent.type(autocomplete, '{enter}')
 
     await waitFor(() => expect(input.value).toBe(fuelTypes[0].abbrev))
-    await waitFor(() => expect(handleEditStationMock).toBeCalledTimes(1))
+    await waitFor(() => expect(handleEditStationMock).toHaveBeenCalledTimes(1))
 
     await waitFor(() =>
-      expect(handleEditStationMock).toBeCalledWith(stationAdminRow.planningAreaId, stationAdminRow.rowId, {
+      expect(handleEditStationMock).toHaveBeenCalledWith(stationAdminRow.planningAreaId, stationAdminRow.rowId, {
         ...stationAdminRow,
         fuelType: { ...fuelTypes[0] }
       })

web/src/features/hfiCalculator/components/stationAdmin/adminRemoveButton.test.tsx

@@ -18,12 +18,15 @@ describe('AdminRemoveButton', () => {
     )
 
     const adminRemoveButton = getByTestId('admin-remove-button')
-    adminRemoveButton.focus()
-    userEvent.click(adminRemoveButton)
-
-    await waitFor(() => expect(removeMock).toBeCalledTimes(1))
-    await waitFor(() =>
-      expect(removeMock).toBeCalledWith(stationAdminRow.planningAreaId, stationAdminRow.rowId, stationAdminRow.station)
-    )
+    await waitFor(() => {
+      adminRemoveButton.focus()
+      userEvent.click(adminRemoveButton)
+      expect(removeMock).toHaveBeenCalledTimes(1)
+      expect(removeMock).toHaveBeenCalledWith(
+        stationAdminRow.planningAreaId,
+        stationAdminRow.rowId,
+        stationAdminRow.station
+      )
+    })
   })
 })

web/src/features/hfiCalculator/components/stationAdmin/adminStationDropdown.test.tsx

@@ -30,10 +30,10 @@ describe('AdminStationDropdown', () => {
     userEvent.type(autocomplete, '{enter}')
 
     await waitFor(() => expect(input.value).toBe(stationOptions[0].name))
-    await waitFor(() => expect(handleEditStationMock).toBeCalledTimes(1))
+    await waitFor(() => expect(handleEditStationMock).toHaveBeenCalledTimes(1))
 
     await waitFor(() =>
-      expect(handleEditStationMock).toBeCalledWith(stationAdminRow.planningAreaId, stationAdminRow.rowId, {
+      expect(handleEditStationMock).toHaveBeenCalledWith(stationAdminRow.planningAreaId, stationAdminRow.rowId, {
         ...stationAdminRow,
         station: { ...stationOptions[0] }
       })

web/src/features/hfiCalculator/components/stationAdmin/manageStationsButton.test.tsx

@@ -25,9 +25,10 @@ describe('ManageStationsButton', () => {
     )
 
     const manageStationsButton = getByTestId('manage-stations-button')
-    manageStationsButton.focus()
-    fireEvent.click(manageStationsButton)
-
-    await waitFor(() => expect(getByTestId('manage-stations-modal')).toBeInTheDocument())
+    await waitFor(() => {
+      manageStationsButton.focus()
+      fireEvent.click(manageStationsButton)
+      expect(getByTestId('manage-stations-modal')).toBeInTheDocument()
+    })
   })
 })

web/src/features/hfiCalculator/components/stationAdmin/planningAreaAdmin.test.tsx

@@ -76,10 +76,11 @@ describe('PlanningAreaAdmin', () => {
 
     const togglebutton = getByTestId('admin-add-station-button')
 
-    togglebutton.focus()
-    userEvent.click(togglebutton)
-
-    await waitFor(() => expect(adminHandlers.handleAddStation).toHaveBeenCalledTimes(1))
-    await waitFor(() => expect(adminHandlers.handleAddStation).toHaveBeenCalledWith(planningArea.id))
+    await waitFor(() => {
+      togglebutton.focus()
+      userEvent.click(togglebutton)
+      expect(adminHandlers.handleAddStation).toHaveBeenCalledTimes(1)
+      expect(adminHandlers.handleAddStation).toHaveBeenCalledWith(planningArea.id)
+    })
   })
 })

web/src/features/hfiCalculator/components/stationAdmin/saveStationUpdatesButton.test.tsx

@@ -108,6 +108,6 @@ describe('SaveStationUpdatesButton', () => {
     )
     const saveButton = getByTestId('save-new-station-button')
     userEvent.click(saveButton)
-    await waitFor(() => expect(handleSaveMock).toBeCalledTimes(1))
+    await waitFor(() => expect(handleSaveMock).toHaveBeenCalledTimes(1))
   })
 })

web/src/features/hfiCalculator/components/stationSelectCell.test.tsx

@@ -40,7 +40,7 @@ describe('StationSelectCell', () => {
     expect(input).not.toHaveAttribute('disabled')
     checkbox.focus()
     checkbox.click()
-    await waitFor(() => expect(toggleSelectedStationMock).toBeCalledTimes(1))
+    await waitFor(() => expect(toggleSelectedStationMock).toHaveBeenCalledTimes(1))
   })
 
   it('should be disabled when station is selected and not change checked value when clicked', async () => {

web/src/features/moreCast2/components/GroupHeader.tsx

@@ -64,7 +64,7 @@ const GroupHeader = ({ id, columns, weatherParam, handleShowHideChange }: GroupH
         <Stack sx={{ overflow: 'hidden' }}>
           <PopoverHeader>Choose Models to Display</PopoverHeader>
           <FormGroup>
-            {columns.map(column => {
+            {columns?.map(column => {
               return (
                 <PopoverFormControlLabel
                   control={