feat(components, app, labware-library): migrate to react-router-dom v…

…6.24.1 closes AUTH-564
Opentrons · Jul 17, 2024 · 0592367 · 0592367
1 parent 5852c07
commit 0592367
Show file tree

Hide file tree

Showing 60 changed files with 211 additions and 218 deletions.
diff --git a/app/src/App/__tests__/Navbar.test.tsx b/app/src/App/__tests__/Navbar.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { describe, it } from 'vitest'
 import { screen, render } from '@testing-library/react'
-import { StaticRouter } from 'react-router-dom'
+import { MemoryRouter } from 'react-router-dom'
 
 import { Navbar } from '../Navbar'
 
@@ -16,19 +16,19 @@ const ROUTE_PROPS: RouteProps[] = [
 describe('Navbar', () => {
   it('should render a NavbarLink for every nav location', () => {
     render(
-      <StaticRouter>
+      <MemoryRouter>
         <Navbar routes={ROUTE_PROPS} />
-      </StaticRouter>
+      </MemoryRouter>
     )
     screen.getByRole('link', { name: 'foo' })
     screen.getByRole('link', { name: 'bar' })
     screen.getByRole('link', { name: 'baz' })
   })
   it('should render logo, settings, and help', () => {
     render(
-      <StaticRouter>
+      <MemoryRouter>
         <Navbar routes={ROUTE_PROPS} />
-      </StaticRouter>
+      </MemoryRouter>
     )
     screen.getByRole('img', { name: 'opentrons logo' })
     screen.getByTestId('Navbar_settingsLink')

diff --git a/app/src/atoms/buttons/__tests__/BackButton.test.tsx b/app/src/atoms/buttons/__tests__/BackButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
-import { MemoryRouter, Route, Switch } from 'react-router-dom'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
 
 import { renderWithProviders } from '../../../__testing-utils__'
 
@@ -16,14 +16,10 @@ const render = (props?: React.HTMLProps<HTMLButtonElement>) => {
       initialIndex={1}
     >
       <BackButton {...props} />
-      <Switch>
-        <Route exact path="/current-page">
-          this is the current page
-        </Route>
-        <Route exact path="/previous-page">
-          this is the previous page
-        </Route>
-      </Switch>
+      <Routes>
+        <Route path="/current-page">this is the current page</Route>
+        <Route path="/previous-page">this is the previous page</Route>
+      </Routes>
     </MemoryRouter>,
     { i18nInstance: i18n }
   )[0]

diff --git a/app/src/molecules/CardButton/__tests__/CardButton.test.tsx b/app/src/molecules/CardButton/__tests__/CardButton.test.tsx
@@ -9,13 +9,13 @@ import { i18n } from '../../../i18n'
 import { CardButton } from '..'
 import type * as ReactRouterDom from 'react-router-dom'
 
-const mockPush = vi.fn()
+const mockNavigate = vi.fn()
 
 vi.mock('react-router-dom', async importOriginal => {
   const reactRouterDom = await importOriginal<typeof ReactRouterDom>()
   return {
     ...reactRouterDom,
-    useHistory: () => ({ push: mockPush } as any),
+    useNavigate: () => mockNavigate,
   }
 })
 
@@ -65,6 +65,6 @@ describe('CardButton', () => {
     render(props)
     const button = screen.getByRole('button')
     fireEvent.click(button)
-    expect(mockPush).toHaveBeenCalledWith('/mockPath')
+    expect(mockNavigate).toHaveBeenCalledWith('/mockPath')
   })
 })
diff --git a/app/src/organisms/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/app/src/organisms/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { MemoryRouter, Route, Switch } from 'react-router-dom'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
 import { when } from 'vitest-when'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 
@@ -34,20 +34,20 @@ const PROTOCOL_NAME = 'a protocol for otie'
 const render = (path = '/') => {
   return renderWithProviders(
     <MemoryRouter initialEntries={[path]} initialIndex={0}>
-      <Switch>
-        <Route exact path="/devices/:robotName">
+      <Routes>
+        <Route path="/devices/:robotName">
           <Breadcrumbs />
           <div>device details path matched</div>
         </Route>
-        <Route exact path="/devices/:robotName/protocol-runs/:runId">
+        <Route path="/devices/:robotName/protocol-runs/:runId">
           <Breadcrumbs />
           <div>protocol run details path matched</div>
         </Route>
-        <Route exact path="/protocols/:protocolKey">
+        <Route path="/protocols/:protocolKey">
           <Breadcrumbs />
           <div>protocol details path matched</div>
         </Route>
-      </Switch>
+      </Routes>
     </MemoryRouter>,
     {
       i18nInstance: i18n,

diff --git a/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx b/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { StaticRouter } from 'react-router-dom'
+import { MemoryRouter } from 'react-router-dom'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -30,15 +30,15 @@ vi.mock('../../ProtocolUpload/hooks')
 
 const render = (robotName: string = 'otie') => {
   return renderWithProviders(
-    <StaticRouter>
+    <MemoryRouter>
       <CalibrationTaskList
         robotName={robotName}
         pipOffsetCalLauncher={mockPipOffsetCalLauncher}
         tipLengthCalLauncher={mockTipLengthCalLauncher}
         deckCalLauncher={mockDeckCalLauncher}
         exitBeforeDeckConfigCompletion={false}
       />
-    </StaticRouter>,
+    </MemoryRouter>,
     {
       i18nInstance: i18n,
     }
@@ -82,15 +82,15 @@ describe('CalibrationTaskList', () => {
     // Complete screen will only render if a wizard has been launched
     fireEvent.click(screen.getByText('Calibrate'))
     rerender(
-      <StaticRouter>
+      <MemoryRouter>
         <CalibrationTaskList
           robotName={'otie'}
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
           exitBeforeDeckConfigCompletion={false}
         />
-      </StaticRouter>
+      </MemoryRouter>
     )
     expect(screen.getByText('Calibrations complete!')).toBeTruthy()
   })
@@ -108,15 +108,15 @@ describe('CalibrationTaskList', () => {
     screen.getByText('Right Mount')
     fireEvent.click(screen.getByText('Calibrate'))
     rerender(
-      <StaticRouter>
+      <MemoryRouter>
         <CalibrationTaskList
           robotName={'otie'}
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
           exitBeforeDeckConfigCompletion={false}
         />
-      </StaticRouter>
+      </MemoryRouter>
     )
     expect(screen.getByText('Calibrations complete!')).toBeTruthy()
   })
@@ -133,15 +133,15 @@ describe('CalibrationTaskList', () => {
     screen.getByText('Right Mount')
     fireEvent.click(screen.getByText('Calibrate'))
     rerender(
-      <StaticRouter>
+      <MemoryRouter>
         <CalibrationTaskList
           robotName={'otie'}
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
           exitBeforeDeckConfigCompletion={false}
         />
-      </StaticRouter>
+      </MemoryRouter>
     )
     expect(screen.getByText('Calibrations complete!')).toBeTruthy()
   })
@@ -158,15 +158,15 @@ describe('CalibrationTaskList', () => {
     screen.getByText('Right Mount')
     fireEvent.click(screen.getByText('Calibrate'))
     rerender(
-      <StaticRouter>
+      <MemoryRouter>
         <CalibrationTaskList
           robotName={'otie'}
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
           exitBeforeDeckConfigCompletion={false}
         />
-      </StaticRouter>
+      </MemoryRouter>
     )
     expect(screen.getByText('Calibrations complete!')).toBeTruthy()
   })
@@ -182,15 +182,15 @@ describe('CalibrationTaskList', () => {
     expect(recalibrateLinks).toHaveLength(3)
     fireEvent.click(recalibrateLinks[2])
     rerender(
-      <StaticRouter>
+      <MemoryRouter>
         <CalibrationTaskList
           robotName={'otie'}
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
           exitBeforeDeckConfigCompletion={false}
         />
-      </StaticRouter>
+      </MemoryRouter>
     )
     expect(screen.getByText('Calibrations complete!')).toBeTruthy()
   })
@@ -206,15 +206,15 @@ describe('CalibrationTaskList', () => {
     expect(recalibrateLinks).toHaveLength(3)
     fireEvent.click(recalibrateLinks[0])
     rerender(
-      <StaticRouter>
+      <MemoryRouter>
         <CalibrationTaskList
           robotName={'otie'}
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
           exitBeforeDeckConfigCompletion={false}
         />
-      </StaticRouter>
+      </MemoryRouter>
     )
     expect(screen.getByText('Calibrations complete!')).toBeTruthy()
   })
@@ -228,15 +228,15 @@ describe('CalibrationTaskList', () => {
     const recalibrateLink = screen.getByText('Recalibrate')
     fireEvent.click(recalibrateLink)
     rerender(
-      <StaticRouter>
+      <MemoryRouter>
         <CalibrationTaskList
           robotName={'otie'}
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
           exitBeforeDeckConfigCompletion={true}
         />
-      </StaticRouter>
+      </MemoryRouter>
     )
     expect(screen.getByText('Using current calibrations.')).toBeTruthy()
   })
@@ -253,15 +253,15 @@ describe('CalibrationTaskList', () => {
     fireEvent.click(calibrateButtons[0])
     expect(mockDeckCalLauncher).not.toHaveBeenCalled()
     rerender(
-      <StaticRouter>
+      <MemoryRouter>
         <CalibrationTaskList
           robotName={'otie'}
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
           exitBeforeDeckConfigCompletion={false}
         />
-      </StaticRouter>
+      </MemoryRouter>
     )
     const recalibrateLinks = screen.getAllByText('Recalibrate')
     expect(recalibrateLinks).toHaveLength(1) // only deck's recalibration link should be shown
@@ -281,15 +281,15 @@ describe('CalibrationTaskList', () => {
     fireEvent.click(calibrateButtons[0])
     expect(mockTipLengthCalLauncher).not.toHaveBeenCalled()
     rerender(
-      <StaticRouter>
+      <MemoryRouter>
         <CalibrationTaskList
           robotName={'otie'}
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
           exitBeforeDeckConfigCompletion={false}
         />
-      </StaticRouter>
+      </MemoryRouter>
     )
     fireEvent.click(screen.getByText('Left Mount'))
     const recalibrateLinks = screen.getAllByText('Recalibrate')

diff --git a/app/src/organisms/ChangePipette/__tests__/ChangePipette.test.tsx b/app/src/organisms/ChangePipette/__tests__/ChangePipette.test.tsx
@@ -21,18 +21,18 @@ import { ExitModal } from '../ExitModal'
 import { ConfirmPipette } from '../ConfirmPipette'
 import { ChangePipette } from '..'
 
-import type { useHistory } from 'react-router-dom'
+import type { useNavigate } from 'react-router-dom'
 import type { PipetteNameSpecs } from '@opentrons/shared-data'
 import type { AttachedPipette } from '../../../redux/pipettes/types'
 import type { DispatchApiRequestType } from '../../../redux/robot-api'
 
-const mockPush = vi.fn()
+const mockNavigate = vi.fn()
 
 vi.mock('react-router-dom', async importOriginal => {
-  const actual = await importOriginal<typeof useHistory>()
+  const actual = await importOriginal<typeof useNavigate>()
   return {
     ...actual,
-    useHistory: () => ({ push: mockPush }),
+    useNavigate: () => mockNavigate,
   }
 })
 

diff --git a/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx b/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
-import { StaticRouter } from 'react-router-dom'
+import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 
 import { simpleAnalysisFileFixture } from '@opentrons/api-client'
@@ -27,9 +27,9 @@ vi.mock('../../../resources/useNotifyDataReady')
 
 const render = (props: React.ComponentProps<typeof ChooseProtocolSlideout>) => {
   return renderWithProviders(
-    <StaticRouter>
+    <MemoryRouter>
       <ChooseProtocolSlideout {...props} />
-    </StaticRouter>,
+    </MemoryRouter>,
     {
       i18nInstance: i18n,
     }

diff --git a/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx b/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
-import { StaticRouter } from 'react-router-dom'
+import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 
@@ -30,9 +30,9 @@ vi.mock('../../../redux/networking')
 vi.mock('../../../resources/useNotifyDataReady')
 const render = (props: React.ComponentProps<typeof ChooseRobotSlideout>) => {
   return renderWithProviders(
-    <StaticRouter>
+    <MemoryRouter>
       <ChooseRobotSlideout {...props} />
-    </StaticRouter>,
+    </MemoryRouter>,
     {
       i18nInstance: i18n,
     }

diff --git a/app/src/organisms/ChooseRobotSlideout/__tests__/FileCard.test.tsx b/app/src/organisms/ChooseRobotSlideout/__tests__/FileCard.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { vi, it, describe, expect } from 'vitest'
 
-import { StaticRouter } from 'react-router-dom'
+import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '../../../__testing-utils__'
@@ -16,9 +16,9 @@ vi.mock('../../../resources/useNotifyDataReady')
 vi.mock('../../../redux/config')
 const render = (props: React.ComponentProps<typeof FileCard>) => {
   return renderWithProviders(
-    <StaticRouter>
+    <MemoryRouter>
       <FileCard {...props} />
-    </StaticRouter>,
+    </MemoryRouter>,
     {
       i18nInstance: i18n,
     }