Remove test console warnings and add CI enforcement

package.json

@@ -94,7 +94,8 @@
     "turbo": "^2.6.3",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.1",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.5",
+    "vitest-fail-on-console": "^0.10.1"
   },
   "overrides": {
     "zod-validation-error": "^4.0.0"

packages/doc-gen/config/vitest/setup.ts

@@ -0,0 +1 @@
+import '@primer/vitest-config/setup'

packages/doc-gen/tsconfig.build.json

@@ -4,5 +4,6 @@
     "emitDeclarationOnly": true,
     "outDir": "./dist",
     "rootDir": "./src"
-  }
+  },
+  "include": ["src/**/*"]
 }

packages/doc-gen/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["src"]
+  "include": ["src", "config/**/*.ts"]
 }

packages/doc-gen/vitest.config.mts

@@ -6,6 +6,7 @@ export default defineConfig({
   },
   test: {
     environment: 'node',
+    setupFiles: ['config/vitest/setup.ts'],
     detectAsyncLeaks: true,
   },
 })

packages/postcss-preset-primer/config/vitest/setup.ts

@@ -0,0 +1 @@
+import '@primer/vitest-config/setup'

packages/postcss-preset-primer/tsconfig.json

@@ -4,6 +4,5 @@
     "allowJs": true,
     "checkJs": true
   },
-  "include": ["src", "vitest.config.ts"]
+  "include": ["src", "vitest.config.ts", "config/**/*.ts"]
 }
-

packages/postcss-preset-primer/vitest.config.ts

@@ -3,6 +3,7 @@ import {defineConfig} from 'vitest/config'
 export default defineConfig({
   test: {
     environment: 'node',
+    setupFiles: ['config/vitest/setup.ts'],
     detectAsyncLeaks: true,
   },
 })

packages/react/config/vitest/setup.ts

@@ -0,0 +1 @@
+import '@primer/vitest-config/setup'

packages/react/src/ActionBar/ActionBar.test.tsx

@@ -1,5 +1,5 @@
 import {describe, expect, it, afterEach, vi} from 'vitest'
-import {render, screen, act} from '@testing-library/react'
+import {render, screen, act, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React, {createRef, useState} from 'react'
 import ActionBar from './'
@@ -82,6 +82,10 @@ describe('ActionBar', () => {
   })
 })
 
+const waitForActionBarEffects = async () => {
+  await act(async () => {})
+}
+
 describe('ActionBar Registry System', () => {
   it('should preserve order with deep nesting', () => {
     render(
@@ -221,7 +225,9 @@ describe('ActionBar Registry System', () => {
       await user.click(screen.getByText('Increment'))
     }
 
-    expect(screen.getByRole('button', {name: 'Button 10'})).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByRole('button', {name: 'Button 10'})).toBeInTheDocument()
+    })
   })
 
   it('should handle zero-width scenarios gracefully', () => {
@@ -356,7 +362,9 @@ describe('ActionBar.Menu returnFocusRef', () => {
 
     // Verify focus is returned to the returnFocusRef element
     const returnFocusTarget = screen.getByTestId('return-focus-target')
-    expect(document.activeElement).toEqual(returnFocusTarget)
+    await waitFor(() => {
+      expect(document.activeElement).toEqual(returnFocusTarget)
+    })
   })
 
   it('returns focus to returnFocusRef when menu item is selected', async () => {
@@ -390,7 +398,9 @@ describe('ActionBar.Menu returnFocusRef', () => {
 
     // Verify focus is returned to the returnFocusRef element
     const returnFocusTarget = screen.getByTestId('return-focus-target')
-    expect(document.activeElement).toEqual(returnFocusTarget)
+    await waitFor(() => {
+      expect(document.activeElement).toEqual(returnFocusTarget)
+    })
   })
 
   it('returns focus to anchor button when returnFocusRef is not provided', async () => {
@@ -414,34 +424,46 @@ describe('ActionBar.Menu returnFocusRef', () => {
     await user.keyboard('{Escape}')
 
     // Verify focus returns to the menu button (default behavior)
-    expect(document.activeElement).toEqual(menuButton)
+    await waitFor(() => {
+      expect(document.activeElement).toEqual(menuButton)
+    })
   })
 })
 
 describe('ActionBar data-component attributes', () => {
-  it('renders ActionBar with data-component attribute', () => {
+  it('renders ActionBar with data-component attribute', async () => {
     const {container} = render(
       <ActionBar aria-label="Toolbar">
         <ActionBar.IconButton icon={BoldIcon} aria-label="Bold" />
       </ActionBar>,
     )
 
+    await waitFor(() => {
+      expect(screen.getByRole('toolbar')).toBeInTheDocument()
+    })
+    await waitForActionBarEffects()
+
     const actionBar = container.querySelector('[data-component="ActionBar"]')
     expect(actionBar).toBeInTheDocument()
   })
 
-  it('renders ActionBar.IconButton with data-component attribute', () => {
+  it('renders ActionBar.IconButton with data-component attribute', async () => {
     const {container} = render(
       <ActionBar aria-label="Toolbar">
         <ActionBar.IconButton icon={BoldIcon} aria-label="Bold" />
       </ActionBar>,
     )
 
+    await waitFor(() => {
+      expect(screen.getByRole('toolbar')).toBeInTheDocument()
+    })
+    await waitForActionBarEffects()
+
     const iconButton = container.querySelector('[data-component="ActionBar"] [data-component="IconButton"]')
     expect(iconButton).toBeInTheDocument()
   })
 
-  it('renders ActionBar.VerticalDivider with data-component attribute', () => {
+  it('renders ActionBar.VerticalDivider with data-component attribute', async () => {
     const {container} = render(
       <ActionBar aria-label="Toolbar">
         <ActionBar.IconButton icon={BoldIcon} aria-label="Bold" />
@@ -450,11 +472,16 @@ describe('ActionBar data-component attributes', () => {
       </ActionBar>,
     )
 
+    await waitFor(() => {
+      expect(screen.getByRole('toolbar')).toBeInTheDocument()
+    })
+    await waitForActionBarEffects()
+
     const divider = container.querySelector('[data-component="ActionBar.VerticalDivider"]')
     expect(divider).toBeInTheDocument()
   })
 
-  it('renders ActionBar.Group with data-component attribute', () => {
+  it('renders ActionBar.Group with data-component attribute', async () => {
     const {container} = render(
       <ActionBar aria-label="Toolbar">
         <ActionBar.Group>
@@ -464,17 +491,27 @@ describe('ActionBar data-component attributes', () => {
       </ActionBar>,
     )
 
+    await waitFor(() => {
+      expect(screen.getByRole('toolbar')).toBeInTheDocument()
+    })
+    await waitForActionBarEffects()
+
     const group = container.querySelector('[data-component="ActionBar.Group"]')
     expect(group).toBeInTheDocument()
   })
 
-  it('renders ActionBar.Menu.IconButton with data-component attribute', () => {
+  it('renders ActionBar.Menu.IconButton with data-component attribute', async () => {
     render(
       <ActionBar aria-label="Toolbar">
         <ActionBar.Menu aria-label="More options" icon={BoldIcon} items={[{label: 'Option 1', onClick: vi.fn()}]} />
       </ActionBar>,
     )
 
+    await waitFor(() => {
+      expect(screen.getByRole('toolbar')).toBeInTheDocument()
+    })
+    await waitForActionBarEffects()
+
     const menuButton = screen.getByRole('button', {name: 'More options'})
     expect(menuButton).toHaveAttribute('data-component', 'ActionBar.Menu.IconButton')
   })

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

@@ -1,4 +1,4 @@
-import {describe, it, expect} from 'vitest'
+import {describe, it, expect, vi} from 'vitest'
 import {render as HTMLRender} from '@testing-library/react'
 import {PlusIcon} from '@primer/octicons-react'
 import BaseStyles from '../BaseStyles'
@@ -22,6 +22,8 @@
   implementsClassName(ActionList.GroupHeading, classes.GroupHeading)
 
   it('should throw an error when ActionList.GroupHeading has an `as` prop when it is used within ActionMenu context', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
     expect(() =>
       HTMLRender(
         <BaseStyles>
@@ -40,6 +42,10 @@
     ).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(consoleErrorSpy).toHaveBeenCalled()
+
+    consoleErrorSpy.mockRestore()
   })
 
   it('should render the ActionList.GroupHeading component as a heading with the given heading level', async () => {
@@ -56,6 +62,8 @@
     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 consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
     expect(() =>
       HTMLRender(
         <ActionList>
@@ -69,6 +77,10 @@
     ).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(consoleErrorSpy).toHaveBeenCalled()
+
+    consoleErrorSpy.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(
@@ -191,6 +203,8 @@
     })
 
     it('throws when GroupHeading.TrailingAction is used inside an ActionMenu (menu role) and the feature flag is enabled', () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
       expect(() =>
         HTMLRender(
           <FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
@@ -212,9 +226,15 @@
           </FeatureFlags>,
         ),
       ).toThrow(/can not be used inside an ActionList with an ARIA role of "menu"/)
+
+      expect(consoleErrorSpy).toHaveBeenCalled()
+
+      consoleErrorSpy.mockRestore()
     })
 
     it('throws when GroupHeading.TrailingAction is used inside a listbox role and the feature flag is enabled', () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
       expect(() =>
         HTMLRender(
           <FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
@@ -229,6 +249,10 @@
           </FeatureFlags>,
         ),
       ).toThrow(/can not be used inside an ActionList with an ARIA role of "listbox"/)
+
+      expect(consoleErrorSpy).toHaveBeenCalled()
+
+      consoleErrorSpy.mockRestore()
     })
   })
 })

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

@@ -1,4 +1,4 @@
-import {describe, it, expect} from 'vitest'
+import {describe, it, expect, vi} from 'vitest'
 import {render as HTMLRender} from '@testing-library/react'
 import BaseStyles from '../BaseStyles'
 import {ActionList} from '.'
@@ -42,6 +42,8 @@
   })
 
   it('should throw an error when ActionList.Heading is used within ActionMenu context', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
     expect(() =>
       HTMLRender(
         <BaseStyles>
@@ -59,5 +61,9 @@
     ).toThrow(
       "ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.",
     )
+
+    expect(consoleErrorSpy).toHaveBeenCalled()
+
+    consoleErrorSpy.mockRestore()
   })
 })