test(many): vitest integration

Closes: INSTUI-4066

package.json

@@ -28,6 +28,7 @@
     "test:jest": "lerna run test:jest --stream",
     "test:new": "NODE_ENV=test jest",
     "cy:component": "cypress run --component",
+    "test:vitest": "vitest watch",
     "lint": "lerna run lint --stream",
     "lint:changes": "npm run lint -- --since HEAD^",
     "lint:fix": "lerna run lint:fix --stream",
@@ -78,6 +79,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/react-dom": "^18.3",
+    "@vitejs/plugin-react": "^4.2.1",
     "chai": "^5.1.0",
     "chalk": "^4.1.2",
     "commitizen": "^4.3.0",
@@ -90,12 +92,14 @@
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^24.0.0",
     "lerna": "^8.1.3",
     "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "ts-jest": "^29.1.2",
     "typescript": "5.4.5",
+    "vitest": "^1.6.0",
     "webpack": "^5.91.0"
   },
   "//dependency-comments": {

packages/ui-avatar/package.json

@@ -40,7 +40,8 @@
     "@instructure/ui-test-utils": "9.0.1",
     "@instructure/ui-themes": "9.0.1",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7"
+    "@testing-library/react": "^15.0.7",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

packages/ui-avatar/src/Avatar/__new-tests__/Avatar.test.tsx

@@ -23,6 +23,7 @@
  */
 import React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
 import { runAxeCheck } from '@instructure/ui-axe-check'
 
 import '@testing-library/jest-dom'
@@ -72,7 +73,7 @@ describe('<Avatar />', () => {
     })
 
     it('should return the underlying component', async () => {
-      const elementRef = jest.fn()
+      const elementRef = vi.fn()
       const { container } = render(
         <Avatar name="Avatar Name" elementRef={elementRef} />
       )
@@ -137,7 +138,7 @@ describe('<Avatar />', () => {
     })
 
     it('should call onImageLoaded once the image loads', async () => {
-      const onImageLoaded = jest.fn()
+      const onImageLoaded = vi.fn()
       const { container } = render(
         <Avatar name="Avatar Name" onImageLoaded={onImageLoaded} />
       )

packages/ui-dialog/package.json

@@ -37,7 +37,8 @@
     "@instructure/ui-prop-types": "9.0.1",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2"
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

packages/ui-dialog/src/Dialog/__new-tests__/Dialog.test.tsx

@@ -30,6 +30,7 @@ import React, {
   useState
 } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
 import { userEvent } from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
@@ -156,7 +157,7 @@ describe('<Dialog />', () => {
   })
 
   it('should call onDismiss prop when Esc key pressed', async () => {
-    const onDismiss = jest.fn()
+    const onDismiss = vi.fn()
     const { getByRole } = renderDialog({ onDismiss })
     const dialog = getByRole('dialog')
 
@@ -172,7 +173,7 @@ describe('<Dialog />', () => {
   })
 
   it('should call onDismiss prop when the document is clicked', async () => {
-    const onDismiss = jest.fn()
+    const onDismiss = vi.fn()
     renderDialog({ onDismiss, shouldCloseOnDocumentClick: true })
 
     await waitFor(() => {
@@ -205,7 +206,7 @@ describe('<Dialog />', () => {
     })
 
     it('should warn when trying to focus or blur a closed dialog', () => {
-      const consoleError = jest
+      const consoleError = vi
         .spyOn(console, 'error')
         .mockImplementation(() => {})
       let ref
@@ -333,7 +334,7 @@ describe('<Dialog />', () => {
 
     describe('when focus leaves the first and last tabbable', () => {
       it(`should NOT call onBlur when shouldContainFocus=true and tab pressing last tabbable`, async () => {
-        const onBlur = jest.fn()
+        const onBlur = vi.fn()
         const { getByTestId } = render(
           <DialogExample
             open
@@ -357,7 +358,7 @@ describe('<Dialog />', () => {
       })
 
       it('should NOT call onBlur when shouldContainFocus=true and Shift+Tab pressing first tabbable', async () => {
-        const onBlur = jest.fn()
+        const onBlur = vi.fn()
 
         const { getByTestId } = render(
           <DialogExample
@@ -387,7 +388,7 @@ describe('<Dialog />', () => {
       })
 
       it('should call onBlur when shouldContainFocus=false and tab pressing last tabbable', async () => {
-        const onBlur = jest.fn()
+        const onBlur = vi.fn()
 
         const { getByTestId } = render(
           <DialogExample
@@ -414,7 +415,7 @@ describe('<Dialog />', () => {
       })
 
       it('should call onBlur when shouldContainFocus=false and pressing Shift+Tab on the first tabbable', async () => {
-        const onBlur = jest.fn()
+        const onBlur = vi.fn()
 
         const { getByTestId } = render(
           <DialogExample

packages/ui-modal/package.json

@@ -50,7 +50,8 @@
     "@instructure/ui-themes": "9.0.1",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2"
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "publishConfig": {
     "access": "public"

packages/ui-modal/src/Modal/ModalBody/__new-tests__/ModalBody.test.tsx

@@ -25,6 +25,7 @@
 import React from 'react'
 
 import { render } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom'
 
 import { color2hex } from '@instructure/ui-color-utils'
@@ -85,7 +86,7 @@ describe('<ModalBody />', () => {
     allProps.forEach((prop) => {
       if (prop in allowedProps) {
         it(`should allow the '${prop}' prop`, () => {
-          const consoleErrorSpy = jest
+          const consoleErrorSpy = vi
             .spyOn(console, 'error')
             .mockImplementation(() => {})
           const props = { [prop]: allowedProps[prop] }
@@ -98,7 +99,7 @@ describe('<ModalBody />', () => {
       } else {
         it(`should NOT allow the '${prop}' prop`, () => {
           const expectedErrorMessage = `prop '${prop}' is not allowed.`
-          const consoleErrorSpy = jest
+          const consoleErrorSpy = vi
             .spyOn(console, 'error')
             .mockImplementation(() => {})
 

packages/ui-modal/src/Modal/ModalFooter/__new-tests__/ModalFooter.test.tsx

@@ -25,6 +25,7 @@
 import React from 'react'
 
 import { render } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom'
 
 import { canvas } from '@instructure/ui-themes'

packages/ui-modal/src/Modal/ModalHeader/__new-tests__/ModalHeader.test.tsx

@@ -25,6 +25,7 @@
 import React from 'react'
 
 import { render } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom'
 
 import { canvas } from '@instructure/ui-themes'

packages/ui-modal/src/Modal/__new-tests__/Modal.test.tsx

@@ -24,6 +24,7 @@
 
 import React from 'react'
 import { render, waitFor } from '@testing-library/react'
+import { describe, it, expect, afterEach, vi } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
@@ -32,8 +33,8 @@ import type { ModalProps } from '../props'
 
 describe('<Modal />', () => {
   afterEach(() => {
-    jest.clearAllMocks()
-    jest.restoreAllMocks()
+    vi.clearAllMocks()
+    vi.restoreAllMocks()
   })
 
   it('should render nothing and have a node with no parent when closed', () => {
@@ -154,9 +155,9 @@ describe('<Modal />', () => {
   })
 
   it('should use transition', async () => {
-    const onEnter = jest.fn()
-    const onEntering = jest.fn()
-    const onEntered = jest.fn()
+    const onEnter = vi.fn()
+    const onEntering = vi.fn()
+    const onEntered = vi.fn()
 
     const { findByRole } = render(
       <Modal
@@ -183,7 +184,7 @@ describe('<Modal />', () => {
   })
 
   it('should support onOpen prop', async () => {
-    const onOpen = jest.fn()
+    const onOpen = vi.fn()
     const { findByRole } = render(
       <Modal
         open
@@ -204,7 +205,7 @@ describe('<Modal />', () => {
   })
 
   it('should support onClose prop', async () => {
-    const onClose = jest.fn()
+    const onClose = vi.fn()
 
     const { findByRole, rerender } = render(
       <Modal
@@ -237,7 +238,7 @@ describe('<Modal />', () => {
   })
 
   it('should dismiss when overlay clicked by default', async () => {
-    const onDismiss = jest.fn()
+    const onDismiss = vi.fn()
     const { findByText } = render(
       <Modal
         open
@@ -259,8 +260,8 @@ describe('<Modal />', () => {
   })
 
   it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
-    const onDismiss = jest.fn()
-    const onClickOuter = jest.fn()
+    const onDismiss = vi.fn()
+    const onClickOuter = vi.fn()
 
     const { findByRole, getByTestId } = render(
       <div>
@@ -308,7 +309,7 @@ describe('<Modal />', () => {
 
   describe('children validation', () => {
     it('should pass validation when children are valid', async () => {
-      const consoleErrorSpy = jest
+      const consoleErrorSpy = vi
         .spyOn(console, 'error')
         .mockImplementation(() => {})
 
@@ -330,7 +331,7 @@ describe('<Modal />', () => {
     })
 
     it('should not pass validation when children are invalid', async () => {
-      const consoleErrorSpy = jest
+      const consoleErrorSpy = vi
         .spyOn(console, 'error')
         .mockImplementation(() => {})
 

packages/ui-popover/package.json

@@ -48,7 +48,9 @@
     "@instructure/ui-test-queries": "9.0.1",
     "@instructure/ui-test-utils": "9.0.1",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7"
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

packages/ui-popover/src/Popover/__new-tests__/Popover.test.tsx

@@ -23,6 +23,7 @@
  */
 
 import React from 'react'
+import { describe, it, expect, afterEach, vi } from 'vitest'
 import { fireEvent, render, screen, cleanup } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
@@ -31,7 +32,6 @@ import type { PopoverProps } from '../props'
 
 describe('<Popover />', () => {
   afterEach(() => {
-    jest.resetAllMocks()
     cleanup()
   })
 
@@ -76,7 +76,7 @@ describe('<Popover />', () => {
     eventType: 'focusOut' | 'blur' | 'click' | 'focus'
   ) {
     it(`should fire ${handler} handler for ${eventType} event`, () => {
-      const handlerSpy = jest.fn()
+      const handlerSpy = vi.fn()
       const props = {
         [handler]: handlerSpy
       }
@@ -138,7 +138,7 @@ describe('<Popover />', () => {
   })
 
   it('should hide content when trigger is clicked', () => {
-    const onHideContent = jest.fn()
+    const onHideContent = vi.fn()
     render(
       <Popover
         on="click"
@@ -232,7 +232,7 @@ describe('<Popover />', () => {
     })
 
     it('should call onShowContent', () => {
-      const onShowContent = jest.fn()
+      const onShowContent = vi.fn()
 
       render(
         <Popover
@@ -253,7 +253,7 @@ describe('<Popover />', () => {
     })
 
     it('should call onHideContent', () => {
-      const onHideContent = jest.fn()
+      const onHideContent = vi.fn()
 
       render(
         <Popover

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
     "baseUrl": "./packages",
     "paths": {
       "@instructure/*": ["*/src"],
@@ -23,5 +24,6 @@
       "@instructure/ui-stylelint-config": ["ui-stylelint-config/lib"],
       "@instructure/ui-webpack-config": ["ui-webpack-config/config"]
     }
-  }
+  },
+  "include": ["./vitest.setup.ts", "./vitest.config.ts"]
 }