Migration to React 18

cypress/e2e/create-wallet.cy.ts

@@ -10,6 +10,7 @@ describe('Create wallet', () => {
 
   it('Should have generated a mnemonic', () => {
     cy.findByTestId('generated-mnemonic')
+      .should('be.visible')
       .invoke('text')
       .then(text => {
         generatedMnemonic = text

cypress/e2e/scenario-transaction.cy.ts

@@ -8,12 +8,14 @@ describe('Scenario : from mnemonic', () => {
 
   before(function () {
     cy.visit('/account/oasis1qq5t7f2gecsjsdxmp5zxtwgck6pzpjmkvc657z6l')
+    cy.contains('Loading account')
     cy.contains('Loading account').should('not.exist')
     cy.findByTestId('account-balance-total').then($div => {
       senderBalanceBefore = parseBalance($div.text())
     })
 
     cy.visit('/account/oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk')
+    cy.contains('Loading account')
     cy.contains('Loading account').should('not.exist')
     cy.findByTestId('account-balance-total').then($div => {
       recipientBalanceBefore = parseBalance($div.text())
@@ -48,6 +50,7 @@ describe('Scenario : from mnemonic', () => {
       .should('be.eq', senderBalanceBefore - 10)
 
     cy.visit('/account/oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk')
+    cy.contains('Loading account')
     cy.contains('Loading account').should('not.exist')
     cy.findByTestId('account-balance-total')
       .invoke('text')
@@ -62,12 +65,14 @@ describe('Scenario : from private key', () => {
 
   before(function () {
     cy.visit('/account/oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk')
+    cy.contains('Loading account')
     cy.contains('Loading account').should('not.exist')
     cy.findByTestId('account-balance-total').then($div => {
       senderBalanceBefore = parseBalance($div.text())
     })
 
     cy.visit('/account/oasis1qq5t7f2gecsjsdxmp5zxtwgck6pzpjmkvc657z6l')
+    cy.contains('Loading account')
     cy.contains('Loading account').should('not.exist')
     cy.findByTestId('account-balance-total').then($div => {
       recipientBalanceBefore = parseBalance($div.text())
@@ -100,6 +105,7 @@ describe('Scenario : from private key', () => {
       .should('be.eq', senderBalanceBefore - 10)
 
     cy.visit('/account/oasis1qq5t7f2gecsjsdxmp5zxtwgck6pzpjmkvc657z6l')
+    cy.contains('Loading account')
     cy.contains('Loading account').should('not.exist')
     cy.findByTestId('account-balance-total')
       .invoke('text')

extension/src/popup/popup.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { HelmetProvider } from 'react-helmet-async'
 import { Store } from 'webext-redux'
@@ -12,11 +12,12 @@ import 'locales/i18n'
 import 'sanitize.css/sanitize.css'
 import 'styles/main.css'
 
-const MOUNT_NODE = document.getElementById('root') as HTMLElement
+const container = document.getElementById('root') as HTMLElement
+const root = createRoot(container!)
 const store = new Store()
 
 store.ready().then(() => {
-  ReactDOM.render(
+  root.render(
     <Provider store={store}>
       <ThemeProvider>
         <HelmetProvider>
@@ -28,7 +29,6 @@ store.ready().then(() => {
         </HelmetProvider>
       </ThemeProvider>
     </Provider>,
-    MOUNT_NODE,
   )
 })
 

package.json

@@ -73,15 +73,15 @@
     "i18next": "21.9.2",
     "i18next-browser-languagedetector": "6.1.5",
     "qrcode.react": "3.1.0",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-app-polyfill": "3.0.0",
     "react-data-table-component": "6.11.8",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-i18next": "11.18.6",
     "react-redux": "7.2.9",
     "react-router-dom": "6.4.1",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.2.0",
     "redux-saga": "1.2.1",
     "styled-components": "5.3.6",
     "tweetnacl": "1.0.3",
@@ -98,7 +98,7 @@
     "@semantic-release/git": "10.0.1",
     "@testing-library/cypress": "8.0.3",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "13.4.0",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
     "@types/body-scroll-lock": "3.1.0",
@@ -108,10 +108,10 @@
     "@types/node-fetch": "3.0.3",
     "@types/qrcode.react": "1.0.2",
     "@types/react": "17.0.50",
-    "@types/react-dom": "17.0.17",
+    "@types/react-dom": "18.0.6",
     "@types/react-redux": "7.1.24",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-test-renderer": "17.0.2",
+    "@types/react-test-renderer": "18.0.0",
     "@types/rimraf": "3.0.2",
     "@types/shelljs": "0.8.11",
     "@types/styled-components": "5.1.26",
@@ -162,6 +162,7 @@
   },
   "resolutions": {
     "@ledgerhq/hw-transport": "^6.27.6",
+    "@testing-library/dom": "8.18.1",
     "@typescript-eslint/eslint-plugin": "5.38.1",
     "eslint-plugin-react": "7.31.8"
   },

src/app/components/FatalErrorHandler/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
 import { fatalErrorActions } from 'app/state/fatalerror'
 import * as React from 'react'
 import { Provider } from 'react-redux'
@@ -31,7 +31,9 @@ describe('<FatalErrorHandler />', () => {
 
   it('should display the error', async () => {
     renderComponent(store)
-    store.dispatch(fatalErrorActions.setError({ message: 'dummy-message' }))
+    act(() => {
+      store.dispatch(fatalErrorActions.setError({ message: 'dummy-message' }))
+    })
 
     expect(await screen.findByTestId('fatalerror-stacktrace')).toHaveTextContent('dummy-message')
   })

src/app/components/Toolbar/Features/NetworkSelector/__tests__/index.test.tsx

@@ -1,5 +1,4 @@
-import { screen } from '@testing-library/dom'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { networkActions } from 'app/state/network'
 import * as React from 'react'
@@ -34,7 +33,7 @@ describe('<NetworkSelector  />', () => {
     await userEvent.click(screen.getByTestId('network-selector'))
 
     expect(await screen.findByText('toolbar.networks.testnet')).toBeInTheDocument()
-    screen.getByText('toolbar.networks.testnet').click()
+    await userEvent.click(screen.getByText('toolbar.networks.testnet'))
 
     expect(dispatchSpy).toHaveBeenCalledWith({
       payload: 'testnet',

src/app/pages/AccountPage/__tests__/index.test.tsx

@@ -26,7 +26,7 @@ const renderPage = (store: any, initialEntries: LocationDescriptor[]) =>
       <ThemeProvider>
         <MemoryRouter initialEntries={initialEntries}>
           <Routes>
-            <Route path="/account/:address" element={<AccountPage />} />
+            <Route path="/account/:address/*" element={<AccountPage />} />
           </Routes>
         </MemoryRouter>
       </ThemeProvider>

src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { cleanup, render, screen } from '@testing-library/react'
+import { act, cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { importAccountsActions } from 'app/state/importaccounts'
 import { ImportAccountsStep } from 'app/state/importaccounts/types'
@@ -47,20 +47,22 @@ describe('<ImportAccountsSelectionModal  />', () => {
 
   it('should list the accounts when done', () => {
     const component = renderComponent(store)
-    store.dispatch(
-      importAccountsActions.accountsListed([
-        {
-          address: 'oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe',
-          balance: { available: '0', validator: { escrow: '0', escrow_debonding: '0' } },
-          path: [44, 474, 0],
-          publicKey: '00',
-          selected: false,
-          type: WalletType.Mnemonic,
-        },
-      ]),
-    )
+    act(() => {
+      store.dispatch(
+        importAccountsActions.accountsListed([
+          {
+            address: 'oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe',
+            balance: { available: '0', validator: { escrow: '0', escrow_debonding: '0' } },
+            path: [44, 474, 0],
+            publicKey: '00',
+            selected: false,
+            type: WalletType.Mnemonic,
+          },
+        ]),
+      )
 
-    store.dispatch(importAccountsActions.setStep(ImportAccountsStep.Done))
+      store.dispatch(importAccountsActions.setStep(ImportAccountsStep.Done))
+    })
     expect(component.getByText('oasis1qzyq...7gh2pxqe')).toBeInTheDocument()
   })
 
@@ -69,35 +71,38 @@ describe('<ImportAccountsSelectionModal  />', () => {
     jest.mocked(useDispatch).mockImplementation(() => dispatchFn)
 
     renderComponent(store)
-    store.dispatch(
-      importAccountsActions.accountsListed([
-        {
-          address: 'oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe',
-          balance: { available: '0', validator: { escrow: '0', escrow_debonding: '0' } },
-          path: [44, 474, 0],
-          publicKey: '00',
-          selected: false,
-          type: WalletType.Mnemonic,
-        },
-        {
-          address: 'oasis1qqv25adrld8jjquzxzg769689lgf9jxvwgjs8tha',
-          balance: { available: '0', validator: { escrow: '0', escrow_debonding: '0' } },
-          path: [44, 474, 1],
-          publicKey: '00',
-          selected: false,
-          type: WalletType.Mnemonic,
-        },
-      ]),
-    )
+    act(() => {
+      store.dispatch(
+        importAccountsActions.accountsListed([
+          {
+            address: 'oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe',
+            balance: { available: '0', validator: { escrow: '0', escrow_debonding: '0' } },
+            path: [44, 474, 0],
+            publicKey: '00',
+            selected: false,
+            type: WalletType.Mnemonic,
+          },
+          {
+            address: 'oasis1qqv25adrld8jjquzxzg769689lgf9jxvwgjs8tha',
+            balance: { available: '0', validator: { escrow: '0', escrow_debonding: '0' } },
+            path: [44, 474, 1],
+            publicKey: '00',
+            selected: false,
+            type: WalletType.Mnemonic,
+          },
+        ]),
+      )
 
-    store.dispatch(importAccountsActions.setStep(ImportAccountsStep.Done))
+      store.dispatch(importAccountsActions.setStep(ImportAccountsStep.Done))
+    })
     await userEvent.click(screen.getByText('oasis1qzyq...7gh2pxqe'))
     expect(dispatchFn).toHaveBeenLastCalledWith({
       payload: 0,
       type: importAccountsActions.toggleAccount.type,
     })
-    store.dispatch(importAccountsActions.toggleAccount(0))
-
+    act(() => {
+      store.dispatch(importAccountsActions.toggleAccount(0))
+    })
     await userEvent.click(screen.getByTestId('ledger-open-accounts'))
     expect(dispatchFn).toHaveBeenLastCalledWith(
       expect.objectContaining({ type: walletActions.openWalletsFromLedger.type }),

src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { AlertBox } from 'app/components/AlertBox'
@@ -61,13 +61,6 @@ export function ImportAccountsSelectionModal(props: ImportAccountsSelectionModal
         : walletActions.openWalletFromMnemonic(),
     )
   }
-
-  useEffect(() => {
-    return () => {
-      dispatch(importAccountsActions.clear())
-    }
-  }, [dispatch])
-
   const cancelDisabled = importAccounts.step === ImportAccountsStep.Done || error ? false : true
   const confirmDisabled = importAccounts.step !== ImportAccountsStep.Done || selectedAccounts.length === 0
 

src/app/pages/StakingPage/Features/CommissionBounds/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
 import { networkActions } from 'app/state/network'
 import { NetworkState } from 'app/state/network/types'
 import { CommissionBound as ICommissionBounds } from 'app/state/staking/types'
@@ -42,7 +42,9 @@ describe('<CommissionBounds  />', () => {
   it('should match snapshot with active bounds', () => {
     store = configureAppStore()
     const component = renderComponent(store, [{ epochStart: 0, lower: 0.1, upper: 0.2, epochEnd: 100 }])
-    store.dispatch(networkActions.networkSelected({ epoch: 50 } as NetworkState))
+    act(() => {
+      store.dispatch(networkActions.networkSelected({ epoch: 50 } as NetworkState))
+    })
     expect(component.baseElement).toMatchSnapshot()
   })
 })