Remove all remaining .snap snapshot tests from React components

packages/react/jest.config.js

@@ -28,7 +28,6 @@ module.exports = {
     '<rootDir>/src/Breadcrumbs/',
     '<rootDir>/src/ButtonGroup/',
     '<rootDir>/src/CheckboxGroup/',
-    '<rootDir>/src/CircleBadge/',
     '<rootDir>/src/CircleOcticon/',
     '<rootDir>/src/DataTable/',
     '<rootDir>/src/Dialog/',
@@ -57,7 +56,6 @@ module.exports = {
     '<rootDir>/src/Spinner/',
     '<rootDir>/src/SplitPageLayout/',
     '<rootDir>/src/Stack/',
-    '<rootDir>/src/StateLabel/',
     '<rootDir>/src/SubNav/',
     '<rootDir>/src/TabNav/',
     '<rootDir>/src/TextInputWithTokens/',

packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx

@@ -128,7 +128,7 @@ describe('AnchoredOverlay', () => {
 
   it('should render consistently when open', () => {
     const {container} = render(<AnchoredOverlayTestComponent initiallyOpen={true} />)
-    expect(container).toMatchSnapshot()
+    expect(container.firstChild).toBeInTheDocument()
   })
 
   it('should call onPositionChange when provided', async () => {

packages/react/src/AvatarStack/AvatarStack.test.tsx

@@ -35,7 +35,8 @@ describe('AvatarStack', () => {
 
   it('respects alignRight props', () => {
     const {container} = render(rightAvatarComp)
-    expect(container.firstChild).toMatchSnapshot()
+    expect(container.firstChild).toBeInTheDocument()
+    expect(container.firstChild).toHaveAttribute('data-align-right', 'true')
   })
 
   it('should have a tabindex of 0 if there are no interactive children', () => {

packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx

@@ -1,6 +1,6 @@
 import {render as HTMLRender} from '@testing-library/react'
 import Breadcrumbs from '../'
-import {describe, expect, it} from 'vitest'
+import {describe, expect, it} from '@jest/globals'
 
 describe('Breadcrumbs.Item', () => {
   it('renders an <a> by default', () => {
@@ -9,7 +9,9 @@ describe('Breadcrumbs.Item', () => {
   })
 
   it('respects the "selected" prop', () => {
-    const {container} = HTMLRender(<Breadcrumbs.Item selected />)
-    expect(container.firstChild).toMatchSnapshot()
+    const {getByRole} = HTMLRender(<Breadcrumbs.Item selected />)
+    const item = getByRole('link')
+    expect(item).toHaveAttribute('aria-current', 'page')
+    expect(item).toHaveClass('selected')
   })
 })

packages/react/src/Button/__tests__/Button.test.tsx

@@ -76,7 +76,8 @@ describe('Button', () => {
       </Button>,
     )
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    // Check that block styling is applied
+    expect(button).toHaveAttribute('data-block', 'block')
   })
 
   it('respects the "disabled" prop', () => {
@@ -99,17 +100,19 @@ describe('Button', () => {
       </Button>,
     )
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    // Check that small size styling is applied
+    expect(button).toHaveAttribute('data-size', 'small')
   })
 
   it('respects the large size prop', () => {
     const container = render(
       <Button size="large" id="test-button">
-        Smol
+        Large
       </Button>,
     )
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    // Check that large size styling is applied
+    expect(button).toHaveAttribute('data-size', 'large')
   })
 
   it('styles primary button appropriately', () => {
@@ -119,7 +122,8 @@ describe('Button', () => {
       </Button>,
     )
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    // Check that primary variant styling is applied
+    expect(button).toHaveAttribute('data-variant', 'primary')
   })
 
   it('styles invisible button appropriately', () => {
@@ -129,7 +133,8 @@ describe('Button', () => {
       </Button>,
     )
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    // Check that invisible variant styling is applied
+    expect(button).toHaveAttribute('data-variant', 'invisible')
   })
 
   it('styles danger button appropriately', () => {
@@ -139,7 +144,8 @@ describe('Button', () => {
       </Button>,
     )
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    // Check that danger variant styling is applied
+    expect(button).toHaveAttribute('data-variant', 'danger')
   })
 
   it('makes sure icon button has an aria-label', () => {
@@ -155,7 +161,9 @@ describe('Button', () => {
       </Button>,
     )
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    // Check that alignContent styling is applied - it's on the inner buttonContent element
+    const buttonContent = button.querySelector('[data-component="buttonContent"]')
+    expect(buttonContent).toHaveAttribute('data-align', 'start')
   })
 
   it('should render the leadingVisual prop before the button content', () => {