modify config and add sample component tests

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/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/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(() => {})
 

tsconfig.json

@@ -1,8 +1,7 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
-    // "types": ["vitest/globals"],
-    "types": ["@testing-library/jest-dom"],
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
     "baseUrl": "./packages",
     "paths": {
       "@instructure/*": ["*/src"],

vitest.config.ts

@@ -1,16 +1,17 @@
 /// <reference types="vitest" />
 
 import { defineConfig } from 'vitest/config'
-// import react from "@vitejs/plugin-react"
 
  export default defineConfig({
-   // plugins: [react()],
     test: {
       //include: ['**/__new-tests__/**/*.test.tsx'],
-      //include: ["./packages/ui-avatar/src/Avatar/__new-tests__/*.test.tsx"],
-      include: ["./packages/ui-popover/src/Popover/__new-tests__/*.test.tsx"],
+      include: [
+        "./packages/ui-avatar/**/__new-tests__/**/*.test.tsx",
+        "./packages/ui-popover/**/__new-tests__/**/*.test.tsx", 
+        "./packages/ui-dialog/**/__new-tests__/**/*.test.tsx", 
+        "./packages/ui-modal/**/__new-tests__/**/*.test.tsx"],
       globals: true,
       environment: "jsdom",
-      setupFiles: './vitest/setup.js',
+      setupFiles: './vitest.setup.ts',
     },
- })
+ })

vitest/setup.js → vitest.setup.ts

@@ -1,8 +1,9 @@
 import '@testing-library/jest-dom/vitest'
 import { cleanup } from '@testing-library/react'
-import { afterEach } from 'vitest'
+import { afterEach, vi } from 'vitest'
 
 // runs a clean after each test case (e.g. clearing jsdom)
 afterEach(() => {
   cleanup()
+  vi.restoreAllMocks()
 })