@instructure/ui-buttons 9.2.1-snapshot-1 → 9.2.1-snapshot-2

package/lib/Button/__new-tests__/Button.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
@@ -34,6 +35,7 @@ var _circle, _Button, _Button2, _Button3, _Button4, _Button5, _Button6, _Button7
 describe('<Button/>', () => {
   var _Button9;
   let consoleWarningMock;
+  let consoleErrorMock;
   const iconSelector = 'svg[data-title="myIcon"]';
   const icon = /*#__PURE__*/_react.default.createElement("svg", {
     "data-title": "myIcon",
@@ -49,10 +51,12 @@ describe('<Button/>', () => {
   })));
   beforeEach(() => {
     // Mocking console to prevent test output pollution
-    consoleWarningMock = jest.spyOn(console, 'warn').mockImplementation();
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
   });
   afterEach(() => {
     consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
   });
   it('should render children', () => {
     const children = 'Hello world';
@@ -112,7 +116,7 @@ describe('<Button/>', () => {
     expect(button).toHaveAttribute('type', 'submit');
   });
   it('should pass the `elementRef` prop', () => {
-    const elementRef = jest.fn();
+    const elementRef = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
       elementRef: elementRef
     }, "Hello"));
@@ -189,7 +193,7 @@ describe('<Button/>', () => {
     expect(svgIcon).toBeInTheDocument();
   });
   it('should pass the `onClick` prop', async () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
       onClick: onClick
     }, "Hello"));
@@ -251,7 +255,7 @@ describe('<Button/>', () => {
     expect(button.tagName).toBe('SPAN');
   });
   it('should set role="button"', () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         as: "span",
         onClick: onClick
@@ -262,7 +266,7 @@ describe('<Button/>', () => {
     expect(button).toHaveAttribute('role', 'button');
   });
   it('should set tabIndex="0"', () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
       as: "span",
       onClick: onClick
@@ -272,7 +276,7 @@ describe('<Button/>', () => {
     expect(button).toHaveAttribute('tabIndex', '0');
   });
   it('should pass down the type prop to the button element', () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
       type: "submit",
       onClick: onClick
@@ -282,7 +286,7 @@ describe('<Button/>', () => {
     expect(button).toHaveAttribute('type', 'submit');
   });
   it('focuses with the focus helper', () => {
-    const onFocus = jest.fn();
+    const onFocus = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
       onFocus: onFocus
     }, "Hello World"));
@@ -293,7 +297,7 @@ describe('<Button/>', () => {
   });
   describe('onClick', () => {
     it('should call onClick when clicked', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         onClick: onClick
       }, "Hello World"));
@@ -306,7 +310,7 @@ describe('<Button/>', () => {
       });
     });
     it('should not call onClick when button is disabled', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         disabled: true,
         onClick: onClick
@@ -320,7 +324,7 @@ describe('<Button/>', () => {
       });
     });
     it('should not call onClick when button is readOnly', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         readOnly: true,
         onClick: onClick
@@ -334,7 +338,7 @@ describe('<Button/>', () => {
       });
     });
     it('should not call onClick when button is disabled and an href prop is provided', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)(_Button16 || (_Button16 = /*#__PURE__*/_react.default.createElement(_index.Button, {
         href: "#"
       }, "Hello World")));
@@ -347,7 +351,7 @@ describe('<Button/>', () => {
       });
     });
     it('should not call onClick when button is readOnly and an href prop is provided', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         readOnly: true,
         onClick: onClick,
@@ -362,7 +366,7 @@ describe('<Button/>', () => {
       });
     });
     it('should call onClick when space key is pressed if href is provided', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         onClick: onClick,
         href: "#"
@@ -376,7 +380,7 @@ describe('<Button/>', () => {
       });
     });
     it('should call onClick when enter key is pressed when not a button or link', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         as: "span",
         onClick: onClick
@@ -390,7 +394,7 @@ describe('<Button/>', () => {
       });
     });
     it('should not call onClick when button is disabled and space key is pressed', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         disabled: true,
         onClick: onClick,
@@ -405,7 +409,7 @@ describe('<Button/>', () => {
       });
     });
     it('should not call onClick when button is readOnly and space key is pressed', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         readOnly: true,
         onClick: onClick,
@@ -422,7 +426,7 @@ describe('<Button/>', () => {
   });
   describe('for a11y', () => {
     it('should meet standards when onClick is given', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
         onClick: onClick
       }, "Hello World"));

package/lib/CloseButton/__new-tests__/CloseButton.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
@@ -34,7 +35,7 @@ describe('<CloseButton />', () => {
   let consoleWarningMock;
   beforeEach(() => {
     // Mocking console to prevent test output pollution
-    consoleWarningMock = jest.spyOn(console, 'warn').mockImplementation();
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
   });
   afterEach(() => {
     consoleWarningMock.mockRestore();
@@ -51,7 +52,7 @@ describe('<CloseButton />', () => {
     expect(button).toHaveTextContent('Close');
   });
   it('should pass the `onClick` prop', async () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.CloseButton, {
       onClick: onClick,
       screenReaderLabel: "Hello"

package/lib/CondensedButton/__new-tests__/CondensedButton.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
@@ -91,7 +92,7 @@ describe('<CondensedButton/>', () => {
     expect(button).toHaveAttribute('type', 'submit');
   });
   it('should pass the `elementRef` prop', async () => {
-    const elementRef = jest.fn();
+    const elementRef = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
       elementRef: elementRef
     }, "Hello"));
@@ -168,7 +169,7 @@ describe('<CondensedButton/>', () => {
     expect(svgIcon).toBeInTheDocument();
   });
   it('should pass the `onClick` prop', async () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
       onClick: onClick
     }, "Hello"));

package/lib/IconButton/__new-tests__/IconButton.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
@@ -114,7 +115,7 @@ describe('<IconButton/>', () => {
     expect(button).toHaveAttribute('type', 'reset');
   });
   it('should pass the `elementRef` prop', () => {
-    const elementRef = jest.fn();
+    const elementRef = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
@@ -172,7 +173,7 @@ describe('<IconButton/>', () => {
     expect(button).toHaveAttribute('disabled');
   });
   it('should pass the `onClick` prop', async () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,

package/lib/ToggleButton/__new-tests__/ToggleButton.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
@@ -148,7 +149,7 @@ describe('<ToggleButton />', () => {
     expect(button).toHaveAttribute('disabled');
   });
   it('should pass the `onClick` prop', async () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "9.2.1-snapshot-1",
+  "version": "9.2.1-snapshot-2",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,31 +23,32 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.2.1-snapshot-1",
-    "@instructure/ui-babel-preset": "9.2.1-snapshot-1",
-    "@instructure/ui-test-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-themes": "9.2.1-snapshot-1",
+    "@instructure/ui-axe-check": "9.2.1-snapshot-2",
+    "@instructure/ui-babel-preset": "9.2.1-snapshot-2",
+    "@instructure/ui-test-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-themes": "9.2.1-snapshot-2",
     "@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"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.2.1-snapshot-1",
-    "@instructure/emotion": "9.2.1-snapshot-1",
-    "@instructure/shared-types": "9.2.1-snapshot-1",
-    "@instructure/ui-a11y-content": "9.2.1-snapshot-1",
-    "@instructure/ui-a11y-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-color-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-dom-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-icons": "9.2.1-snapshot-1",
-    "@instructure/ui-position": "9.2.1-snapshot-1",
-    "@instructure/ui-prop-types": "9.2.1-snapshot-1",
-    "@instructure/ui-react-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-testable": "9.2.1-snapshot-1",
-    "@instructure/ui-tooltip": "9.2.1-snapshot-1",
-    "@instructure/ui-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-view": "9.2.1-snapshot-1",
+    "@instructure/console": "9.2.1-snapshot-2",
+    "@instructure/emotion": "9.2.1-snapshot-2",
+    "@instructure/shared-types": "9.2.1-snapshot-2",
+    "@instructure/ui-a11y-content": "9.2.1-snapshot-2",
+    "@instructure/ui-a11y-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-color-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-dom-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-icons": "9.2.1-snapshot-2",
+    "@instructure/ui-position": "9.2.1-snapshot-2",
+    "@instructure/ui-prop-types": "9.2.1-snapshot-2",
+    "@instructure/ui-react-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-testable": "9.2.1-snapshot-2",
+    "@instructure/ui-tooltip": "9.2.1-snapshot-2",
+    "@instructure/ui-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-view": "9.2.1-snapshot-2",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },

package/src/BaseButton/__new-tests__/BaseButton.test.tsx

@@ -24,6 +24,8 @@
 
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+import type { MockInstance } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
@@ -31,15 +33,22 @@ import { BaseButton } from '../index'
 import { runAxeCheck } from '@instructure/ui-axe-check'
 
 describe('<BaseButton/>', () => {
-  let consoleWarningMock: jest.SpyInstance
+  let consoleWarningMock: ReturnType<typeof vi.spyOn>
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
 
   beforeEach(() => {
-    // Mocking console to prevent test output pollution
-    consoleWarningMock = jest.spyOn(console, 'warn').mockImplementation()
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {}) as MockInstance
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as MockInstance
   })
 
   afterEach(() => {
     consoleWarningMock.mockRestore()
+    consoleErrorMock.mockRestore()
   })
 
   it('should render a button and the children as button text', () => {
@@ -88,7 +97,7 @@ describe('<BaseButton/>', () => {
   })
 
   it('should set role="button"', () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
 
     const { container } = render(
       <BaseButton as="span" onClick={onClick}>
@@ -103,7 +112,7 @@ describe('<BaseButton/>', () => {
   })
 
   it('should set tabIndex="0"', () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
 
     render(
       <BaseButton as="span" onClick={onClick}>
@@ -118,7 +127,7 @@ describe('<BaseButton/>', () => {
   })
 
   it('should pass down the type prop to the button element', async () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
     render(
       <BaseButton type="submit" onClick={onClick}>
         Hello World
@@ -155,7 +164,7 @@ describe('<BaseButton/>', () => {
   })
 
   it('should provide an  elementRef prop', async () => {
-    const elementRef = jest.fn()
+    const elementRef = vi.fn()
     render(<BaseButton elementRef={elementRef}>Hello World</BaseButton>)
 
     const button = screen.getByRole('button', { name: 'Hello World' })
@@ -165,7 +174,7 @@ describe('<BaseButton/>', () => {
 
   describe('onClick', () => {
     it('should call onClick when clicked', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
       render(<BaseButton onClick={onClick}>Hello World</BaseButton>)
 
       const button = screen.getByRole('button', { name: 'Hello World' })
@@ -178,7 +187,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should not call onClick when interaction is "disabled"', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <BaseButton interaction="disabled" onClick={onClick}>
@@ -195,7 +204,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should not call onClick when disabled is set"', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <BaseButton disabled onClick={onClick}>
@@ -212,7 +221,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should not call onClick when interaction is "readonly"', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <BaseButton interaction="readonly" onClick={onClick}>
@@ -229,7 +238,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should not call onClick when readOnly is set', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <BaseButton readOnly onClick={onClick}>
@@ -246,7 +255,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should not call onClick when button is disabled and an href prop is provided', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(<BaseButton href="#">Hello World</BaseButton>)
 
@@ -260,7 +269,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should not call onClick when interaction is "readonly" and an href prop is provided', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <BaseButton interaction="readonly" onClick={onClick} href="#">
@@ -278,7 +287,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should call onClick when space key is pressed if href is provided', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <BaseButton onClick={onClick} href="#">
@@ -296,7 +305,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should call onClick when enter key is pressed when not a button or link', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <BaseButton as="span" onClick={onClick}>
@@ -314,7 +323,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should not call onClick when interaction is "disabled" and space key is pressed', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <BaseButton interaction="disabled" onClick={onClick} href="#">
@@ -332,7 +341,7 @@ describe('<BaseButton/>', () => {
     })
 
     it('should not call onClick when interaction is "readonly" and space key is pressed', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <BaseButton interaction="readonly" onClick={onClick} href="#">
@@ -371,7 +380,7 @@ describe('<BaseButton/>', () => {
 
   describe('for a11y', () => {
     it('should meet standards when onClick is given', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(<BaseButton onClick={onClick}>Hello World</BaseButton>)
 

package/src/Button/__new-tests__/Button.test.tsx

@@ -24,6 +24,7 @@
 
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
@@ -32,7 +33,8 @@ import { BaseButton } from '../../BaseButton'
 import { Button } from '../index'
 
 describe('<Button/>', () => {
-  let consoleWarningMock: jest.SpyInstance
+  let consoleWarningMock: ReturnType<typeof vi.spyOn>
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
   const iconSelector = 'svg[data-title="myIcon"]'
 
   const icon = (
@@ -48,11 +50,17 @@ describe('<Button/>', () => {
 
   beforeEach(() => {
     // Mocking console to prevent test output pollution
-    consoleWarningMock = jest.spyOn(console, 'warn').mockImplementation()
+    consoleWarningMock = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {}) as any
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as any
   })
 
   afterEach(() => {
     consoleWarningMock.mockRestore()
+    consoleErrorMock.mockRestore()
   })
 
   it('should render children', () => {
@@ -125,7 +133,7 @@ describe('<Button/>', () => {
   })
 
   it('should pass the `elementRef` prop', () => {
-    const elementRef = jest.fn()
+    const elementRef = vi.fn()
     render(<Button elementRef={elementRef}>Hello</Button>)
 
     const button = screen.getByRole('button', { name: 'Hello' })
@@ -195,7 +203,7 @@ describe('<Button/>', () => {
   })
 
   it('should pass the `onClick` prop', async () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
     render(<Button onClick={onClick}>Hello</Button>)
 
     const button = screen.getByRole('button', { name: 'Hello' })
@@ -263,7 +271,7 @@ describe('<Button/>', () => {
   })
 
   it('should set role="button"', () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
     const { container } = render(
       <Button as="span" onClick={onClick}>
         Hello World
@@ -276,7 +284,7 @@ describe('<Button/>', () => {
   })
 
   it('should set tabIndex="0"', () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
     render(
       <Button as="span" onClick={onClick}>
         Hello World
@@ -289,7 +297,7 @@ describe('<Button/>', () => {
   })
 
   it('should pass down the type prop to the button element', () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
     render(
       <Button type="submit" onClick={onClick}>
         Hello World
@@ -302,7 +310,7 @@ describe('<Button/>', () => {
   })
 
   it('focuses with the focus helper', () => {
-    const onFocus = jest.fn()
+    const onFocus = vi.fn()
     render(<Button onFocus={onFocus}>Hello World</Button>)
 
     const button = screen.getByRole('button')
@@ -315,7 +323,7 @@ describe('<Button/>', () => {
 
   describe('onClick', () => {
     it('should call onClick when clicked', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
       render(<Button onClick={onClick}>Hello World</Button>)
 
       const button = screen.getByRole('button', { name: 'Hello World' })
@@ -328,7 +336,7 @@ describe('<Button/>', () => {
     })
 
     it('should not call onClick when button is disabled', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <Button disabled onClick={onClick}>
@@ -345,7 +353,7 @@ describe('<Button/>', () => {
     })
 
     it('should not call onClick when button is readOnly', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <Button readOnly onClick={onClick}>
@@ -362,7 +370,7 @@ describe('<Button/>', () => {
     })
 
     it('should not call onClick when button is disabled and an href prop is provided', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(<Button href="#">Hello World</Button>)
 
@@ -376,7 +384,7 @@ describe('<Button/>', () => {
     })
 
     it('should not call onClick when button is readOnly and an href prop is provided', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <Button readOnly onClick={onClick} href="#">
@@ -393,7 +401,7 @@ describe('<Button/>', () => {
     })
 
     it('should call onClick when space key is pressed if href is provided', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <Button onClick={onClick} href="#">
@@ -410,7 +418,7 @@ describe('<Button/>', () => {
     })
 
     it('should call onClick when enter key is pressed when not a button or link', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <Button as="span" onClick={onClick}>
@@ -427,7 +435,7 @@ describe('<Button/>', () => {
     })
 
     it('should not call onClick when button is disabled and space key is pressed', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <Button disabled onClick={onClick} href="#">
@@ -444,7 +452,7 @@ describe('<Button/>', () => {
     })
 
     it('should not call onClick when button is readOnly and space key is pressed', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <Button readOnly onClick={onClick} href="#">
@@ -463,7 +471,7 @@ describe('<Button/>', () => {
 
   describe('for a11y', () => {
     it('should meet standards when onClick is given', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
       render(<Button onClick={onClick}>Hello World</Button>)
 
       const button = screen.getByRole('button', { name: 'Hello World' })