test: remove toMatchSnapshot and removed snapshot files in predict & perps tests

Author: cortisiko

app/components/UI/Perps/components/PerpsBadge/PerpsBadge.test.tsx

@@ -26,8 +26,7 @@ jest.mock('../../../../../../locales/i18n', () => ({
 }));
 
 describe('PerpsBadge', () => {
-  it('renders badges with correct labels and styles for all types', () => {
-    // Arrange
+  it('renders correct i18n label for each badge type', () => {
     const badgeTypes: BadgeType[] = [
       'experimental',
       'crypto',
@@ -43,12 +42,11 @@ describe('PerpsBadge', () => {
       'Forex',
     ];
 
-    // Act & Assert - Test each badge type
     badgeTypes.forEach((type, index) => {
-      const { getByText } = render(<PerpsBadge type={type} />);
+      const { getByText, unmount } = render(<PerpsBadge type={type} />);
 
-      const labelElement = getByText(expectedLabels[index]);
-      expect(labelElement).toBeTruthy();
+      expect(getByText(expectedLabels[index])).toBeOnTheScreen();
+      unmount();
     });
   });
 

app/components/UI/Perps/components/PerpsDeveloperOptionsSection/PerpsDeveloperOptionsSection.test.tsx

@@ -15,11 +15,6 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('PerpsDeveloperOptionsSection', () => {
-  it('renders correctly', () => {
-    const { toJSON } = renderWithProvider(<PerpsDeveloperOptionsSection />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
   it('renders the perpetual trading heading', () => {
     const { getByText } = renderWithProvider(<PerpsDeveloperOptionsSection />);
     expect(getByText('Perps trading')).toBeVisible();

app/components/UI/Perps/components/PerpsDeveloperOptionsSection/PerpsTestnetToggle.test.tsx

@@ -51,12 +51,10 @@ describe('PerpsTestnetToggle', () => {
   it('renders correctly with testnet network', () => {
     mockUsePerpsNetwork.mockReturnValue('testnet');
 
-    const { toJSON, getByTestId, getByText } = renderWithToastContext(
+    const { getByTestId, getByText } = renderWithToastContext(
       <PerpsTestnetToggle />,
     );
 
-    expect(toJSON()).toMatchSnapshot();
-
     const switchElement = getByTestId(PerpsTestnetToggleSelectorsIDs.SWITCH);
     expect(switchElement.props.value).toBe(true);
 

app/components/UI/Perps/components/PerpsDeveloperOptionsSection/__snapshots__/PerpsDeveloperOptionsSection.test.tsx.snap

@@ -177,7 +177,7 @@ describe('PerpsHomeSection', () => {
     });
 
     it('header is not pressable when onActionPress not provided', () => {
-      const { getByText } = render(
+      const { queryByTestId, getByText } = render(
         <PerpsHomeSection
           title="Test Section"
           isLoading={false}
@@ -188,8 +188,9 @@ describe('PerpsHomeSection', () => {
         </PerpsHomeSection>,
       );
 
-      // Header should render but not be pressable
       expect(getByText('Test Section')).toBeTruthy();
+      // Action button must be absent when no onActionPress is provided
+      expect(queryByTestId(PerpsHomeSectionTestIds.ACTION_BUTTON)).toBeNull();
     });
 
     it('hides action icon when loading', () => {

app/components/UI/Perps/components/PerpsDeveloperOptionsSection/__snapshots__/PerpsTestnetToggle.test.tsx.snap

@@ -248,15 +248,15 @@ describe('PerpsMarketSortDropdowns', () => {
       expect(() => unmount()).not.toThrow();
     });
 
-    it('cleans up properly when remounted with different props', () => {
-      const { root, rerender, unmount } = render(
+    it('updates displayed label when selectedOptionId prop changes', () => {
+      const { rerender, getByText, queryByText, unmount } = render(
         <PerpsMarketSortDropdowns
           selectedOptionId="volume"
           onSortPress={mockOnSortPress}
         />,
       );
 
-      expect(root).toBeTruthy();
+      expect(getByText('Volume')).toBeOnTheScreen();
 
       rerender(
         <PerpsMarketSortDropdowns
@@ -265,7 +265,8 @@ describe('PerpsMarketSortDropdowns', () => {
         />,
       );
 
-      expect(root).toBeTruthy();
+      expect(queryByText('Volume')).toBeNull();
+      expect(getByText('Price change')).toBeOnTheScreen();
 
       expect(() => unmount()).not.toThrow();
     });

app/components/UI/Perps/components/PerpsHomeSection/PerpsHomeSection.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FlatList } from 'react-native';
 import { render, screen, fireEvent } from '@testing-library/react-native';
 import PerpsMarketTradesList from './PerpsMarketTradesList';
 import Routes from '../../../../../constants/navigation/Routes';
@@ -580,21 +581,29 @@ describe('PerpsMarketTradesList', () => {
         createMockFillsReturn(mockOrderFills),
       );
 
-      render(<PerpsMarketTradesList symbol="ETH" />);
+      const { UNSAFE_getByType } = render(
+        <PerpsMarketTradesList symbol="ETH" />,
+      );
 
-      expect(screen.getByText('Opened long')).toBeOnTheScreen();
-      expect(screen.getByText('Closed long')).toBeOnTheScreen();
-      expect(screen.getByText('Opened short')).toBeOnTheScreen();
+      const flatList = UNSAFE_getByType(FlatList);
+      // keyExtractor uses item.id — verify it returns the item's id
+      const firstItem = flatList.props.data[0];
+      expect(flatList.props.keyExtractor(firstItem, 0)).toBe(
+        String(firstItem.id),
+      );
     });
 
     it('disables scroll on FlatList', () => {
       mockUsePerpsMarketFills.mockReturnValue(
         createMockFillsReturn(mockOrderFills),
       );
 
-      const { root } = render(<PerpsMarketTradesList symbol="ETH" />);
+      const { UNSAFE_getByType } = render(
+        <PerpsMarketTradesList symbol="ETH" />,
+      );
 
-      expect(root).toBeTruthy();
+      const flatList = UNSAFE_getByType(FlatList);
+      expect(flatList.props.scrollEnabled).toBe(false);
     });
   });
 

app/components/UI/Perps/components/PerpsMarketSortDropdowns/PerpsMarketSortDropdowns.test.tsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react-native';
 import PerpsOICapWarning from './PerpsOICapWarning';
 import { usePerpsOICap } from '../../hooks/usePerpsOICap';
 import { strings } from '../../../../../../locales/i18n';
+import { TextVariant } from '../../../../../component-library/components/Texts/Text';
 
 jest.mock('../../hooks/usePerpsOICap');
 
@@ -81,25 +82,34 @@ describe('PerpsOICapWarning', () => {
     });
 
     it('should render inline variant by default', () => {
-      const { getByTestId } = render(<PerpsOICapWarning symbol="BTC" />);
+      const { UNSAFE_getByProps } = render(<PerpsOICapWarning symbol="BTC" />);
 
-      expect(getByTestId('perps-oi-cap-warning')).toBeTruthy();
+      // Inline variant uses BodySM text
+      expect(
+        UNSAFE_getByProps({ variant: TextVariant.BodySM }).props.variant,
+      ).toBe(TextVariant.BodySM);
     });
 
     it('should render banner variant when specified', () => {
-      const { getByTestId } = render(
+      const { UNSAFE_getByProps } = render(
         <PerpsOICapWarning symbol="BTC" variant="banner" />,
       );
 
-      expect(getByTestId('perps-oi-cap-warning')).toBeTruthy();
+      // Banner variant uses BodyMD text (larger text for banner prominence)
+      expect(
+        UNSAFE_getByProps({ variant: TextVariant.BodyMD }).props.variant,
+      ).toBe(TextVariant.BodyMD);
     });
 
     it('should render inline variant when specified', () => {
-      const { getByTestId } = render(
+      const { UNSAFE_getByProps } = render(
         <PerpsOICapWarning symbol="BTC" variant="inline" />,
       );
 
-      expect(getByTestId('perps-oi-cap-warning')).toBeTruthy();
+      // Inline variant uses BodySM text
+      expect(
+        UNSAFE_getByProps({ variant: TextVariant.BodySM }).props.variant,
+      ).toBe(TextVariant.BodySM);
     });
   });