Add react-router-v5-compat (#8110)

AudiusProject · Apr 16, 2024 · bfe784b · bfe784b
1 parent 6cb5cbc
commit bfe784b
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -171,6 +171,7 @@
     "react-qr-code": "2.0.12",
     "react-redux": "8.0.5",
     "react-router-dom": "5.3.4",
+    "react-router-dom-v5-compat": "6.22.3",
     "react-router-last-location": "2.0.1",
     "react-scroll-parallax": "3.3.2",
     "react-spring": "8.0.27",

diff --git a/packages/web/src/app/AppProviders.tsx b/packages/web/src/app/AppProviders.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 
 import { ConnectedRouter } from 'connected-react-router'
+import { CompatRouter } from 'react-router-dom-v5-compat'
 import { LastLocationProvider } from 'react-router-last-location'
 
 import { RouterContextProvider } from 'components/animated-switch/RouterContextProvider'
@@ -38,29 +39,31 @@ export const AppProviders = ({ children }: AppContextProps) => {
   return (
     <ReduxProvider initialStoreState={initialStoreState}>
       <ConnectedRouter history={history}>
-        <LastLocationProvider>
-          <TrpcProvider>
-            <AudiusQueryProvider>
-              <AppContextProvider>
-                <ThemeProvider>
-                  <NavProvider>
-                    <ScrollProvider>
-                      <RouterContextProvider>
-                        <MainContentContextProvider>
-                          <HeaderContextProvider>
-                            <ToastContextProvider>
-                              {children}
-                            </ToastContextProvider>
-                          </HeaderContextProvider>
-                        </MainContentContextProvider>
-                      </RouterContextProvider>
-                    </ScrollProvider>
-                  </NavProvider>
-                </ThemeProvider>
-              </AppContextProvider>
-            </AudiusQueryProvider>
-          </TrpcProvider>
-        </LastLocationProvider>
+        <CompatRouter>
+          <LastLocationProvider>
+            <TrpcProvider>
+              <AudiusQueryProvider>
+                <AppContextProvider>
+                  <ThemeProvider>
+                    <NavProvider>
+                      <ScrollProvider>
+                        <RouterContextProvider>
+                          <MainContentContextProvider>
+                            <HeaderContextProvider>
+                              <ToastContextProvider>
+                                {children}
+                              </ToastContextProvider>
+                            </HeaderContextProvider>
+                          </MainContentContextProvider>
+                        </RouterContextProvider>
+                      </ScrollProvider>
+                    </NavProvider>
+                  </ThemeProvider>
+                </AppContextProvider>
+              </AudiusQueryProvider>
+            </TrpcProvider>
+          </LastLocationProvider>
+        </CompatRouter>
       </ConnectedRouter>
     </ReduxProvider>
   )

diff --git a/packages/web/src/test/test-utils.tsx b/packages/web/src/test/test-utils.tsx
@@ -2,6 +2,9 @@ import { ReactElement, ReactNode } from 'react'
 
 import { ThemeProvider } from '@audius/harmony'
 import { render, RenderOptions } from '@testing-library/react'
+import { createMemoryHistory } from 'history'
+import { Router } from 'react-router-dom'
+import { CompatRouter } from 'react-router-dom-v5-compat'
 import { PartialDeep } from 'type-fest'
 
 import { ReduxProvider } from 'app/ReduxProvider'
@@ -21,11 +24,16 @@ const TestProviders =
   (options?: TestOptions) => (props: TestProvidersProps) => {
     const { children } = props
     const { reduxState } = options ?? {}
+    const history = createMemoryHistory()
     return (
       <ThemeProvider theme='day'>
         <ReduxProvider initialStoreState={reduxState}>
           <RouterContextProvider>
-            <ToastContextProvider>{children} </ToastContextProvider>
+            <ToastContextProvider>
+              <Router history={history}>
+                <CompatRouter>{children}</CompatRouter>
+              </Router>
+            </ToastContextProvider>
           </RouterContextProvider>
         </ReduxProvider>
       </ThemeProvider>

diff --git a/packages/web/src/test/vitest-setup.ts b/packages/web/src/test/vitest-setup.ts
@@ -1,7 +1,8 @@
 import '@testing-library/jest-dom/vitest'
 import './vitest-canvas-mock'
 
-import { vi } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import { afterEach, vi } from 'vitest'
 
 // Some global mocks that most tests will need.
 // If you need to provide any form of mocked responses, you can replace them in your test with a hoisted implementation
@@ -33,3 +34,5 @@ window.matchMedia = vi.fn().mockReturnValue({
   addListener: vi.fn(),
   removeListener: vi.fn()
 })
+
+afterEach(cleanup)