test: prevent async debounce updates (#6427)

* test: prevent async debounce updates

* lint

* fix: actually fix

* fix: rm unused act

* fix: synchronously update popper

* lint

* way better

src/components/swap/SwapBuyFiatButton.test.tsx

@@ -2,7 +2,7 @@ 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 { act, fireEvent, render, screen } from 'test-utils/render'
 
 import { useFiatOnrampAvailability, useOpenModal } from '../../state/application/hooks'
 import SwapBuyFiatButton, { MOONPAY_REGION_AVAILABILITY_ARTICLE } from './SwapBuyFiatButton'
@@ -61,7 +61,7 @@ describe('SwapBuyFiatButton.tsx', () => {
     mockuseAccountDrawer.mockImplementation(() => [false, toggleWalletDrawer])
     mockUseOpenModal.mockImplementation(() => useOpenModal)
     render(<SwapBuyFiatButton />)
-    await userEvent.click(screen.getByTestId('buy-fiat-button'))
+    await act(() => userEvent.click(screen.getByTestId('buy-fiat-button')))
     expect(toggleWalletDrawer).toHaveBeenCalledTimes(1)
     expect(screen.queryByTestId('fiat-on-ramp-unavailable-tooltip')).not.toBeInTheDocument()
   })
@@ -76,7 +76,7 @@ describe('SwapBuyFiatButton.tsx', () => {
     mockUseOpenModal.mockImplementation(() => useOpenModal)
     render(<SwapBuyFiatButton />)
     expect(screen.getByTestId('buy-fiat-flow-incomplete-indicator')).toBeInTheDocument()
-    await userEvent.click(screen.getByTestId('buy-fiat-button'))
+    await act(() => userEvent.click(screen.getByTestId('buy-fiat-button')))
     expect(toggleWalletDrawer).toHaveBeenCalledTimes(0)
     expect(useOpenModal).toHaveBeenCalledTimes(1)
     expect(screen.queryByTestId('fiat-on-ramp-unavailable-tooltip')).not.toBeInTheDocument()
@@ -87,7 +87,7 @@ describe('SwapBuyFiatButton.tsx', () => {
     mockUseFiatOnrampAvailability.mockImplementation(mockUseFiatOnRampsUnavailable)
     mockuseAccountDrawer.mockImplementation(() => [false, toggleWalletDrawer])
     render(<SwapBuyFiatButton />)
-    await userEvent.click(screen.getByTestId('buy-fiat-button'))
+    await act(() => userEvent.click(screen.getByTestId('buy-fiat-button')))
     fireEvent.mouseOver(screen.getByTestId('buy-fiat-button'))
     expect(await screen.findByTestId('fiat-on-ramp-unavailable-tooltip')).toBeInTheDocument()
     expect(await screen.findByText(/Learn more/i)).toHaveAttribute('href', MOONPAY_REGION_AVAILABILITY_ARTICLE)

src/setupTests.ts

 import '@testing-library/jest-dom' // jest custom assertions
 import 'jest-styled-components' // adds style diffs to snapshot tests
 
+import type { createPopper } from '@popperjs/core'
 import { useWeb3React } from '@web3-react/core'
 import { Readable } from 'stream'
 import { mocked } from 'test-utils/mocked'
 import { TextDecoder, TextEncoder } from 'util'
 
+window.open = jest.fn()
+window.getComputedStyle = jest.fn()
+
 if (typeof global.TextEncoder === 'undefined') {
   global.ReadableStream = Readable as unknown as typeof globalThis.ReadableStream
   global.TextEncoder = TextEncoder
@@ -22,6 +26,32 @@ global.matchMedia =
     }
   }
 
+jest.mock('@popperjs/core', () => {
+  const core = jest.requireActual('@popperjs/core')
+  return {
+    ...core,
+    createPopper: (...args: Parameters<typeof createPopper>) => {
+      const [referenceElement, popperElement, options = {}] = args
+
+      // Prevent popper from making state updates asynchronously.
+      // This is necessary to avoid warnings during tests, as popper will asynchronously update state outside of test setup.
+      options?.modifiers?.push({
+        name: 'synchronousUpdate',
+        enabled: true,
+        phase: 'beforeMain',
+        effect: (state) => {
+          state.instance.update = () => {
+            state.instance.forceUpdate()
+            return Promise.resolve(state.instance.state)
+          }
+        },
+      })
+
+      return core.createPopper(referenceElement, popperElement, options)
+    },
+  }
+})
+
 jest.mock('@web3-react/core', () => {
   const web3React = jest.requireActual('@web3-react/core')
   const { Empty } = jest.requireActual('@web3-react/empty')
@@ -37,5 +67,10 @@ jest.mock('@web3-react/core', () => {
 
 // Mocks are configured to reset between tests (by CRA), so they must be set in a beforeEach.
 beforeEach(() => {
+  // Mock window.getComputedStyle, because it is otherwise too computationally expensive to unit test.
+  // Not mocking this results in multi-second tests when using popper.js.
+  mocked(window.getComputedStyle).mockImplementation(() => new CSSStyleDeclaration())
+
+  // Mock useWeb3React to return a chainId of 1 by default.
   mocked(useWeb3React).mockReturnValue({ chainId: 1 } as ReturnType<typeof useWeb3React>)
 })