refactor: update live-region and utils tests from Jest to Vitest (#6157)

Author: joshblack

packages/react/jest.config.js

@@ -48,6 +48,9 @@ module.exports = {
     '<rootDir>/src/Truncate/',
     '<rootDir>/src/UnderlineNav/',
     '<rootDir>/src/hooks/',
+    '<rootDir>/src/live-region/',
+    '<rootDir>/src/utils/__tests__/invariant.test.ts',
+    '<rootDir>/src/utils/__tests__/warning.test.ts',
   ],
   transformIgnorePatterns: ['node_modules/(?!@github/[a-z-]+-element|@lit-labs/react|@oddbird/popover-polyfill)'],
 }

packages/react/src/live-region/__tests__/Announce.test.tsx

@@ -1,6 +1,7 @@
+import {describe, expect, it, beforeEach, afterEach} from 'vitest'
 import {render, screen} from '@testing-library/react'
 import {Announce} from '../Announce'
-import {getLiveRegion} from '../../utils/testing'
+import {getLiveRegion} from './test-helpers'
 
 describe('Announce', () => {
   beforeEach(() => {
@@ -42,7 +43,7 @@ describe('Announce', () => {
         test
       </Announce>,
     )
-    expect(screen.getByTestId('container')).toHaveStyle('color: blue')
+    expect(screen.getByTestId('container')).toHaveStyle('color: rgb(0, 0, 255)')
   })
 
   it('should support customizing the container element with `as`', () => {

packages/react/src/live-region/__tests__/AriaAlert.test.tsx

@@ -1,8 +1,9 @@
+import {describe, expect, it, beforeEach, afterEach} from 'vitest'
 import {render, screen} from '@testing-library/react'
 import React from 'react'
 import {AriaAlert} from '../AriaAlert'
 import {userEvent} from '@testing-library/user-event'
-import {getLiveRegion} from '../../utils/testing'
+import {getLiveRegion} from './test-helpers'
 
 describe('AriaAlert', () => {
   beforeEach(() => {
@@ -36,7 +37,7 @@ describe('AriaAlert', () => {
         test
       </AriaAlert>,
     )
-    expect(screen.getByTestId('container')).toHaveStyle('color: blue')
+    expect(screen.getByTestId('container')).toHaveStyle('color: rgb(0, 0, 255)')
   })
 
   it('should support customizing the container element with `as`', () => {

packages/react/src/live-region/__tests__/AriaStatus.test.tsx

@@ -1,8 +1,9 @@
+import {describe, expect, it, beforeEach, afterEach} from 'vitest'
 import {render, screen} from '@testing-library/react'
 import React from 'react'
 import {AriaStatus} from '../AriaStatus'
 import {userEvent} from '@testing-library/user-event'
-import {getLiveRegion} from '../../utils/testing'
+import {getLiveRegion} from './test-helpers'
 
 describe('AriaStatus', () => {
   beforeEach(() => {
@@ -72,7 +73,7 @@ describe('AriaStatus', () => {
         test
       </AriaStatus>,
     )
-    expect(screen.getByTestId('container')).toHaveStyle('color: blue')
+    expect(screen.getByTestId('container')).toHaveStyle('color: rgb(0, 0, 255)')
   })
 
   it('should support customizing the container element with `as`', () => {

packages/react/src/live-region/__tests__/test-helpers.ts

@@ -0,0 +1,9 @@
+import type {LiveRegionElement} from '@primer/live-region-element'
+
+export function getLiveRegion(): LiveRegionElement {
+  const liveRegion = document.querySelector('live-region')
+  if (liveRegion) {
+    return liveRegion as LiveRegionElement
+  }
+  throw new Error('No live-region found')
+}

packages/react/src/utils/__tests__/invariant.test.ts

@@ -1,19 +1,22 @@
+import {describe, expect, test} from 'vitest'
 import {invariant} from '../invariant'
 
-test('throws an error when the condition is `false`', () => {
-  expect(() => {
-    invariant(false, 'test')
-  }).toThrow('test')
-})
+describe('invariant', () => {
+  test('throws an error when the condition is `false`', () => {
+    expect(() => {
+      invariant(false, 'test')
+    }).toThrow('test')
+  })
 
-test('does not throw an error when the condition is `true`', () => {
-  expect(() => {
-    invariant(true, 'test')
-  }).not.toThrow()
-})
+  test('does not throw an error when the condition is `true`', () => {
+    expect(() => {
+      invariant(true, 'test')
+    }).not.toThrow()
+  })
 
-test('formats arguments into error string', () => {
-  expect(() => {
-    invariant(false, 'test %s %s %s', 1, 2, 3)
-  }).toThrow('test 1 2 3')
+  test('formats arguments into error string', () => {
+    expect(() => {
+      invariant(false, 'test %s %s %s', 1, 2, 3)
+    }).toThrow('test 1 2 3')
+  })
 })

packages/react/src/utils/__tests__/warning.test.ts

@@ -1,30 +1,33 @@
+import {describe, expect, test, vi} from 'vitest'
 import {warning} from '../warning'
 
-test('emits a message to console.warn() when the condition is `true`', () => {
-  const spy = jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
+describe('warning', () => {
+  test('emits a message to console.warn() when the condition is `true`', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementationOnce(() => {})
 
-  warning(true, 'test')
+    warning(true, 'test')
 
-  expect(spy).toHaveBeenCalled()
-  expect(spy).toHaveBeenCalledWith('Warning:', 'test')
-  spy.mockRestore()
-})
+    expect(spy).toHaveBeenCalled()
+    expect(spy).toHaveBeenCalledWith('Warning:', 'test')
+    spy.mockRestore()
+  })
 
-test('does not emit a message to console.warn() when the condition is `false`', () => {
-  const spy = jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
+  test('does not emit a message to console.warn() when the condition is `false`', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementationOnce(() => {})
 
-  warning(false, 'test')
+    warning(false, 'test')
 
-  expect(spy).not.toHaveBeenCalled()
-  spy.mockRestore()
-})
+    expect(spy).not.toHaveBeenCalled()
+    spy.mockRestore()
+  })
 
-test('formats arguments into warning string', () => {
-  const spy = jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
+  test('formats arguments into warning string', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementationOnce(() => {})
 
-  warning(true, 'test %s %s %s', 1, 2, 3)
+    warning(true, 'test %s %s %s', 1, 2, 3)
 
-  expect(spy).toHaveBeenCalled()
-  expect(spy).toHaveBeenCalledWith('Warning:', 'test 1 2 3')
-  spy.mockRestore()
+    expect(spy).toHaveBeenCalled()
+    expect(spy).toHaveBeenCalledWith('Warning:', 'test 1 2 3')
+    spy.mockRestore()
+  })
 })

packages/react/vitest.config.mts

@@ -50,6 +50,9 @@ export default defineConfig({
       'src/Truncate/**/*.test.?(c|m)[jt]s?(x)',
       'src/UnderlineNav/**/*.test.?(c|m)[jt]s?(x)',
       'src/hooks/**/*.test.?(c|m)[jt]s?(x)',
+      'src/live-region/**/*.test.?(c|m)[jt]s?(x)',
+      'src/utils/__tests__/invariant.test.?(c|m)[jt]s?(x)',
+      'src/utils/__tests__/warning.test.?(c|m)[jt]s?(x)',
     ],
     setupFiles: ['config/vitest/setup.ts'],
     css: {