Skip to content

refactor: update tests from Jest to Vitest #6335

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

Merged
merged 3 commits into from
Jul 22, 2025
Merged

refactor: update tests from Jest to Vitest #6335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94bf0ae
refactor: update UnderlineNav tests to vitest
joshblack Jul 17, 2025
9298528
refactor: update src/deprecated tests to vitest
joshblack Jul 17, 2025
dc14a86
refactor(Hidden): update tests to vitest
joshblack Jul 17, 2025
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
6 changes: 4 additions & 2 deletions packages/react/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,13 @@ module.exports = {
'<rootDir>/src/Flash/',
'<rootDir>/src/FormControl/',
'<rootDir>/src/InlineMessage/',
'<rootDir>/src/Hidden/',
'<rootDir>/src/Label/',
'<rootDir>/src/NavList/',
'<rootDir>/src/Octicon/',
'<rootDir>/src/Overlay/',
'<rootDir>/src/Pagehead/',
'<rootDir>/src/PageLayout/',
'<rootDir>/src/Pagehead/',
'<rootDir>/src/Pagination/',
'<rootDir>/src/ProgressBar/',
'<rootDir>/src/Radio/',
Expand All @@ -51,8 +52,8 @@ module.exports = {
'<rootDir>/src/SegmentedControl/',
'<rootDir>/src/Select/',
'<rootDir>/src/Skeleton/',
'<rootDir>/src/SkeletonText/',
'<rootDir>/src/SkeletonAvatar/',
'<rootDir>/src/SkeletonText/',
'<rootDir>/src/Spinner/',
'<rootDir>/src/SplitPageLayout/',
'<rootDir>/src/Stack/',
Expand Down Expand Up @@ -80,6 +81,7 @@ module.exports = {
'<rootDir>/src/__tests__/theme.test.ts',
'<rootDir>/src/__tests__/themeGet.test.ts',
'<rootDir>/src/__tests__/useSafeTimeout.test.ts',
'<rootDir>/src/deprecated/',
'<rootDir>/src/hooks/',
'<rootDir>/src/internal/utils/',
'<rootDir>/src/live-region/',
Expand Down
32 changes: 2 additions & 30 deletions packages/react/src/Hidden/Hidden.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,8 @@
import {render} from '@testing-library/react'
import {Hidden} from '.'
import MatchMediaMock from 'jest-matchmedia-mock'
import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
import {describe, it, expect} from 'vitest'
import {Hidden} from '../Hidden'

let matchMedia: MatchMediaMock
describe('Hidden', () => {
beforeAll(() => {
matchMedia = new MatchMediaMock()
})

afterAll(() => {
matchMedia.clear()
})

behavesAsComponent({
Component: Hidden,
options: {skipAs: true, skipSx: true},
toRender: () => (
<Hidden when={'narrow'}>
<div>Hidden when narrow</div>
</Hidden>
),
})

checkExports('Hidden', {
default: Hidden,
Hidden,
})

it('renders `when` prop as expected', () => {
const {container} = render(
<Hidden when={'narrow'}>
Expand Down Expand Up @@ -65,6 +40,3 @@ describe('Hidden', () => {
)
})
})

checkStoriesForAxeViolations('Hidden.features', '../Hidden/')
checkStoriesForAxeViolations('Hidden.examples', '../Hidden/')
6 changes: 3 additions & 3 deletions packages/react/src/Hidden/__snapshots__/Hidden.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Hidden renders \`when\` prop as expected 1`] = `
exports[`Hidden > renders \`when\` prop as expected 1`] = `
<div>
<div
class="Hidden"
class="prc-Hidden-Hidden-Iaszc"
style="--hiddenDisplay-narrow: none;"
>
<div>
Expand Down
36 changes: 15 additions & 21 deletions packages/react/src/deprecated/UnderlineNav/UnderlineNav.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,35 @@
import {UnderlineNav} from '../../deprecated'
import {render, rendersClass, checkExports} from '../../utils/testing'
import {render as HTMLRender} from '@testing-library/react'
import axe from 'axe-core'
import {render} from '@testing-library/react'
import {describe, it, expect} from 'vitest'
import UnderlineNav from '../UnderlineNav'

Copy link
Preview

Copilot AI Jul 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The import path '../UnderlineNav' is inconsistent with the original import pattern. It should be 'import {UnderlineNav} from '../../deprecated'' to maintain consistency with the UnderlineNavLink test file and ensure the correct component is imported.

Suggested change
import UnderlineNav from '../UnderlineNav'
import {UnderlineNav} from '../../deprecated'

Copilot uses AI. Check for mistakes.

describe('UnderlineNav', () => {
checkExports('deprecated/UnderlineNav', {
default: UnderlineNav,
})

it('should have no axe violations', async () => {
const {container} = HTMLRender(<UnderlineNav />)
const results = await axe.run(container)
expect(results).toHaveNoViolations()
})

it('renders a <nav>', () => {
expect(render(<UnderlineNav />).type).toEqual('nav')
const {container} = render(<UnderlineNav />)
expect(container.firstElementChild?.tagName).toEqual('NAV')
})

it('adds the UnderlineNav class', () => {
expect(rendersClass(<UnderlineNav />, 'PRC-UnderlineNav')).toEqual(true)
const {container} = render(<UnderlineNav />)
expect(container.firstElementChild).toHaveClass('PRC-UnderlineNav')
})

it('respects the "align" prop', () => {
expect(rendersClass(<UnderlineNav align="right" />, 'PRC-UnderlineNav--right')).toEqual(true)
const {container} = render(<UnderlineNav align="right" />)
expect(container.firstElementChild).toHaveClass('PRC-UnderlineNav--right')
})

it('respects the "full" prop', () => {
expect(rendersClass(<UnderlineNav full />, 'PRC-UnderlineNav--full')).toEqual(true)
const {container} = render(<UnderlineNav full />)
expect(container.firstElementChild).toHaveClass('PRC-UnderlineNav--full')
})

it('sets aria-label to the "label" prop', () => {
expect(render(<UnderlineNav label="foo" />).props['aria-label']).toEqual('foo')
const {container} = render(<UnderlineNav label="foo" />)
expect(container.firstElementChild).toHaveAttribute('aria-label', 'foo')
})

it('wraps its children in an "PRC-UnderlineNav-body" div', () => {
const {getByTestId} = HTMLRender(
const {getByTestId} = render(
<UnderlineNav>
<b data-testid="content">test</b>
</UnderlineNav>,
Expand All @@ -46,7 +40,7 @@ describe('UnderlineNav', () => {
})

it('respects the "actions" prop', () => {
const {getByTestId} = HTMLRender(<UnderlineNav actions={<span data-testid="action">test</span>} />)
const {getByTestId} = render(<UnderlineNav actions={<span data-testid="action">test</span>} />)

expect(getByTestId('action')).toBeInTheDocument()
expect(getByTestId('action').parentElement).toHaveClass('PRC-UnderlineNav-actions')
Expand Down
14 changes: 4 additions & 10 deletions packages/react/src/deprecated/UnderlineNav/UnderlineNavLink.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import {render} from '@testing-library/react'
import {describe, it, expect} from 'vitest'
import {UnderlineNav} from '../../deprecated'
import {render} from '../../utils/testing'
import {render as HTMLRender} from '@testing-library/react'
import axe from 'axe-core'

describe('UnderlineNav.Link', () => {
it('renders an <a> by default', () => {
expect(render(<UnderlineNav.Link />).type).toEqual('a')
})

it('should have no axe violations', async () => {
const {container} = HTMLRender(<UnderlineNav.Link href="www.github.com">Go to GitHub</UnderlineNav.Link>)
const results = await axe.run(container)
expect(results).toHaveNoViolations()
const {container} = render(<UnderlineNav.Link />)
expect(container.firstElementChild?.tagName).toEqual('A')
})
})
10 changes: 5 additions & 5 deletions packages/react/src/deprecated/utils/__snapshots__/createSlots.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`ComponentWithSlots renders all slots 1`] = `
exports[`ComponentWithSlots > renders all slots 1`] = `
<div>
<div>
first
Expand All @@ -14,7 +14,7 @@ exports[`ComponentWithSlots renders all slots 1`] = `
</div>
`;

exports[`ComponentWithSlots renders with context passed to children 1`] = `
exports[`ComponentWithSlots > renders with context passed to children 1`] = `
<div>
<div>
<span>
Expand All @@ -29,7 +29,7 @@ exports[`ComponentWithSlots renders with context passed to children 1`] = `
</div>
`;

exports[`ComponentWithSlots renders with just one slot 1`] = `
exports[`ComponentWithSlots > renders with just one slot 1`] = `
<div>
<div>
first
Expand All @@ -42,7 +42,7 @@ exports[`ComponentWithSlots renders with just one slot 1`] = `
</div>
`;

exports[`ComponentWithSlots renders without any slots 1`] = `
exports[`ComponentWithSlots > renders without any slots 1`] = `
<div>
<div>
<span>
Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/deprecated/utils/createSlots.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type React from 'react'
import {render, waitFor} from '@testing-library/react'
import {describe, it, expect} from 'vitest'
import type React from 'react'
import createSlots from './create-slots'

// setup a component with slots
Expand Down
6 changes: 4 additions & 2 deletions packages/react/vitest.config.browser.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,13 @@ export default defineConfig({
'src/Flash/**/*.test.?(c|m)[jt]s?(x)',
'src/FormControl/**/*.test.?(c|m)[jt]s?(x)',
'src/InlineMessage/**/*.test.?(c|m)[jt]s?(x)',
'src/Hidden/**/*.test.?(c|m)[jt]s?(x)',
'src/Label/**/*.test.?(c|m)[jt]s?(x)',
'src/NavList/**/*.test.?(c|m)[jt]s?(x)',
'src/Octicon/**/*.test.?(c|m)[jt]s?(x)',
'src/Overlay/**/*.test.?(c|m)[jt]s?(x)',
'src/Pagehead/**/*.test.?(c|m)[jt]s?(x)',
'src/PageLayout/**/*.test.?(c|m)[jt]s?(x)',
'src/Pagehead/**/*.test.?(c|m)[jt]s?(x)',
'src/Pagination/**/*.test.?(c|m)[jt]s?(x)',
'src/ProgressBar/**/*.test.?(c|m)[jt]s?(x)',
'src/Radio/**/*.test.?(c|m)[jt]s?(x)',
Expand All @@ -64,8 +65,8 @@ export default defineConfig({
'src/SegmentedControl/**/*.test.?(c|m)[jt]s?(x)',
'src/Select/**/*.test.?(c|m)[jt]s?(x)',
'src/Skeleton/**/*.test.?(c|m)[jt]s?(x)',
'src/SkeletonText/**/*.test.?(c|m)[jt]s?(x)',
'src/SkeletonAvatar/**/*.test.?(c|m)[jt]s?(x)',
'src/SkeletonText/**/*.test.?(c|m)[jt]s?(x)',
'src/Spinner/**/*.test.?(c|m)[jt]s?(x)',
'src/SplitPageLayout/**/*.test.?(c|m)[jt]s?(x)',
'src/Stack/**/*.test.?(c|m)[jt]s?(x)',
Expand All @@ -90,6 +91,7 @@ export default defineConfig({
'src/__tests__/filterObject.test.ts',
'src/__tests__/theme.test.ts',
'src/__tests__/themeGet.test.ts',
'src/deprecated/**/*.test.?(c|m)[jt]s?(x)',
'src/hooks/**/*.test.?(c|m)[jt]s?(x)',
'src/internal/utils/**/*.test.?(c|m)[jt]s?(x)',
'src/live-region/**/*.test.?(c|m)[jt]s?(x)',
Expand Down
Loading