test: update test suites for React 19 (#7209)

Author: joshblack

.github/workflows/ci.yml

@@ -83,7 +83,6 @@ jobs:
         uses: docker://mcr.microsoft.com/playwright:v1.55.0-jammy
         with:
           args: npm test
-        continue-on-error: ${{ matrix.react-version == 'react-19' }}
 
   type-check:
     runs-on: ubuntu-latest

packages/react/src/ActionList/Group.test.tsx

@@ -1,12 +1,11 @@
-import {describe, it, expect, vi} from 'vitest'
+import {describe, it, expect} from 'vitest'
 import {render as HTMLRender} from '@testing-library/react'
 import BaseStyles from '../BaseStyles'
 import {ActionList} from '.'
 import {ActionMenu} from '..'
 
 describe('ActionList.Group', () => {
   it('should throw an error when ActionList.GroupHeading has an `as` prop when it is used within ActionMenu context', async () => {
-    const spy = vi.spyOn(console, 'error').mockImplementation(() => vi.fn())
     expect(() =>
       HTMLRender(
         <BaseStyles>
@@ -25,8 +24,6 @@ describe('ActionList.Group', () => {
     ).toThrow(
       "Looks like you are trying to set a heading level to a menu role. Group headings for menu type action lists are for representational purposes, and rendered as divs. Therefore they don't need a heading level.",
     )
-    expect(spy).toHaveBeenCalled()
-    spy.mockRestore()
   })
 
   it('should render the ActionList.GroupHeading component as a heading with the given heading level', async () => {
@@ -43,7 +40,6 @@ describe('ActionList.Group', () => {
     expect(heading).toHaveTextContent('Group Heading')
   })
   it('should throw an error if ActionList.GroupHeading is used without an `as` prop when no role is specified (for list role)', async () => {
-    const spy = vi.spyOn(console, 'error').mockImplementation(() => vi.fn())
     expect(() =>
       HTMLRender(
         <ActionList>
@@ -57,8 +53,6 @@ describe('ActionList.Group', () => {
     ).toThrow(
       "You are setting a heading for a list, that requires a heading level. Please use 'as' prop to set a proper heading level.",
     )
-    expect(spy).toHaveBeenCalled()
-    spy.mockRestore()
   })
   it('should render the ActionList.GroupHeading component as a span (not a heading tag) when role is specified as listbox', async () => {
     const container = HTMLRender(

packages/react/src/ActionList/Heading.test.tsx

@@ -1,4 +1,4 @@
-import {describe, it, expect, vi} from 'vitest'
+import {describe, it, expect} from 'vitest'
 import {render as HTMLRender} from '@testing-library/react'
 import BaseStyles from '../BaseStyles'
 import {ActionList} from '.'
@@ -29,7 +29,6 @@ describe('ActionList.Heading', () => {
   })
 
   it('should throw an error when ActionList.Heading is used within ActionMenu context', async () => {
-    const spy = vi.spyOn(console, 'error').mockImplementation(() => vi.fn())
     expect(() =>
       HTMLRender(
         <BaseStyles>
@@ -47,8 +46,6 @@ describe('ActionList.Heading', () => {
     ).toThrow(
       "ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.",
     )
-    expect(spy).toHaveBeenCalled()
-    spy.mockRestore()
   })
 
   it('should support a custom `className` on the outermost element', () => {

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

@@ -122,11 +122,6 @@ describe('AnchoredOverlay', () => {
     expect(mockCloseCallback).toHaveBeenCalledWith('escape')
   })
 
-  it('should render consistently when open', () => {
-    const {container} = render(<AnchoredOverlayTestComponent initiallyOpen={true} />)
-    expect(container).toMatchSnapshot()
-  })
-
   it('should call onPositionChange when provided', async () => {
     const mockPositionChangeCallback = vi.fn(({position}: {position: AnchorPosition}) => position)
     render(<AnchoredOverlayTestComponent initiallyOpen={true} onPositionChange={mockPositionChangeCallback} />)

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

@@ -21,35 +21,6 @@ const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
 )
 
 describe('NavList', () => {
-  it('renders a simple list', () => {
-    const {container} = render(
-      <NavList>
-        <NavList.Item href="/" aria-current="page">
-          Home
-        </NavList.Item>
-        <NavList.Item href="/about">About</NavList.Item>
-        <NavList.Item href="/contact">Contact</NavList.Item>
-      </NavList>,
-    )
-    expect(container).toMatchSnapshot()
-  })
-
-  it('renders with groups', () => {
-    const {container} = render(
-      <NavList>
-        <NavList.Group title="Overview">
-          <NavList.Item href="/getting-started" aria-current="page">
-            Getting started
-          </NavList.Item>
-        </NavList.Group>
-        <NavList.Group title="Components">
-          <NavList.Item href="/Avatar">Avatar</NavList.Item>
-        </NavList.Group>
-      </NavList>,
-    )
-    expect(container).toMatchSnapshot()
-  })
-
   it('supports TrailingAction', async () => {
     const {getByRole} = render(
       <NavList>
@@ -196,54 +167,6 @@ describe('NavList.Item with NavList.SubNav', () => {
     expect(queryByRole('list', {name: 'Item 2'})).toBeNull()
   })
 
-  it('has active styles if SubNav contains the current item and is closed', () => {
-    const {container, getByRole, queryByRole} = render(
-      <NavList>
-        <NavList.Item>
-          Item
-          <NavList.SubNav>
-            <NavList.Item href="#" aria-current="page">
-              Sub Item
-            </NavList.Item>
-          </NavList.SubNav>
-        </NavList.Item>
-      </NavList>,
-    )
-
-    const button = getByRole('button')
-
-    // Starts open
-    expect(queryByRole('list', {name: 'Item'})).toBeVisible()
-
-    // Click to close
-    fireEvent.click(button)
-    expect(queryByRole('list', {name: 'Item'})).toBeNull()
-
-    // Snapshot styles
-    expect(container).toMatchSnapshot()
-  })
-
-  it('does not have active styles if SubNav contains the current item and is open', () => {
-    const {container, queryByRole} = render(
-      <NavList>
-        <NavList.Item>
-          Item
-          <NavList.SubNav>
-            <NavList.Item href="#" aria-current="page">
-              Sub Item
-            </NavList.Item>
-          </NavList.SubNav>
-        </NavList.Item>
-      </NavList>,
-    )
-
-    // Starts open
-    expect(queryByRole('list', {name: 'Item'})).toBeVisible()
-
-    // Snapshot styles
-    expect(container).toMatchSnapshot()
-  })
-
   it('prevents more than 4 levels of nested SubNavs', () => {
     const consoleSpy = vi
       .spyOn(console, 'error')