build(deps): upgrade to react 18

package.json

@@ -11,39 +11,40 @@
   },
   "homepage": ".",
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^29.0.3",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.10",
     "@types/node": "^17.0.35",
-    "@types/qrcode": "^1.5.2",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "conventional-changelog": "^3.1.25",
+    "@types/qrcode": "^1.5.3",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "conventional-changelog": "^5.1.0",
     "http-proxy-middleware": "^2.0.6",
-    "husky": "^8.0.1",
+    "husky": "^8.0.3",
     "jest-watch-typeahead": "^2.2.2",
     "jest-websocket-mock": "^2.5.0",
-    "lint-staged": "^13.0.3",
-    "prettier": "^3.0.3",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.1.0",
     "react-scripts": "^5.0.1",
     "typescript": "^4.8.4"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
-    "@table-library/react-table-library": "^4.0.23",
+    "@table-library/react-table-library": "^4.1.7",
     "bootstrap": "^5.3.2",
     "classnames": "^2.3.2",
     "formik": "^2.4.5",
-    "i18next": "^22.0.4",
-    "i18next-browser-languagedetector": "^7.0.1",
-    "qrcode": "^1.5.1",
-    "react": "^17.0.2",
-    "react-bootstrap": "^2.9.0",
-    "react-dom": "^17.0.2",
-    "react-i18next": "^12.0.0",
+    "i18next": "^23.7.7",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "qrcode": "^1.5.3",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.9.1",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.5.0",
     "react-router-bootstrap": "^0.26.2",
-    "react-router-dom": "^6.6.1"
+    "react-router-dom": "^6.20.0"
   },
   "scripts": {
     "dev:start": "REACT_APP_JAM_DEV_MODE=true npm start",

src/components/App.test.tsx

@@ -17,8 +17,8 @@ describe('<App />', () => {
     ;(apiMock.getSession as jest.Mock).mockResolvedValue(neverResolvingPromise)
   })
 
-  it('should display Onboarding screen initially', () => {
-    render(<App />)
+  it('should display Onboarding screen initially', async () => {
+    await act(async () => render(<App />))
 
     // Onboarding screen
     expect(screen.getByText('onboarding.splashscreen_button_get_started')).toBeInTheDocument()
@@ -27,58 +27,62 @@ describe('<App />', () => {
     // Wallets screen shown after Intro is skipped
     expect(screen.queryByText('wallets.title')).not.toBeInTheDocument()
 
-    act(() => {
-      const skipIntro = screen.getByText('onboarding.splashscreen_button_skip_intro')
-      user.click(skipIntro)
-    })
+    const skipIntro = screen.getByText('onboarding.splashscreen_button_skip_intro')
+    await user.click(skipIntro)
 
     expect(screen.getByText('wallets.title')).toBeInTheDocument()
   })
 
-  it('should display Wallets screen directly when Onboarding screen has been shown', () => {
+  it('should display Wallets screen directly when Onboarding screen has been shown', async () => {
     global.__DEV__.addToAppSettings({ showOnboarding: false })
 
-    act(() => {
-      render(<App />)
-    })
+    await act(async () => render(<App />))
 
     // Wallets screen
     expect(screen.getByText('wallets.title')).toBeInTheDocument()
     expect(screen.getByText('wallets.button_new_wallet')).toBeInTheDocument()
   })
 
-  it('should display a modal with beta warning information', () => {
+  it('should display a modal with beta warning information', async () => {
     global.__DEV__.addToAppSettings({ showOnboarding: false })
 
-    act(() => {
-      render(<App />)
-    })
+    await act(async () => render(<App />))
 
     expect(screen.getByText('Read this before using.')).toBeInTheDocument()
     expect(screen.queryByText(/While JoinMarket is tried and tested, Jam is not./)).not.toBeInTheDocument()
 
-    act(() => {
-      const readThis = screen.getByText('Read this before using.')
-      user.click(readThis)
-    })
+    const readThis = screen.getByText('Read this before using.')
+    await user.click(readThis)
 
     expect(screen.getByText('footer.warning_alert_text')).toBeInTheDocument()
     expect(screen.getByText('footer.warning_alert_button_ok')).toBeInTheDocument()
   })
 
-  it('should display a websocket connection indicator', async () => {
+  it('should display websocket connection indicator as CONNECTED', async () => {
     global.__DEV__.addToAppSettings({ showOnboarding: false })
 
-    act(() => {
+    await act(async () => {
       render(<App />)
     })
 
-    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(true)
-    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(false)
-
     await global.__DEV__.JM_WEBSOCKET_SERVER_MOCK.connected
 
     expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(true)
     expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(false)
   })
+
+  it('should display websocket connection indicator AS DISCONNECTED', async () => {
+    global.__DEV__.addToAppSettings({ showOnboarding: false })
+
+    await act(async () => {
+      render(<App />)
+    })
+
+    await act(async () => {
+      global.__DEV__.JM_WEBSOCKET_SERVER_MOCK.close()
+    })
+
+    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(false)
+    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(true)
+  })
 })

src/components/App.tsx

@@ -188,6 +188,10 @@ export default function App() {
     ),
     {
       basename: window.JM.PUBLIC_PATH,
+      future: {
+        v7_fetcherPersist: true,
+        v7_normalizeFormMethod: true,
+      },
     },
   )
 

src/components/Balance.test.tsx

@@ -1,6 +1,5 @@
 import { render } from '@testing-library/react'
 import user from '@testing-library/user-event'
-import { act } from 'react-dom/test-utils'
 import { screen } from '../testUtils'
 import { BTC, SATS } from '../utils'
 import Balance from './Balance'
@@ -144,67 +143,55 @@ describe('<Balance />', () => {
     expect(screen.queryByTestId('sats-symbol')).not.toBeInTheDocument()
   })
 
-  it('should toggle visibility of initially hidden balance on click by default', () => {
+  it('should toggle visibility of initially hidden balance on click by default', async () => {
     render(<Balance valueString={`21`} convertToUnit={SATS} showBalance={false} />)
     expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
     expect(screen.getByText(`*****`)).toBeInTheDocument()
 
-    act(() => {
-      user.click(screen.getByText(`*****`))
-    })
+    await user.click(screen.getByText(`*****`))
 
     expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
     expect(screen.queryByText(`*****`)).not.toBeInTheDocument()
 
-    act(() => {
-      user.click(screen.getByTestId(`sats-amount`))
-    })
+    await user.click(screen.getByTestId(`sats-amount`))
 
     expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
     expect(screen.getByText(`*****`)).toBeInTheDocument()
   })
 
-  it('should NOT toggle visibility of initially hidden balance on click when disabled via flag', () => {
+  it('should NOT toggle visibility of initially hidden balance on click when disabled via flag', async () => {
     render(<Balance valueString={`21`} convertToUnit={SATS} showBalance={false} enableVisibilityToggle={false} />)
     expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
     expect(screen.getByText(`*****`)).toBeInTheDocument()
 
-    act(() => {
-      user.click(screen.getByText(`*****`))
-    })
+    await user.click(screen.getByText(`*****`))
 
     expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
     expect(screen.getByText(`*****`)).toBeInTheDocument()
   })
 
-  it('should NOT toggle visibility of initially visible balance on click by default', () => {
+  it('should NOT toggle visibility of initially visible balance on click by default', async () => {
     render(<Balance valueString={`21`} convertToUnit={SATS} showBalance={true} />)
     expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
     expect(screen.queryByText(`*****`)).not.toBeInTheDocument()
 
-    act(() => {
-      user.click(screen.getByTestId(`sats-amount`))
-    })
+    await user.click(screen.getByTestId(`sats-amount`))
 
     expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
     expect(screen.queryByText(`*****`)).not.toBeInTheDocument()
   })
 
-  it('should toggle visibility of initially visible balance on click when enabled via flag', () => {
+  it('should toggle visibility of initially visible balance on click when enabled via flag', async () => {
     render(<Balance valueString={`21`} convertToUnit={SATS} showBalance={true} enableVisibilityToggle={true} />)
     expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
     expect(screen.queryByText(`*****`)).not.toBeInTheDocument()
 
-    act(() => {
-      user.click(screen.getByTestId(`sats-amount`))
-    })
+    await user.click(screen.getByTestId(`sats-amount`))
 
     expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
     expect(screen.getByText(`*****`)).toBeInTheDocument()
 
-    act(() => {
-      user.click(screen.getByText(`*****`))
-    })
+    await user.click(screen.getByText(`*****`))
 
     expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
     expect(screen.queryByText(`*****`)).not.toBeInTheDocument()