Setup Jest and Sentry

components/balances/CurrencySelect/index.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react'
 import { FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material'
-import { useAppDispatch, useAppSelector } from 'store'
+import { useAppDispatch, useAppSelector } from '@/store'
 import { selectCurrency, setCurrency } from '@/store/currencySlice'
 import useCurriencies from './useCurrencies'
 import css from './styles.module.css'

components/common/ChainIndicator/index.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useMemo } from 'react'
 import useSafeAddress from '@/services/useSafeAddress'
-import { useAppSelector } from 'store'
+import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
 
 const ChainIndicator = (): ReactElement => {

components/common/FiatValue/index.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useMemo } from 'react'
 import useBrowserLocale from '@/services/useBrowserLocale'
-import { useAppSelector } from 'store'
+import { useAppSelector } from '@/store'
 import { selectCurrency } from '@/store/currencySlice'
 
 const FiatValue = ({ value }: { value: string | number }): ReactElement => {

components/transactions/TxInfo/index.tsx

@@ -8,7 +8,7 @@ import {
   TransactionInfo,
   TransferDirection,
 } from '@gnosis.pm/safe-react-gateway-sdk'
-import { useAppSelector } from 'store'
+import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
 import useSafeAddress from '@/services/useSafeAddress'
 import TokenAmount from '@/components/common/TokenAmount'

config/constants.ts

@@ -2,3 +2,4 @@ export const GATEWAY_URL = 'https://safe-client.staging.gnosisdev.com'
 export const POLLING_INTERVAL = 15_000
 export const IS_PRODUCTION = false
 export const INFURA_TOKEN = process.env.NEXT_PUBLIC_INFURA_TOKEN || '0ebf4dd05d6740f482938b8a80860d13'
+export const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN || ''

jest.config.js

@@ -0,0 +1,19 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    // Handle module aliases (this will be automatically configured for you soon)
+    '^@/(.*)$': '<rootDir>/$1'
+  },
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

package.json

@@ -8,6 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "prettier": "prettier -w './**/*.{ts,tsx}'",
+    "test": "jest --watchAll",
     "cmp": "./scripts/cmp.sh"
   },
   "dependencies": {
@@ -21,6 +22,7 @@
     "@mui/material": "^5.6.1",
     "@reduxjs/toolkit": "^1.8.1",
     "@sentry/react": "^6.19.6",
+    "@sentry/tracing": "^6.19.6",
     "@web3-onboard/core": "^2.2.1",
     "bignumber.js": "^9.0.2",
     "ethereum-blockies-base64": "^1.0.2",
@@ -37,14 +39,20 @@
   "devDependencies": {
     "@gnosis.pm/safe-react-gateway-sdk": "^2.10.2",
     "@sentry/types": "^6.19.6",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/user-event": "^14.1.1",
+    "@types/jest": "^27.4.1",
     "@types/node": "17.0.23",
     "@types/react": "18.0.3",
     "@types/react-dom": "18.0.0",
     "@types/semver": "^7.3.9",
+    "babel-jest": "^27.5.1",
     "eslint": "8.13.0",
     "eslint-config-next": "12.1.5",
     "eslint-config-prettier": "^8.5.0",
+    "jest": "^27.5.1",
     "prettier": "^2.6.2",
+    "react-testing-library": "^8.0.1",
     "typescript": "4.6.3"
   }
 }

pages/_app.tsx

@@ -1,9 +1,10 @@
-import { ReactElement } from 'react'
-import type { AppProps } from 'next/app'
+import Sentry from '@/services/sentry' // needs to be imported first
+import { type ReactElement } from 'react'
+import { type AppProps } from 'next/app'
 import Head from 'next/head'
 import { Provider } from 'react-redux'
 import '../styles/globals.css'
-import { store } from 'store'
+import { store } from '@/store'
 import PageLayout from '@/components/common/PageLayout'
 import { useInitChains } from '@/services/useChains'
 import { useInitSafeInfo } from '@/services/useSafeInfo'
@@ -40,9 +41,12 @@ const SafeWebCore = ({ Component, pageProps }: AppProps): ReactElement => {
 
       <InitApp />
 
-      <PageLayout>
-        <Component {...pageProps} />
-      </PageLayout>
+      {/* @ts-expect-error - Temporary Fix */}
+      <Sentry.ErrorBoundary showDialog fallback={({ error }) => <div>{error.message}</div>}>
+        <PageLayout>
+          <Component {...pageProps} />
+        </PageLayout>
+      </Sentry.ErrorBoundary>
     </Provider>
   )
 }

pages/safe/transactions/history.tsx

@@ -1,6 +1,6 @@
 import TxList from '@/components/transactions/TxList'
 import type { NextPage } from 'next'
-import { useAppDispatch } from 'store'
+import { useAppDispatch } from '@/store'
 import { setPageUrl } from '@/store/txHistorySlice'
 import useTxHistory from '@/services/useTxHistory'
 

pages/safe/transactions/queue.tsx

@@ -1,6 +1,6 @@
 import TxList from '@/components/transactions/TxList'
 import type { NextPage } from 'next'
-import { useAppDispatch } from 'store'
+import { useAppDispatch } from '@/store'
 import { setPageUrl } from '@/store/txQueueSlice'
 import useTxQueue from '@/services/useTxQueue'
 

services/exceptions/index.test.ts

@@ -1,23 +1,24 @@
 import { Errors, logError, trackError, CodedException } from '.'
-import * as constants from 'src/utils/constants'
+import * as constants from '@/config/constants'
 import * as Sentry from '@sentry/react'
 
 describe('CodedException', () => {
   beforeAll(() => {
     jest.mock('@sentry/react')
-    jest.mock('src/utils/constants')
-    ;(constants as any).IS_PRODUCTION = false
+    jest.mock('@/config/constants', () => ({
+      IS_PRODUCTION: false,
+    }))
     console.error = jest.fn()
     // @ts-ignore
     Sentry.captureException = jest.fn()
   })
 
   afterAll(() => {
-    jest.unmock('console')
-    jest.unmock('@sentry/react')
+    jest.clearAllMocks()
   })
 
   afterEach(() => {
+    jest.clearAllMocks()
     ;(constants as any).IS_PRODUCTION = false
   })
 
@@ -101,7 +102,6 @@ describe('CodedException', () => {
     })
 
     it('does not track using Sentry in non-production envs', () => {
-      ;(constants as any).IS_PRODUCTION = false
       const err = trackError(Errors._100)
       expect(Sentry.captureException).not.toHaveBeenCalled()
       expect(console.error).toHaveBeenCalledWith(err)

services/sentry.ts

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/react'
+import { Integrations } from '@sentry/tracing'
+import { SENTRY_DSN } from '@/config/constants'
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  release: `safe-react@${process.env.REACT_APP_APP_VERSION}`,
+  integrations: [new Integrations.BrowserTracing()],
+  sampleRate: 0.1,
+  // ignore MetaMask errors we don't control
+  ignoreErrors: ['Internal JSON-RPC error', 'JsonRpcEngine', 'Non-Error promise rejection captured with keys: code'],
+})
+
+export default Sentry

services/useBalances.ts

@@ -1,6 +1,6 @@
 import { getBalances, SafeBalanceResponse } from '@gnosis.pm/safe-react-gateway-sdk'
 import { useEffect } from 'react'
-import { useAppDispatch, useAppSelector } from 'store'
+import { useAppDispatch, useAppSelector } from '@/store'
 import { GATEWAY_URL } from '@/config/constants'
 import useAsync from './useAsync'
 import useSafeInfo from './useSafeInfo'

services/useChains.ts

@@ -1,7 +1,7 @@
 import { getChainsConfig, type ChainListResponse } from '@gnosis.pm/safe-react-gateway-sdk'
 import { GATEWAY_URL } from '@/config/constants'
 import { useEffect } from 'react'
-import { useAppDispatch, useAppSelector } from 'store'
+import { useAppDispatch, useAppSelector } from '@/store'
 import { selectChains, setChains } from '@/store/chainsSlice'
 import { Errors, logError } from './exceptions'
 import useAsync from './useAsync'

services/useSafeInfo.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react'
 import { getSafeInfo, SafeInfo } from '@gnosis.pm/safe-react-gateway-sdk'
-import { useAppDispatch, useAppSelector } from 'store'
+import { useAppDispatch, useAppSelector } from '@/store'
 import { selectSafeInfo, setSafeError, setSafeInfo, setSafeLoading } from '@/store/safeInfoSlice'
 import useSafeAddress from './useSafeAddress'
 import { GATEWAY_URL, POLLING_INTERVAL } from '@/config/constants'

services/useTxHistory.ts

@@ -1,6 +1,6 @@
 import { getTransactionHistory, TransactionListPage } from '@gnosis.pm/safe-react-gateway-sdk'
 import { useEffect } from 'react'
-import { useAppDispatch, useAppSelector } from 'store'
+import { useAppDispatch, useAppSelector } from '@/store'
 import { GATEWAY_URL } from '@/config/constants'
 import useAsync from './useAsync'
 import { Errors, logError } from './exceptions'

services/useTxQueue.ts

@@ -1,6 +1,6 @@
 import { getTransactionQueue, type TransactionListPage } from '@gnosis.pm/safe-react-gateway-sdk'
 import { useEffect } from 'react'
-import { useAppDispatch, useAppSelector } from 'store'
+import { useAppDispatch, useAppSelector } from '@/store'
 import { GATEWAY_URL } from '@/config/constants'
 import useAsync from './useAsync'
 import { Errors, logError } from './exceptions'

services/useWeb3.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { setWeb3 } from '@/services/web3'
 import Web3 from 'web3'
-import { useAppSelector } from 'store'
+import { useAppSelector } from '@/store'
 import useSafeAddress from '@/services/useSafeAddress'
 import { selectChainById } from '@/store/chainsSlice'
 

services/useWeb3ReadOnly.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { getRpcServiceUrl, setWeb3ReadOnly } from '@/services/web3'
 import Web3 from 'web3'
-import { useAppSelector } from 'store'
+import { useAppSelector } from '@/store'
 import useSafeAddress from '@/services/useSafeAddress'
 import { selectChainById } from '@/store/chainsSlice'
 

store/balancesSlice.ts

@@ -1,6 +1,6 @@
 import { type SafeBalanceResponse } from '@gnosis.pm/safe-react-gateway-sdk'
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import type { RootState } from 'store'
+import type { RootState } from '@/store'
 
 type BalancesState = SafeBalanceResponse
 

store/txHistorySlice.ts

@@ -1,6 +1,6 @@
 import { TransactionListPage } from '@gnosis.pm/safe-react-gateway-sdk'
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import type { RootState } from 'store'
+import type { RootState } from '@/store'
 
 type TxHistoryState = {
   page: TransactionListPage

store/txQueueSlice.ts

@@ -1,6 +1,6 @@
 import { TransactionListPage } from '@gnosis.pm/safe-react-gateway-sdk'
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import type { RootState } from 'store'
+import type { RootState } from '@/store'
 
 type TxQueueState = {
   page: TransactionListPage