Migrate Avatar and AvatarStack test files from Jest to Vitest

packages/react/jest.config.js

@@ -18,6 +18,8 @@ module.exports = {
     '<rootDir>/src/ActionBar/',
     '<rootDir>/src/ActionList/',
     '<rootDir>/src/AnchoredOverlay/',
+    '<rootDir>/src/Avatar/',
+    '<rootDir>/src/AvatarStack/',
     '<rootDir>/src/Banner/',
     '<rootDir>/src/Blankslate/',
     '<rootDir>/src/BranchName/',

packages/react/src/Avatar/Avatar.test.tsx

@@ -1,55 +1,38 @@
+import {describe, expect, it} from 'vitest'
+import {render, screen} from '@testing-library/react'
 import {Avatar} from '..'
 import theme from '../theme'
-import {px, render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, screen} from '@testing-library/react'
-import axe from 'axe-core'
+import {px, render as testRender} from '../utils/testing'
 
 describe('Avatar', () => {
-  behavesAsComponent({
-    Component: Avatar,
-    options: {
-      skipAs: true,
-    },
-  })
-
-  checkExports('Avatar', {
-    default: Avatar,
-  })
-
   it('should support `className` on the outermost element', () => {
     const Element = () => <Avatar src="primer.png" className={'test-class-name'} />
-    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Avatar src="primer.png" />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('renders small by default', () => {
     const size = 20
-    const result = render(<Avatar src="primer.png" />)
+    const result = testRender(<Avatar src="primer.png" />)
     expect(result.props.width).toEqual(size)
     expect(result.props.height).toEqual(size)
   })
 
   it('respects the size prop', () => {
-    const result = render(<Avatar size={40} src="primer.png" alt="github" />)
+    const result = testRender(<Avatar size={40} src="primer.png" alt="github" />)
     expect(result.props.width).toEqual(40)
     expect(result.props.height).toEqual(40)
   })
 
   it('passes through the src prop', () => {
-    expect(render(<Avatar src="primer.png" alt="" />).props.src).toEqual('primer.png')
+    expect(testRender(<Avatar src="primer.png" alt="" />).props.src).toEqual('primer.png')
   })
 
   it('respects margin props', () => {
-    expect(render(<Avatar src="primer.png" alt="" sx={{m: 2}} />)).toHaveStyleRule('margin', px(theme.space[2]))
+    expect(testRender(<Avatar src="primer.png" alt="" sx={{m: 2}} />)).toHaveStyleRule('margin', px(theme.space[2]))
   })
 
   it('should support the `style` prop without overriding internal styles', () => {
-    HTMLRender(
+    render(
       <Avatar
         data-testid="avatar"
         src="primer.png"

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

@@ -1,7 +1,6 @@
+import {describe, expect, it} from 'vitest'
+import {render} from '@testing-library/react'
 import {AvatarStack} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
 
 const avatarComp = (
   <AvatarStack>
@@ -21,17 +20,7 @@ const rightAvatarComp = (
   </AvatarStack>
 )
 
-describe('Avatar', () => {
-  behavesAsComponent({
-    Component: AvatarStack,
-    toRender: () => avatarComp,
-    options: {skipAs: true},
-  })
-
-  checkExports('AvatarStack', {
-    default: AvatarStack,
-  })
-
+describe('AvatarStack', () => {
   it('should support `className` on the outermost element', () => {
     const Element = () => (
       <AvatarStack className={'test-class-name'}>
@@ -41,26 +30,22 @@ describe('Avatar', () => {
         <img src="https://avatars.githubusercontent.com/github" alt="" />
       </AvatarStack>
     )
-    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(avatarComp)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('respects alignRight props', () => {
-    expect(render(rightAvatarComp)).toMatchSnapshot()
+    const {container} = render(rightAvatarComp)
+    // Check that alignRight property affects the rendered component
+    expect(container.firstChild).toHaveAttribute('data-align-right', 'true')
   })
 
   it('should have a tabindex of 0 if there are no interactive children', () => {
-    const {container} = HTMLRender(avatarComp)
+    const {container} = render(avatarComp)
     expect(container.querySelector('[tabindex="0"]')).toBeInTheDocument()
   })
 
   it('should not have a tabindex if there are interactive children', () => {
-    const {container} = HTMLRender(
+    const {container} = render(
       <AvatarStack>
         <button type="button">Click me</button>
       </AvatarStack>,
@@ -69,7 +54,7 @@ describe('Avatar', () => {
   })
 
   it('should not have a tabindex if disableExpand is true', () => {
-    const {container} = HTMLRender(
+    const {container} = render(
       <AvatarStack disableExpand>
         <img src="https://avatars.githubusercontent.com/primer" alt="" />
         <img src="https://avatars.githubusercontent.com/github" alt="" />
@@ -80,7 +65,7 @@ describe('Avatar', () => {
 
   it('should support `style` prop on the outermost element', () => {
     const style = {backgroundColor: 'red'}
-    const {container} = HTMLRender(
+    const {container} = render(
       <AvatarStack style={style}>
         <img src="https://avatars.githubusercontent.com/primer" alt="" />
         <img src="https://avatars.githubusercontent.com/github" alt="" />

packages/react/vitest.config.browser.mts

@@ -21,6 +21,8 @@ export default defineConfig({
       'src/ActionBar/**/*.test.?(c|m)[jt]s?(x)',
       'src/ActionList/**/*.test.?(c|m)[jt]s?(x)',
       'src/AnchoredOverlay/**/*.test.?(c|m)[jt]s?(x)',
+      'src/Avatar/**/*.test.?(c|m)[jt]s?(x)',
+      'src/AvatarStack/**/*.test.?(c|m)[jt]s?(x)',
       'src/Banner/**/*.test.?(c|m)[jt]s?(x)',
       'src/Blankslate/**/*.test.?(c|m)[jt]s?(x)',
       'src/BranchName/**/*.test.?(c|m)[jt]s?(x)',