Skip to content

test: handle expected console output #7983

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joshblack wants to merge 2 commits into from
Open

test: handle expected console output #7983

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa413eb
Handle expected console output in tests
joshblack Jun 12, 2026
24c767b
test: handle React 19 render error logging
joshblack Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 75 additions & 67 deletions packages/react/src/ActionList/Group.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import BaseStyles from '../BaseStyles'
import {ActionList} from '.'
import {ActionMenu} from '..'
import {FeatureFlags} from '../FeatureFlags'
import {implementsClassName} from '../utils/testing'
import {implementsClassName, withExpectedConsoleError} from '../utils/testing'
import classes from './Group.module.css'

describe('ActionList.Group', () => {
Expand All @@ -22,24 +22,26 @@ describe('ActionList.Group', () => {
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 () => {
expect(() =>
HTMLRender(
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Group>
<ActionList.GroupHeading as="h2">Group Heading</ActionList.GroupHeading>
</ActionList.Group>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>,
),
).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.",
)
withExpectedConsoleError(() => {
expect(() =>
HTMLRender(
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Group>
<ActionList.GroupHeading as="h2">Group Heading</ActionList.GroupHeading>
</ActionList.Group>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>,
),
).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.",
)
})
})

it('should render the ActionList.GroupHeading component as a heading with the given heading level', async () => {
Expand All @@ -56,19 +58,21 @@ 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 () => {
expect(() =>
HTMLRender(
<ActionList>
<ActionList.Heading as="h1">Heading</ActionList.Heading>
<ActionList.Group>
<ActionList.GroupHeading>Group Heading</ActionList.GroupHeading>
<ActionList.Item>Item</ActionList.Item>
</ActionList.Group>
</ActionList>,
),
).toThrow(
"You are setting a heading for a list, that requires a heading level. Please use 'as' prop to set a proper heading level.",
)
withExpectedConsoleError(() => {
expect(() =>
HTMLRender(
<ActionList>
<ActionList.Heading as="h1">Heading</ActionList.Heading>
<ActionList.Group>
<ActionList.GroupHeading>Group Heading</ActionList.GroupHeading>
<ActionList.Item>Item</ActionList.Item>
</ActionList.Group>
</ActionList>,
),
).toThrow(
"You are setting a heading for a list, that requires a heading level. Please use 'as' prop to set a proper heading level.",
)
})
})
it('should render the ActionList.GroupHeading component as a span (not a heading tag) when role is specified as listbox', async () => {
const container = HTMLRender(
Expand Down Expand Up @@ -191,44 +195,48 @@ describe('ActionList.Group', () => {
})

it('throws when GroupHeading.TrailingAction is used inside an ActionMenu (menu role) and the feature flag is enabled', () => {
expect(() =>
HTMLRender(
<FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Group>
<ActionList.GroupHeading>
Group Heading
<ActionList.GroupHeading.TrailingAction label="New field" icon={PlusIcon} />
</ActionList.GroupHeading>
</ActionList.Group>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>
</FeatureFlags>,
),
).toThrow(/can not be used inside an ActionList with an ARIA role of "menu"/)
withExpectedConsoleError(() => {
expect(() =>
HTMLRender(
<FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Group>
<ActionList.GroupHeading>
Group Heading
<ActionList.GroupHeading.TrailingAction label="New field" icon={PlusIcon} />
</ActionList.GroupHeading>
</ActionList.Group>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>
</FeatureFlags>,
),
).toThrow(/can not be used inside an ActionList with an ARIA role of "menu"/)
})
})

it('throws when GroupHeading.TrailingAction is used inside a listbox role and the feature flag is enabled', () => {
expect(() =>
HTMLRender(
<FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
<ActionList role="listbox">
<ActionList.Group>
<ActionList.GroupHeading>
Group Heading
<ActionList.GroupHeading.TrailingAction label="New field" icon={PlusIcon} />
</ActionList.GroupHeading>
</ActionList.Group>
</ActionList>
</FeatureFlags>,
),
).toThrow(/can not be used inside an ActionList with an ARIA role of "listbox"/)
withExpectedConsoleError(() => {
expect(() =>
HTMLRender(
<FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
<ActionList role="listbox">
<ActionList.Group>
<ActionList.GroupHeading>
Group Heading
<ActionList.GroupHeading.TrailingAction label="New field" icon={PlusIcon} />
</ActionList.GroupHeading>
</ActionList.Group>
</ActionList>
</FeatureFlags>,
),
).toThrow(/can not be used inside an ActionList with an ARIA role of "listbox"/)
})
})
})
})
38 changes: 20 additions & 18 deletions packages/react/src/ActionList/Heading.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {render as HTMLRender} from '@testing-library/react'
import BaseStyles from '../BaseStyles'
import {ActionList} from '.'
import {ActionMenu} from '..'
import {implementsClassName} from '../utils/testing'
import {implementsClassName, withExpectedConsoleError} from '../utils/testing'
import classes from './Heading.module.css'

describe('ActionList.Heading', () => {
Expand Down Expand Up @@ -42,22 +42,24 @@ describe('ActionList.Heading', () => {
})

it('should throw an error when ActionList.Heading is used within ActionMenu context', async () => {
expect(() =>
HTMLRender(
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Heading as="h1">Heading</ActionList.Heading>
<ActionList.Item>Item</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>,
),
).toThrow(
"ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.",
)
withExpectedConsoleError(() => {
expect(() =>
HTMLRender(
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Heading as="h1">Heading</ActionList.Heading>
<ActionList.Item>Item</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>,
),
).toThrow(
"ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.",
)
})
})
})
20 changes: 11 additions & 9 deletions packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {XIcon} from '@primer/octicons-react'
import classes from '../Tooltip.module.css'

import type {JSX} from 'react'
import {implementsClassName} from '../../utils/testing'
import {implementsClassName, withExpectedConsoleError} from '../../utils/testing'

const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
<Tooltip text="Tooltip text" {...props}>
Expand Down Expand Up @@ -125,15 +125,17 @@ describe('Tooltip', () => {
expect(triggerEL.getAttribute('aria-describedby')).toContain('custom-tooltip-id')
})
it('should throw an error if the trigger element is disabled', () => {
expect(() => {
HTMLRender(
<Tooltip text="Tooltip text" direction="n">
<Button disabled>Delete</Button>
</Tooltip>,
withExpectedConsoleError(() => {
expect(() => {
HTMLRender(
<Tooltip text="Tooltip text" direction="n">
<Button disabled>Delete</Button>
</Tooltip>,
)
}).toThrow(
'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
)
}).toThrow(
'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
)
})
})
it('should not throw an error when the trigger element is a button in a fieldset', () => {
const {getByRole} = HTMLRender(
Expand Down
27 changes: 17 additions & 10 deletions packages/react/src/UnderlineNav/UnderlineNav.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
} from '@primer/octicons-react'

import {UnderlineNav} from '.'
import {implementsClassName} from '../utils/testing'
import {implementsClassName, withExpectedConsoleError} from '../utils/testing'
import classes from '../internal/components/UnderlineTabbedInterface.module.css'
import {clsx} from 'clsx'

Expand Down Expand Up @@ -158,14 +158,16 @@ describe('UnderlineNav', () => {
})

it('throws an error when there are multiple items that have aria-current', () => {
expect(() => {
render(
<UnderlineNav aria-label="Test Navigation">
<UnderlineNav.Item aria-current="page">Item 1</UnderlineNav.Item>
<UnderlineNav.Item aria-current="page">Item 2</UnderlineNav.Item>
</UnderlineNav>,
)
}).toThrow('Only one current element is allowed')
withExpectedConsoleError(() => {
expect(() => {
render(
<UnderlineNav aria-label="Test Navigation">
<UnderlineNav.Item aria-current="page">Item 1</UnderlineNav.Item>
<UnderlineNav.Item aria-current="page">Item 2</UnderlineNav.Item>
</UnderlineNav>,
)
}).toThrow('Only one current element is allowed')
})
})

it('should support icons passed in as an element', () => {
Expand Down Expand Up @@ -242,7 +244,12 @@ describe('UnderlineNav', () => {

describe('Keyboard Navigation', () => {
it('should move focus to the next/previous item on the list with the tab key', async () => {
const {getByRole} = render(<ResponsiveUnderlineNav />)
const {getByRole} = render(
<UnderlineNav aria-label="Repository">
<UnderlineNav.Item aria-current="page">Code</UnderlineNav.Item>
<UnderlineNav.Item counter={120}>Issues</UnderlineNav.Item>
</UnderlineNav>,
)
const item = getByRole('link', {name: 'Code'})
const nextItem = getByRole('link', {name: 'Issues (120)'})
const user = userEvent.setup()
Expand Down
Loading
Loading