fix: update CurrencyList unit tests (#6321)

* fix: testing snapshot updates

* fix: remove inline style and update snapshots tests

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

+import { screen } from '@testing-library/react'
 import { Currency, CurrencyAmount as mockCurrencyAmount, Token as mockToken } from '@uniswap/sdk-core'
 import { DAI, USDC_MAINNET, WBTC } from 'constants/tokens'
 import * as mockJSBI from 'jsbi'
@@ -42,37 +43,38 @@ jest.mock('../../../state/connection/hooks', () => {
 })
 
 it('renders loading rows when isLoading is true', () => {
-  const { asFragment } = render(
+  const component = render(
     <CurrencyList
       height={10}
       currencies={[]}
       otherListTokens={[]}
       selectedCurrency={null}
       onCurrencySelect={noOp}
-      showImportView={noOp}
-      setImportToken={noOp}
       isLoading={true}
       searchQuery=""
       isAddressSearch=""
     />
   )
-  expect(asFragment()).toMatchSnapshot()
+  expect(component.findByTestId('loading-rows')).toBeTruthy()
+  expect(screen.queryByText('Wrapped BTC')).not.toBeInTheDocument()
+  expect(screen.queryByText('DAI')).not.toBeInTheDocument()
+  expect(screen.queryByText('USDC')).not.toBeInTheDocument()
 })
 
 it('renders currency rows correctly when currencies list is non-empty', () => {
-  const { asFragment } = render(
+  render(
     <CurrencyList
       height={10}
       currencies={[DAI, USDC_MAINNET, WBTC]}
       otherListTokens={[]}
       selectedCurrency={null}
       onCurrencySelect={noOp}
-      showImportView={noOp}
-      setImportToken={noOp}
       isLoading={false}
       searchQuery=""
       isAddressSearch=""
     />
   )
-  expect(asFragment()).toMatchSnapshot()
+  expect(screen.getByText('Wrapped BTC')).toBeInTheDocument()
+  expect(screen.getByText('DAI')).toBeInTheDocument()
+  expect(screen.getByText('USDC')).toBeInTheDocument()
 })

src/components/SearchModal/CurrencyList/index.tsx

@@ -20,7 +20,7 @@ import CurrencyLogo from '../../Logo/CurrencyLogo'
 import Row, { RowFixed } from '../../Row'
 import { MouseoverTooltip } from '../../Tooltip'
 import { LoadingRows, MenuItem } from '../styleds'
-import * as styles from './index.css'
+import { scrollbarStyle } from './index.css'
 
 function currencyKey(currency: Currency): string {
   return currency.isToken ? currency.address : 'ETHER'
@@ -65,6 +65,10 @@ const WarningContainer = styled.div`
   margin-left: 0.3em;
 `
 
+const ListWrapper = styled.div`
+  padding-right: 0.25rem;
+`
+
 function Balance({ balance }: { balance: CurrencyAmount<Currency> }) {
   return <StyledBalanceText title={balance.toExact()}>{balance.toSignificant(4)}</StyledBalanceText>
 }
@@ -212,7 +216,7 @@ export const formatAnalyticsEventProperties = (
 })
 
 const LoadingRow = () => (
-  <LoadingRows>
+  <LoadingRows data-testid="loading-rows">
     <div />
     <div />
     <div />
@@ -290,10 +294,10 @@ export default function CurrencyList({
   }, [])
 
   return (
-    <div style={{ paddingRight: '4px' }}>
+    <ListWrapper>
       {isLoading ? (
         <FixedSizeList
-          className={styles.scrollbarStyle}
+          className={scrollbarStyle}
           height={height}
           ref={fixedListRef as any}
           width="100%"
@@ -305,7 +309,7 @@ export default function CurrencyList({
         </FixedSizeList>
       ) : (
         <FixedSizeList
-          className={styles.scrollbarStyle}
+          className={scrollbarStyle}
           height={height}
           ref={fixedListRef as any}
           width="100%"
@@ -317,6 +321,6 @@ export default function CurrencyList({
           {Row}
         </FixedSizeList>
       )}
-    </div>
+    </ListWrapper>
   )
 }