fix: mock useWeb3React (#6422)

* fix: mock useWeb3React

* fix: pr nits

* fix: do not import for perf

* fix: update snaps

* fix: import type

* Revert "fix: import type"

This reverts commit d7da5a04d1951a50d997005059077e482dd6e97c.

src/components/Identicon/StatusIcon.test.tsx

+import { useWeb3React } from '@web3-react/core'
 import { getConnections } from 'connection'
+import { mocked } from 'test-utils/mocked'
 import { render } from 'test-utils/render'
 
 import StatusIcon from './StatusIcon'
@@ -8,17 +10,42 @@ jest.mock('../../hooks/useSocksBalance', () => ({
 }))
 
 describe('StatusIcon', () => {
-  it('renders children in correct order, with no account and with socks', () => {
-    const supportedConnections = getConnections()
-    const injectedConnection = supportedConnections[1]
-    const component = render(<StatusIcon connection={injectedConnection} />)
-    expect(component.getByTestId('StatusIconRoot')).toMatchSnapshot()
+  describe('with no account', () => {
+    it('renders children in correct order', () => {
+      const supportedConnections = getConnections()
+      const injectedConnection = supportedConnections[1]
+      const component = render(<StatusIcon connection={injectedConnection} />)
+      expect(component.getByTestId('StatusIconRoot')).toMatchSnapshot()
+    })
+
+    it('renders without mini icons', () => {
+      const supportedConnections = getConnections()
+      const injectedConnection = supportedConnections[1]
+      const component = render(<StatusIcon connection={injectedConnection} showMiniIcons={false} />)
+      expect(component.getByTestId('StatusIconRoot').children.length).toEqual(0)
+    })
   })
 
-  it('renders with no account and showMiniIcons=false', () => {
-    const supportedConnections = getConnections()
-    const injectedConnection = supportedConnections[1]
-    const component = render(<StatusIcon connection={injectedConnection} showMiniIcons={false} />)
-    expect(component.getByTestId('StatusIconRoot').children.length).toEqual(0)
+  describe('with account', () => {
+    beforeEach(() => {
+      mocked(useWeb3React).mockReturnValue({
+        account: '0x52270d8234b864dcAC9947f510CE9275A8a116Db',
+        isActive: true,
+      } as ReturnType<typeof useWeb3React>)
+    })
+
+    it('renders children in correct order', () => {
+      const supportedConnections = getConnections()
+      const injectedConnection = supportedConnections[1]
+      const component = render(<StatusIcon connection={injectedConnection} />)
+      expect(component.getByTestId('StatusIconRoot')).toMatchSnapshot()
+    })
+
+    it('renders without mini icons', () => {
+      const supportedConnections = getConnections()
+      const injectedConnection = supportedConnections[1]
+      const component = render(<StatusIcon connection={injectedConnection} showMiniIcons={false} />)
+      expect(component.getByTestId('StatusIconRoot').children.length).toEqual(1)
+    })
   })
 })

src/components/Identicon/__snapshots__/StatusIcon.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StatusIcon renders children in correct order, with no account and with socks 1`] = `
+exports[`StatusIcon with account renders children in correct order 1`] = `
+.c1 {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background-color: #98A1C0;
+  font-size: initial;
+}
+
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: column nowrap;
+  -ms-flex-flow: column nowrap;
+  flex-flow: column nowrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-right: 8px;
+}
+
+.c0 > img,
+.c0 span {
+  height: 16px;
+  width: 16px;
+}
+
+.c2 {
+  position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  bottom: -4px;
+  right: -4px;
+  border-radius: 50%;
+  outline: 2px solid #FFFFFF;
+  outline-offset: -0.1px;
+  background-color: #FFFFFF;
+  overflow: hidden;
+}
+
+.c4 {
+  position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  bottom: -4px;
+  left: -4px;
+  border-radius: 50%;
+  outline: 2px solid #FFFFFF;
+  outline-offset: -0.1px;
+  background-color: #FFFFFF;
+  overflow: hidden;
+}
+
+.c3 {
+  width: 16px;
+  height: 16px;
+}
+
+@media (max-width:960px) {
+  .c0 {
+    -webkit-align-items: flex-end;
+    -webkit-box-align: flex-end;
+    -ms-flex-align: flex-end;
+    align-items: flex-end;
+  }
+}
+
+@supports (overflow:clip) {
+  .c2 {
+    overflow: clip;
+  }
+}
+
+@supports (overflow:clip) {
+  .c4 {
+    overflow: clip;
+  }
+}
+
+<div
+  class="c0"
+  data-testid="StatusIconRoot"
+  size="16"
+>
+  <div
+    class="c1"
+  >
+    <span>
+      <div
+        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 114);"
+      >
+        <svg
+          height="16"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <rect
+            fill="#2392E1"
+            height="16"
+            transform="translate(-2.3133027096725978 4.697080312784296) rotate(160.7 8 8)"
+            width="16"
+            x="0"
+            y="0"
+          />
+          <rect
+            fill="#FB1895"
+            height="16"
+            transform="translate(-8.001736856572315 5.2625070066797255) rotate(299.1 8 8)"
+            width="16"
+            x="0"
+            y="0"
+          />
+          <rect
+            fill="#F90501"
+            height="16"
+            transform="translate(-10.68845745466197 0.5127796994888634) rotate(211.8 8 8)"
+            width="16"
+            x="0"
+            y="0"
+          />
+        </svg>
+      </div>
+    </span>
+  </div>
+  <div
+    class="c2"
+  >
+    <img
+      alt="MetaMask icon"
+      class="c3"
+      src="metamask.svg"
+    />
+  </div>
+  <div
+    class="c4"
+  >
+    <img
+      class="c3"
+      src="socks.svg"
+    />
+  </div>
+</div>
+`;
+
+exports[`StatusIcon with no account renders children in correct order 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;

src/components/PositionListItem/PositionListItem.test.tsx

@@ -10,24 +10,11 @@ import { render } from 'test-utils/render'
 
 import PositionListItem from '.'
 
+jest.mock('components/DoubleLogo')
+jest.mock('hooks/Tokens')
 jest.mock('hooks/usePools')
-
 jest.mock('utils/unwrappedToken')
 
-jest.mock('hooks/Tokens')
-
-jest.mock('components/DoubleLogo')
-
-jest.mock('@web3-react/core', () => {
-  const web3React = jest.requireActual('@web3-react/core')
-  return {
-    ...web3React,
-    useWeb3React: () => ({
-      chainId: 1,
-    }),
-  }
-})
-
 beforeEach(() => {
   mocked(useToken).mockImplementation((tokenAddress?: string | null | undefined) => {
     if (!tokenAddress) return null

src/components/SearchModal/CurrencyList/index.test.tsx

@@ -23,17 +23,6 @@ jest.mock(
       `CurrencyLogo currency=${currency.symbol}`
 )
 
-jest.mock('@web3-react/core', () => {
-  const web3React = jest.requireActual('@web3-react/core')
-  return {
-    ...web3React,
-    useWeb3React: () => ({
-      account: '123',
-      isActive: true,
-    }),
-  }
-})
-
 jest.mock('../../../state/connection/hooks', () => {
   return {
     useCurrencyBalance: (currency: Currency) => {

src/components/swap/SwapBuyFiatButton.test.tsx

 import userEvent from '@testing-library/user-event'
 import { useWeb3React } from '@web3-react/core'
 import { useAccountDrawer } from 'components/AccountDrawer'
+import { mocked } from 'test-utils/mocked'
 import { fireEvent, render, screen } from 'test-utils/render'
 
 import { useFiatOnrampAvailability, useOpenModal } from '../../state/application/hooks'
 import SwapBuyFiatButton, { MOONPAY_REGION_AVAILABILITY_ARTICLE } from './SwapBuyFiatButton'
 
-jest.mock('@web3-react/core', () => {
-  const web3React = jest.requireActual('@web3-react/core')
-  return {
-    ...web3React,
-    useWeb3React: jest.fn(),
-  }
-})
-
 jest.mock('../../state/application/hooks')
 const mockUseFiatOnrampAvailability = useFiatOnrampAvailability as jest.MockedFunction<typeof useFiatOnrampAvailability>
 const mockUseOpenModal = useOpenModal as jest.MockedFunction<typeof useOpenModal>
@@ -56,14 +49,6 @@ describe('SwapBuyFiatButton.tsx', () => {
     useOpenModal = jest.fn()
   })
 
-  beforeEach(() => {
-    jest.resetAllMocks()
-    ;(useWeb3React as jest.Mock).mockReturnValue({
-      account: undefined,
-      isActive: false,
-    })
-  })
-
   it('matches base snapshot', () => {
     mockUseFiatOnrampAvailability.mockImplementation(mockUseFiatOnRampsUnavailable)
     mockuseAccountDrawer.mockImplementation(() => [false, toggleWalletDrawer])
@@ -82,10 +67,10 @@ describe('SwapBuyFiatButton.tsx', () => {
   })
 
   it('fiat on ramps available in region, account connected', async () => {
-    ;(useWeb3React as jest.Mock).mockReturnValue({
+    mocked(useWeb3React).mockReturnValue({
       account: '0x52270d8234b864dcAC9947f510CE9275A8a116Db',
       isActive: true,
-    })
+    } as ReturnType<typeof useWeb3React>)
     mockUseFiatOnrampAvailability.mockImplementation(mockUseFiatOnRampsAvailable)
     mockuseAccountDrawer.mockImplementation(() => [false, toggleWalletDrawer])
     mockUseOpenModal.mockImplementation(() => useOpenModal)

src/components/swap/SwapModalHeader.test.tsx

@@ -10,16 +10,6 @@ import noop from 'utils/noop'
 
 import SwapModalHeader from './SwapModalHeader'
 
-jest.mock('@web3-react/core', () => {
-  const web3React = jest.requireActual('@web3-react/core')
-  return {
-    ...web3React,
-    useWeb3React: () => ({
-      chainId: 1,
-    }),
-  }
-})
-
 jest.mock('@uniswap/analytics')
 const mockSendAnalyticsEvent = sendAnalyticsEvent as jest.MockedFunction<typeof sendAnalyticsEvent>
 

src/connection/index.test.tsx

@@ -3,11 +3,6 @@ import INJECTED_LIGHT_ICON from 'assets/svg/browser-wallet-light.svg'
 import { ConnectionType, getConnections, useGetConnection } from 'connection'
 import { renderHook } from 'test-utils/render'
 
-beforeEach(() => {
-  jest.resetModules()
-  jest.resetAllMocks()
-})
-
 const UserAgentMock = jest.requireMock('utils/userAgent')
 jest.mock('utils/userAgent', () => ({
   isMobile: false,

src/hooks/useBestTrade.test.ts

@@ -16,13 +16,6 @@ import useIsWindowVisible from './useIsWindowVisible'
 const USDCAmount = CurrencyAmount.fromRawAmount(USDC_MAINNET, '10000')
 const DAIAmount = CurrencyAmount.fromRawAmount(DAI, '10000')
 
-jest.mock('@web3-react/core', () => {
-  return {
-    useWeb3React: () => ({
-      chainId: 1,
-    }),
-  }
-})
 jest.mock('./useAutoRouterSupported')
 jest.mock('./useClientSideV3Trade')
 jest.mock('./useDebounce')

src/lib/hooks/useTokenList/fetchTokenList.test.ts

@@ -10,7 +10,6 @@ describe('fetchTokenList', () => {
 
   beforeEach(() => {
     jest.spyOn(console, 'debug').mockReturnValue(undefined)
-    resolver.mockReset()
   })
 
   it('throws on an invalid list url', async () => {

src/nft/components/bag/bag.test.tsx

@@ -2,17 +2,6 @@ import { render } from 'test-utils/render'
 
 import Bag from './Bag'
 
-jest.mock('@web3-react/core', () => {
-  const web3React = jest.requireActual('@web3-react/core')
-  return {
-    ...web3React,
-    useWeb3React: () => ({
-      account: '0x52270d8234b864dcAC9947f510CE9275A8a116Db',
-      isActive: true,
-    }),
-  }
-})
-
 describe('Bag.tsx', () => {
   it('matches base snapshot', () => {
     const { asFragment } = render(<Bag />)

src/nft/hooks/usePermit2Approval.test.ts

-import { renderHook } from '@testing-library/react'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 import { USDC_MAINNET } from '@uniswap/smart-order-router'
 import usePermit2Allowance, { AllowanceState } from 'hooks/usePermit2Allowance'
+import { renderHook } from 'test-utils/render'
 
 import usePermit2Approval from './usePermit2Approval'
 
 const USDCAmount = CurrencyAmount.fromRawAmount(USDC_MAINNET, '10000')
 const NFT_UNIVERSAL_ROUTER_MAINNET_ADDRESS = '0x4c60051384bd2d3c01bfc845cf5f4b44bcbe9de5'
 
-jest.mock('@web3-react/core', () => {
-  return {
-    useWeb3React: () => ({
-      chainId: 1,
-    }),
-  }
-})
 jest.mock('hooks/usePermit2Allowance')
 
 const mockUsePermit2Allowance = usePermit2Allowance as jest.MockedFunction<typeof usePermit2Allowance>

src/pages/Pool/CTACards.test.tsx

@@ -3,16 +3,6 @@ import { render, screen } from 'test-utils/render'
 
 import CTACards from './CTACards'
 
-jest.mock('@web3-react/core', () => {
-  const web3React = jest.requireActual('@web3-react/core')
-  return {
-    ...web3React,
-    useWeb3React: () => ({
-      chainId: 42,
-    }),
-  }
-})
-
 describe('CTAcard links', () => {
   it('renders mainnet link when chain is not supported', () => {
     jest.spyOn(useV3Positions, 'useV3Positions').mockImplementation(() => {

src/pages/Pool/index.test.tsx

@@ -4,16 +4,6 @@ import { render, screen } from 'test-utils/render'
 
 import Pool from '.'
 
-jest.mock('@web3-react/core', () => {
-  const web3React = jest.requireActual('@web3-react/core')
-  return {
-    ...web3React,
-    useWeb3React: () => ({
-      chainId: 1,
-    }),
-  }
-})
-
 describe('networks', () => {
   it('renders error card when unsupported chain is selected', () => {
     jest.spyOn(chains, 'isSupportedChain').mockReturnValue(false)

src/serviceWorker/document.test.ts

@@ -46,7 +46,6 @@ describe('document', () => {
     })
 
     beforeEach(() => {
-      fetch.mockReset()
       getCacheKeyForURL.mockReturnValueOnce(requestUrl)
       options = {
         event: new Event('fetch') as ExtendableEvent,

src/setupTests.ts

 import '@testing-library/jest-dom' // jest custom assertions
 import 'jest-styled-components' // adds style diffs to snapshot tests
 
+import { useWeb3React } from '@web3-react/core'
 import { Readable } from 'stream'
+import { mocked } from 'test-utils/mocked'
 import { TextDecoder, TextEncoder } from 'util'
 
 if (typeof global.TextEncoder === 'undefined') {
@@ -19,3 +21,21 @@ global.matchMedia =
       removeEventListener: jest.fn(),
     }
   }
+
+jest.mock('@web3-react/core', () => {
+  const web3React = jest.requireActual('@web3-react/core')
+  const { Empty } = jest.requireActual('@web3-react/empty')
+  return {
+    ...web3React,
+    initializeConnector: () =>
+      web3React.initializeConnector(
+        (actions: Parameters<typeof web3React.initializeConnector>[0]) => new Empty(actions)
+      ),
+    useWeb3React: jest.fn(),
+  }
+})
+
+// Mocks are configured to reset between tests (by CRA), so they must be set in a beforeEach.
+beforeEach(() => {
+  mocked(useWeb3React).mockReturnValue({ chainId: 1 } as ReturnType<typeof useWeb3React>)
+})

src/test-utils/render.tsx

 import { MockedProvider } from '@apollo/client/testing'
 import { i18n } from '@lingui/core'
 import { I18nProvider } from '@lingui/react'
-import { render, renderHook } from '@testing-library/react'
-import Web3Provider from 'components/Web3Provider'
+import { queries } from '@testing-library/dom'
+import { render, renderHook, RenderHookOptions, RenderOptions } from '@testing-library/react'
 import { DEFAULT_LOCALE } from 'constants/locales'
 import { BlockNumberProvider } from 'lib/hooks/useBlockNumber'
 import catalog from 'locales/en-US'
@@ -21,8 +21,8 @@ i18n.loadLocaleData({
   [DEFAULT_LOCALE]: { plurals: en },
 })
 i18n.activate(DEFAULT_LOCALE)
-
 const MockedI18nProvider = ({ children }: any) => <I18nProvider i18n={i18n}>{children}</I18nProvider>
+
 const queryClient = new QueryClient()
 
 const WithProviders = ({ children }: { children?: ReactNode }) => {
@@ -31,13 +31,15 @@ const WithProviders = ({ children }: { children?: ReactNode }) => {
       <Provider store={store}>
         <QueryClientProvider client={queryClient}>
           <HashRouter>
-            <Web3Provider>
-              <MockedProvider>
-                <BlockNumberProvider>
-                  <ThemeProvider>{children}</ThemeProvider>
-                </BlockNumberProvider>
-              </MockedProvider>
-            </Web3Provider>
+            {/*
+             * Web3Provider is mocked through setupTests.ts
+             * To test behavior that depends on Web3Provider, use jest.unmock('@web3-react/core')
+             */}
+            <MockedProvider>
+              <BlockNumberProvider>
+                <ThemeProvider>{children}</ThemeProvider>
+              </BlockNumberProvider>
+            </MockedProvider>
           </HashRouter>
         </QueryClientProvider>
       </Provider>
@@ -45,9 +47,18 @@ const WithProviders = ({ children }: { children?: ReactNode }) => {
   )
 }
 
-const customRender = (ui: ReactElement) => render(ui, { wrapper: WithProviders })
-const customRenderHook = <Result, Props>(hook: (initialProps: Props) => Result) =>
-  renderHook(hook, { wrapper: WithProviders })
+type CustomRenderOptions = Omit<RenderOptions, 'wrapper'>
+const customRender = (ui: ReactElement, options?: CustomRenderOptions) => {
+  return render<typeof queries>(ui, { ...options, wrapper: WithProviders })
+}
+
+type CustomRenderHookOptions<Props> = Omit<RenderHookOptions<Props>, 'wrapper'>
+const customRenderHook = <Result, Props>(
+  hook: (initialProps: Props) => Result,
+  options?: CustomRenderHookOptions<Props>
+) => {
+  return renderHook(hook, { ...options, wrapper: WithProviders })
+}
 
 export * from '@testing-library/react'
 export { customRender as render }

src/tracing/trace.test.ts

@@ -25,13 +25,11 @@ function getTransaction(index = 0): Transaction {
 
 describe('trace', () => {
   beforeEach(() => {
-    mocked(Sentry.startTransaction)
-      .mockReset()
-      .mockImplementation((context) => {
-        const transaction: Transaction = jest.requireActual('@sentry/react').startTransaction(context)
-        transaction.initSpanRecorder()
-        return transaction
-      })
+    mocked(Sentry.startTransaction).mockImplementation((context) => {
+      const transaction: Transaction = jest.requireActual('@sentry/react').startTransaction(context)
+      transaction.initSpanRecorder()
+      return transaction
+    })
   })
 
   it('propagates callback', async () => {