refactor(app, components, shared-data, protocol-designer, react-api-client): update to react 18

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
 
   extends: ['standard-with-typescript', 'plugin:react/recommended', 'prettier'],
 
-  plugins: ['react', 'react-hooks', 'json', 'jest'],
+  plugins: ['react', 'react-hooks', 'json', 'jest', 'testing-library'],
 
   rules: {
     camelcase: 'off',
@@ -95,6 +95,14 @@ module.exports = {
         'jest/no-conditional-expect': 'warn',
       },
     },
+    {
+      files: ['**/__tests__/**test.tsx'],
+      env: { jest: true },
+      extends: ['plugin:testing-library/react'],
+      rules: {
+        'testing-library/prefer-screen-queries': 'warn',
+      },
+    },
     {
       files: ['**/*.stories.tsx'],
       rules: {

app/package.json

@@ -21,15 +21,14 @@
     "@ebay/nice-modal-react": "1.2.13",
     "@fontsource/dejavu-sans": "5.0.3",
     "@fontsource/public-sans": "5.0.3",
-    "@hot-loader/react-dom": "17.0.1",
     "@opentrons/api-client": "link:../api-client",
     "@opentrons/components": "link:../components",
     "@opentrons/react-api-client": "link:../react-api-client",
     "@opentrons/shared-data": "link:../shared-data",
     "@thi.ng/paths": "1.6.5",
     "@types/uuid": "^3.4.7",
     "classnames": "2.2.5",
-    "connected-react-router": "6.8.0",
+    "connected-react-router": "6.9.3",
     "core-js": "3.2.1",
     "date-fns": "2.25.0",
     "events": "3.0.0",
@@ -43,14 +42,13 @@
     "mixpanel-browser": "2.22.1",
     "netmask": "2.0.2",
     "path-to-regexp": "3.0.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.10",
-    "react-hot-loader": "4.13.0",
-    "react-i18next": "^11.7.3",
+    "react-i18next": "13.5.0",
     "react-intersection-observer": "^8.33.1",
-    "react-redux": "7.2.1",
-    "react-router-dom": "5.1.1",
+    "react-redux": "8.1.2",
+    "react-router-dom": "5.3.4",
     "react-select": "5.4.0",
     "react-simple-keyboard": "^3.4.187",
     "react-viewport-list": "6.3.0",

app/src/App/__tests__/OnDeviceDisplayAppFallback.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { when } from 'jest-when'
+import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../i18n'
@@ -41,17 +42,17 @@ describe('OnDeviceDisplayAppFallback', () => {
   })
 
   it('should render text and button', () => {
-    const [{ getByText }] = render(props)
-    getByText('An unknown error has occurred')
-    getByText(
+    render(props)
+    screen.getByText('An unknown error has occurred')
+    screen.getByText(
       'You need to restart the touchscreen. Then download the robot logs from the Opentrons App and send them to [email protected] for assistance.'
     )
-    getByText('Restart touchscreen')
+    screen.getByText('Restart touchscreen')
   })
 
   it('should call a mock function when tapping reload button', () => {
-    const [{ getByText }] = render(props)
-    getByText('Restart touchscreen').click()
+    render(props)
+    fireEvent.click(screen.getByText('Restart touchscreen'))
     expect(mockTrackEvent).toHaveBeenCalledWith({
       name: ANALYTICS_ODD_APP_ERROR,
       properties: { errorMessage: 'mock error' },

app/src/App/__tests__/hooks.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { createStore } from 'redux'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
@@ -12,7 +12,7 @@ import type { Store } from 'redux'
 import type { State } from '../../redux/types'
 
 describe('useSoftwareUpdatePoll', () => {
-  let wrapper: React.FunctionComponent<{}>
+  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
   let store: Store<State>
   beforeEach(() => {
     jest.useFakeTimers()

app/src/App/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
-import { hot } from 'react-hot-loader/root'
 
 import { Flex, POSITION_FIXED, DIRECTION_ROW } from '@opentrons/components'
 
@@ -12,7 +11,7 @@ import { TopPortalRoot } from './portal'
 
 const stopEvent = (event: React.MouseEvent): void => event.preventDefault()
 
-export const AppComponent = (): JSX.Element | null => {
+export const App = (): JSX.Element | null => {
   const hasConfigLoaded = useSelector(getConfig) != null
   const isOnDevice = useSelector(getIsOnDevice)
 
@@ -34,5 +33,3 @@ export const AppComponent = (): JSX.Element | null => {
     </>
   ) : null
 }
-
-export const App = hot(AppComponent)

app/src/atoms/MenuList/__tests__/MenuList.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '@opentrons/components'
 import { MenuList } from '..'
 
@@ -17,17 +18,17 @@ describe('MenuList', () => {
   })
 
   it('renders a child not on device', () => {
-    const { getByText } = render(props)
-    getByText('mockBtn')
+    render(props)
+    screen.getByText('mockBtn')
   })
   it('renders isOnDevice child, clicking background overlay calls onClick', () => {
     props = {
       ...props,
       isOnDevice: true,
       onClick: jest.fn(),
     }
-    const { getByLabelText } = render(props)
-    getByLabelText('BackgroundOverlay_ModalShell').click()
+    render(props)
+    fireEvent.click(screen.getByLabelText('BackgroundOverlay_ModalShell'))
     expect(props.onClick).toHaveBeenCalled()
   })
 })

app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx

@@ -1,6 +1,6 @@
+import 'jest-styled-components'
 import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
-import 'jest-styled-components'
 import { COLORS, renderWithProviders } from '@opentrons/components'
 import { OverflowBtn } from '../OverflowBtn'
 

app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
-import { renderHook } from '@testing-library/react-hooks'
+import { fireEvent, renderHook } from '@testing-library/react'
 import { renderWithProviders } from '@opentrons/components'
 import { CustomKeyboard } from '..'
 
@@ -9,17 +8,12 @@ const render = (props: React.ComponentProps<typeof CustomKeyboard>) => {
 }
 
 describe('CustomKeyboard', () => {
-  let props: React.ComponentProps<typeof CustomKeyboard>
-
-  beforeEach(() => {
+  it('should render the custom keyboards lower case', () => {
     const { result } = renderHook(() => React.useRef(null))
-    props = {
+    const props = {
       onChange: jest.fn(),
       keyboardRef: result.current,
     }
-  })
-
-  it('should render the custom keyboards lower case', () => {
     const { getAllByRole } = render(props)
     const buttons = getAllByRole('button')
     const expectedButtonNames = [
@@ -59,6 +53,11 @@ describe('CustomKeyboard', () => {
     })
   })
   it('should render the custom keyboards upper case, when clicking shift key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: jest.fn(),
+      keyboardRef: result.current,
+    }
     const { getByRole, getAllByRole } = render(props)
     const shiftKey = getByRole('button', { name: 'SHIFT' })
     fireEvent.click(shiftKey)
@@ -102,6 +101,11 @@ describe('CustomKeyboard', () => {
   })
 
   it('should render the custom keyboards numbers, when clicking number key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: jest.fn(),
+      keyboardRef: result.current,
+    }
     const { getByRole, getAllByRole } = render(props)
     const numberKey = getByRole('button', { name: '123' })
     fireEvent.click(numberKey)
@@ -127,6 +131,11 @@ describe('CustomKeyboard', () => {
   })
 
   it('should render the custom keyboards lower case, when clicking number key then abc key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: jest.fn(),
+      keyboardRef: result.current,
+    }
     const { getByRole } = render(props)
     const numberKey = getByRole('button', { name: '123' })
     getByRole('button', { name: 'a' })

app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
-import { renderHook } from '@testing-library/react-hooks'
+import { fireEvent, renderHook } from '@testing-library/react'
 import { renderWithProviders } from '@opentrons/components'
 import { NormalKeyboard } from '..'
 
@@ -9,16 +8,12 @@ const render = (props: React.ComponentProps<typeof NormalKeyboard>) => {
 }
 
 describe('SoftwareKeyboard', () => {
-  let props: React.ComponentProps<typeof NormalKeyboard>
-
-  beforeEach(() => {
+  it('should render the software keyboards', () => {
     const { result } = renderHook(() => React.useRef(null))
-    props = {
+    const props = {
       onChange: jest.fn(),
       keyboardRef: result.current,
     }
-  })
-  it('should render the software keyboards', () => {
     const { getAllByRole } = render(props)
     const buttons = getAllByRole('button')
 
@@ -62,6 +57,11 @@ describe('SoftwareKeyboard', () => {
   })
 
   it('should render the software keyboards when hitting shift key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: jest.fn(),
+      keyboardRef: result.current,
+    }
     const { getAllByRole, getByRole } = render(props)
     const shiftKey = getByRole('button', { name: 'SHIFT' })
     fireEvent.click(shiftKey)
@@ -106,6 +106,11 @@ describe('SoftwareKeyboard', () => {
   })
 
   it('should render the software keyboards when hitting 123 key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: jest.fn(),
+      keyboardRef: result.current,
+    }
     const { getAllByRole, getByRole } = render(props)
     const numberKey = getByRole('button', { name: '123' })
     fireEvent.click(numberKey)
@@ -149,6 +154,11 @@ describe('SoftwareKeyboard', () => {
   })
 
   it('should render the software keyboards when hitting #+= key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: jest.fn(),
+      keyboardRef: result.current,
+    }
     const { getAllByRole, getByRole } = render(props)
     const numberKey = getByRole('button', { name: '123' })
     fireEvent.click(numberKey)
@@ -194,6 +204,11 @@ describe('SoftwareKeyboard', () => {
   })
 
   it('should call mock function when clicking a key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: jest.fn(),
+      keyboardRef: result.current,
+    }
     const { getByRole } = render(props)
     const aKey = getByRole('button', { name: 'a' })
     fireEvent.click(aKey)

app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
-import { renderHook } from '@testing-library/react-hooks'
+import { fireEvent, renderHook } from '@testing-library/react'
 import { renderWithProviders } from '@opentrons/components'
 import { Numpad } from '..'
 
@@ -9,16 +8,12 @@ const render = (props: React.ComponentProps<typeof Numpad>) => {
 }
 
 describe('Numpad', () => {
-  let props: React.ComponentProps<typeof Numpad>
-
-  beforeEach(() => {
+  it('should render the numpad keys', () => {
     const { result } = renderHook(() => React.useRef(null))
-    props = {
+    const props = {
       onChange: jest.fn(),
       keyboardRef: result.current,
     }
-  })
-  it('should render the numpad keys', () => {
     const { getAllByRole } = render(props)
     const buttons = getAllByRole('button')
     const expectedButtonNames = [
@@ -43,6 +38,11 @@ describe('Numpad', () => {
   })
 
   it('should call mock function when clicking num key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: jest.fn(),
+      keyboardRef: result.current,
+    }
     const { getByRole } = render(props)
     const numKey = getByRole('button', { name: '1' })
     fireEvent.click(numKey)

app/src/atoms/buttons/LargeButton.tsx

@@ -105,7 +105,6 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     <Btn
       display={DISPLAY_FLEX}
       css={LARGE_BUTTON_STYLE}
-      aria-label={`LargeButton_${buttonType}`}
       flexDirection={DIRECTION_COLUMN}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       disabled={disabled}
@@ -120,7 +119,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       </StyledText>
       <Icon
         name={iconName}
-        aria-label={`LargeButton_${iconName}`}
+        aria-label={`${iconName} icon`}
         color={
           disabled
             ? COLORS.darkBlack60

app/src/atoms/buttons/MediumButton.tsx

@@ -145,7 +145,6 @@ export function MediumButton(props: MediumButtonProps): JSX.Element {
       display={DISPLAY_FLEX}
       disabled={disabled}
       css={MEDIUM_BUTTON_STYLE}
-      aria-label={`MediumButton_${buttonType}`}
       alignItems={ALIGN_CENTER}
       justifyContent={JUSTIFY_CENTER}
       flexDirection={DIRECTION_ROW}
@@ -160,7 +159,7 @@ export function MediumButton(props: MediumButtonProps): JSX.Element {
       {iconName !== undefined && (
         <Icon
           name={iconName ?? 'play'}
-          aria-label={`MediumButton_${iconName ?? 'play'}`}
+          aria-label={`${iconName ?? 'play'} icon`}
           color={
             disabled
               ? COLORS.darkBlack60