@simplybusiness/mobius 8.0.1 → 9.0.0

package/src/components/DateField/DateField.test.tsx

@@ -147,7 +147,7 @@ describe("DateField", () => {
 
   describe("DateField validation on blur", () => {
     it("calls onBlur handler with correct event on blur", async () => {
-      const handleChange = jest.fn();
+      const handleChange = vi.fn();
 
       render(
         <DateField

package/src/components/Divider/Divider.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { DividerProps } from "./Divider";
 import { Divider } from "./Divider";

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import type { DrawerProps } from ".";
 import { Drawer } from ".";

package/src/components/Drawer/Drawer.test.tsx

@@ -2,10 +2,10 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useState } from "react";
 import { Drawer } from ".";
-import { jestHTMLDialogPolyfill } from "../../utils/jestHTMLDialogPolyfill";
-import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
+import { htmlDialogPolyfill } from "../../utils/htmlDialogPolyfill";
+import { mockMatchMedia } from "../../utils/mockMatchMedia";
 
-jestHTMLDialogPolyfill();
+htmlDialogPolyfill();
 
 const DRAWER_CLASS_NAME = "mobius-drawer";
 const DRAWER_CLOSE_CLASS_NAME = "mobius-drawer__close";
@@ -13,11 +13,11 @@ const DRAWER_TEST_CLASS_NAME = "my-test-class-name";
 
 describe("Drawer", () => {
   beforeEach(() => {
-    jestMockMatchMedia(true);
+    mockMatchMedia(true);
   });
 
   afterAll(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
   });
 
   it("should render without errors", () => {
@@ -158,7 +158,7 @@ describe("Drawer", () => {
   });
 
   it("should fire onOpen callback if supplied", async () => {
-    const onOpen = jest.fn();
+    const onOpen = vi.fn();
 
     const App = () => {
       const [isOpen, setIsOpen] = useState<boolean>(false);

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,5 +1,5 @@
 import { chevronDown } from "@simplybusiness/icons";
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import classNames from "classnames/dedupe";
 import type { Ref } from "react";
 import type { DropdownMenuProps } from ".";
@@ -7,6 +7,8 @@ import { DropdownMenu } from ".";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Icon } from "../Icon";
+// eslint-disable-next-line no-restricted-imports -- story-only styles
+import "./DropdownMenu.story.styles.css";
 
 type StoryType = StoryObj<typeof DropdownMenu>;
 
@@ -15,15 +17,11 @@ const meta: Meta<typeof DropdownMenu> = {
   component: DropdownMenu,
   argTypes: excludeControls("trigger", "style"),
   decorators: [
-    Story => {
-      require("./DropdownMenu.story.styles.css");
-
-      return (
-        <StoryContainer>
-          <Story />
-        </StoryContainer>
-      );
-    },
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
   ],
 };
 

package/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -67,7 +67,7 @@ describe("DropdownMenu", () => {
   });
 
   it("should use the onClick handler on menu item", () => {
-    const customHandler = jest.fn();
+    const customHandler = vi.fn();
 
     render(
       <DropdownMenu>

package/src/components/ErrorMessage/ErrorMessage.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { ErrorMessageProps } from ".";
 import { ErrorMessage } from ".";
 

package/src/components/ExpandableText/ExpandableText.test.tsx

@@ -5,27 +5,27 @@ import { ExpandableText } from "./ExpandableText";
 // Mock window.matchMedia for usePrefersReducedMotion
 Object.defineProperty(window, "matchMedia", {
   writable: true,
-  value: jest.fn().mockImplementation(query => ({
+  value: vi.fn().mockImplementation(query => ({
     matches: false,
     media: query,
     onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
   })),
 });
 
 // Mock useBreakpoint hook
 const mockBreakpoint = {
-  down: jest.fn(),
-  up: jest.fn(),
-  only: jest.fn(),
-  between: jest.fn(),
+  down: vi.fn(),
+  up: vi.fn(),
+  only: vi.fn(),
+  between: vi.fn(),
 };
 
-jest.mock("../../hooks/useBreakpoint", () => ({
+vi.mock("../../hooks/useBreakpoint", () => ({
   useBreakpoint: () => mockBreakpoint,
 }));
 
@@ -35,7 +35,7 @@ describe("ExpandableText", () => {
   const shortText = "Short text.";
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     mockBreakpoint.down.mockReturnValue(true);
 
     // Mock scrollHeight and clientHeight to simulate truncation
@@ -161,7 +161,7 @@ describe("ExpandableText", () => {
 
   it("calls onToggle callback when state changes", async () => {
     const user = userEvent.setup();
-    const onToggle = jest.fn();
+    const onToggle = vi.fn();
     render(<ExpandableText text={longText} onToggle={onToggle} />);
 
     const readMoreButton = await screen.findByRole("button");
@@ -217,7 +217,7 @@ describe("ExpandableText", () => {
 
   it("prevents event propagation on accordion click", async () => {
     const user = userEvent.setup();
-    const containerClickHandler = jest.fn();
+    const containerClickHandler = vi.fn();
 
     render(
       <div onClick={containerClickHandler}>

package/src/components/Fieldset/Fieldset.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { TextField } from "../TextField";

package/src/components/Flex/Flex.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { CSSProperties, ReactNode } from "react";
 import { Flex } from "./Flex";
 import { Box } from "../Box";

package/src/components/Grid/Grid.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { ReactNode } from "react";
 import type { GridItemProps, GridProps } from ".";
 import { Grid } from ".";
@@ -6,6 +6,8 @@ import { Box } from "../Box";
 import { Flex } from "../Flex";
 import type { GridItem } from "./Item";
 import { sizeOptions } from "../../utils";
+// eslint-disable-next-line no-restricted-imports -- story-only styles
+import "./Grid.story.styles.css";
 
 type StoryType = StoryObj<typeof Grid>;
 
@@ -68,12 +70,7 @@ const meta: Meta<typeof Grid> = {
       options: ["", "start", "end", "center", "stretch"],
     },
   },
-  decorators: [
-    Story => {
-      require("./Grid.story.styles.css");
-      return <Story />;
-    },
-  ],
+  decorators: [Story => <Story />],
 };
 
 type SharedProps = {

package/src/components/Icon/Icon.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import * as baseIcons from "@simplybusiness/icons";
 import "@simplybusiness/icons/iconfont";
 import { Icon } from "./Icon";

package/src/components/Image/Image.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { ImageProps } from "./Image";
 import { Image } from "./Image";
 import testImg from "./test-image.png";

package/src/components/Label/Label.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { LabelProps } from "./Label";
 import { Label } from "./Label";
 

package/src/components/Link/Link.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { LinkProps } from "./Link";
 import { Link } from "./Link";
 import { excludeControls } from "../../utils";

package/src/components/Link/Link.test.tsx

@@ -10,7 +10,7 @@ describe("Test for Link", () => {
   });
 
   it("should call the onClick", async () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     render(
       <Link href="#test" onClick={onClick}>
         Click

package/src/components/LinkButton/LinkButton.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { LinkButtonProps } from "./LinkButton";
 import { LinkButton } from "./LinkButton";
 import { excludeControls } from "../../utils";

package/src/components/LinkButton/LinkButton.test.tsx

@@ -48,7 +48,7 @@ describe("Test for LinkButton", () => {
   });
 
   it("should call onClick callback if supplied", async () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     render(
       <LinkButton href="#" onClick={onClick}>
         Link
@@ -59,7 +59,7 @@ describe("Test for LinkButton", () => {
   });
 
   it("throws when href is empty", () => {
-    const spy = jest.spyOn(console, "error");
+    const spy = vi.spyOn(console, "error");
     spy.mockImplementation(() => {});
 
     render(

package/src/components/List/List.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { cross, tick } from "@simplybusiness/icons";
 import { Icon, Text } from "../index";
 import type { ListProps } from ".";

package/src/components/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -1,5 +1,5 @@
 import { home, loading, refreshArrow } from "@simplybusiness/icons";
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { LoadingIndicatorProps } from "./LoadingIndicator";
 import { LoadingIndicator } from "./LoadingIndicator";
 

package/src/components/Logo/Logo.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { LogoProps } from "..";
 import { Logo } from "..";
 import { excludeControls } from "../../utils";

package/src/components/Modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import type { ModalProps } from ".";
 import { Modal } from ".";

package/src/components/Modal/Modal.test.tsx

@@ -2,10 +2,10 @@ import { useState } from "react";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Modal } from ".";
-import { jestHTMLDialogPolyfill } from "../../utils/jestHTMLDialogPolyfill";
-import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
+import { htmlDialogPolyfill } from "../../utils/htmlDialogPolyfill";
+import { mockMatchMedia } from "../../utils/mockMatchMedia";
 
-jestHTMLDialogPolyfill();
+htmlDialogPolyfill();
 
 const MODAL_CLASS_NAME = "mobius-modal";
 const MODAL_CLOSE_CLASS_NAME = "mobius-modal__close";
@@ -13,11 +13,11 @@ const MODAL_TEST_CLASS_NAME = "my-test-class-name";
 
 describe("Modal", () => {
   beforeEach(() => {
-    jestMockMatchMedia(true);
+    mockMatchMedia(true);
   });
 
   afterAll(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
   });
 
   it("should render without errors", () => {
@@ -153,7 +153,7 @@ describe("Modal", () => {
     });
 
     it("should fire onOpen callback if supplied", async () => {
-      const onOpen = jest.fn();
+      const onOpen = vi.fn();
 
       const App = () => {
         const [isOpen, setIsOpen] = useState<boolean>(false);

package/src/components/NumberField/NumberField.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { NumberFieldProps } from "./NumberField";

package/src/components/NumberField/NumberField.test.tsx

@@ -120,7 +120,7 @@ describe("NumberField", () => {
     });
 
     it("prevents setting a value < minValue (if set)", () => {
-      const mockChange = jest.fn();
+      const mockChange = vi.fn();
       render(
         <NumberField
           id="test"
@@ -145,7 +145,7 @@ describe("NumberField", () => {
     });
 
     it("prevents setting a value > maxValue (if set)", () => {
-      const mockChange = jest.fn();
+      const mockChange = vi.fn();
       render(
         <NumberField
           id="test"
@@ -170,7 +170,7 @@ describe("NumberField", () => {
     });
 
     it("validates step increments on blur", () => {
-      const mockChange = jest.fn();
+      const mockChange = vi.fn();
       render(
         <NumberField
           id="test"
@@ -193,7 +193,7 @@ describe("NumberField", () => {
     });
 
     it("allows any values during typing (including invalid step increments)", () => {
-      const mockChange = jest.fn();
+      const mockChange = vi.fn();
       render(
         <NumberField
           id="test"
@@ -219,7 +219,7 @@ describe("NumberField", () => {
     });
 
     it("allows typing intermediate values to reach final valid step value", () => {
-      const mockChange = jest.fn();
+      const mockChange = vi.fn();
       render(
         <NumberField
           id="test"

package/src/components/PasswordField/PasswordField.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { PasswordFieldProps } from "./PasswordField";

package/src/components/Popover/Popover.stories.tsx

@@ -1,8 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { circleQuestion } from "@simplybusiness/icons";
 import type { PopoverProps } from "..";
 import { Button, Flex, Popover, Icon } from "..";
 import { excludeControls } from "../../utils";
+// eslint-disable-next-line no-restricted-imports -- story-only styles
+import "./Popover.story.styles.css";
 
 type StoryType = StoryObj<typeof Popover>;
 
@@ -12,13 +14,7 @@ const meta: Meta<typeof Popover> = {
   argTypes: {
     ...excludeControls("trigger", "anchor", "children"),
   },
-  decorators: [
-    Story => {
-      require("./Popover.story.styles.css");
-
-      return <Story />;
-    },
-  ],
+  decorators: [Story => <Story />],
 };
 
 export const Default: StoryType = {

package/src/components/Popover/Popover.test.tsx

@@ -131,8 +131,8 @@ describe("Popover", () => {
     it("calls onOpen when Popover is opened", async () => {
       const sampleText = "Sample Text";
       const triggerText = "Click me";
-      const onOpen = jest.fn();
-      const onClose = jest.fn();
+      const onOpen = vi.fn();
+      const onClose = vi.fn();
 
       render(
         <Popover
@@ -157,8 +157,8 @@ describe("Popover", () => {
     it("calls onClose when Popover is closed", async () => {
       const sampleText = "Sample Text";
       const triggerText = "Click me";
-      const onOpen = jest.fn();
-      const onClose = jest.fn();
+      const onOpen = vi.fn();
+      const onClose = vi.fn();
 
       render(
         <Popover

package/src/components/Popover/Popover.tsx

@@ -13,7 +13,7 @@ import { cross } from "@simplybusiness/icons";
 import classNames from "classnames/dedupe";
 import type { ReactElement, ReactNode, RefAttributes } from "react";
 import { cloneElement, useRef, useState } from "react";
-import { useWindowEvent } from "../../hooks";
+import { useWindowEvent } from "@simplybusiness/mobius-hooks";
 import type { DOMProps } from "../../types";
 import { Button } from "../Button";
 import { Icon } from "../Icon";

package/src/components/Progress/Progress.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { ProgressProps } from "./Progress";

package/src/components/Radio/Radio.stories.tsx

@@ -1,5 +1,5 @@
 import { rocketLaunch, screwdriverWrench, truck } from "@simplybusiness/icons";
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Divider } from "../Divider";

package/src/components/Radio/Radio.test.tsx

@@ -242,7 +242,7 @@ describe("Radio", () => {
   });
 
   it("should call onChange with the selected value when clicked", async () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
     const handleChange = (e: HTMLElementEvent<HTMLInputElement>) => {
       callback(e.target.value);
     };
@@ -271,7 +271,7 @@ describe("Radio", () => {
   });
 
   it("should be selectable via keyboard", async () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
     const redOptionText = "Red";
     const blueOptionText = "Blue";
     const redOptionValue = redOptionText.toLowerCase();
@@ -424,7 +424,7 @@ describe("Radio", () => {
     });
 
     it("sets classes for interaction states", async () => {
-      const callback = jest.fn();
+      const callback = vi.fn();
       render(
         <RadioGroup label="Color" onChange={callback}>
           <Radio value="red">Red</Radio>
@@ -766,7 +766,7 @@ describe("when first child is not an Icon", () => {
 
 describe("controlled vs uncontrolled RadioGroup onChange behavior", () => {
   it("should call onChange exactly once when a radio button is clicked in controlled mode", async () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const redValue = "red";
     const blueValue = "blue";
 
@@ -797,7 +797,7 @@ describe("controlled vs uncontrolled RadioGroup onChange behavior", () => {
   });
 
   it("should call onChange exactly once when a radio button is clicked in uncontrolled mode", async () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const redValue = "red";
     const blueValue = "blue";
 
@@ -876,7 +876,7 @@ describe.skip("focus behavior", () => {
 describe("overflow detection", () => {
   describe("Radio onOverflow callback", () => {
     it("should call onOverflow with vertical overflow when content height exceeds container", () => {
-      const onOverflow = jest.fn();
+      const onOverflow = vi.fn();
 
       const { container, rerender } = render(
         <Radio value="test" label="Test Label" onOverflow={onOverflow} />,
@@ -905,7 +905,7 @@ describe("overflow detection", () => {
     });
 
     it("should call onOverflow with horizontal overflow when content width exceeds container", () => {
-      const onOverflow = jest.fn();
+      const onOverflow = vi.fn();
 
       const { container, rerender } = render(
         <Radio value="test" label="Test Label" onOverflow={onOverflow} />,
@@ -939,7 +939,7 @@ describe("overflow detection", () => {
     });
 
     it("should call onOverflow with both overflow types when content exceeds in both dimensions", () => {
-      const onOverflow = jest.fn();
+      const onOverflow = vi.fn();
 
       const { container, rerender } = render(
         <Radio value="test" label="Test Label" onOverflow={onOverflow} />,
@@ -973,7 +973,7 @@ describe("overflow detection", () => {
     });
 
     it("should not call onOverflow when content fits within container and state has not changed", () => {
-      const onOverflow = jest.fn();
+      const onOverflow = vi.fn();
 
       const { container, rerender } = render(
         <Radio value="test" label="Test Label" onOverflow={onOverflow} />,

package/src/components/SVG/SVG.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { SVGProps } from "./SVG";
 import { SVG } from "./SVG";
 

package/src/components/Segment/Segment.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { SegmentProps } from "./Segment";
 import { Segment } from "./Segment";
 import type { SegmentGroupProps } from "./SegmentGroup";

package/src/components/Select/Select.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Option } from "../Option";
 import type { SelectProps } from "./Select";

package/src/components/Select/Select.test.tsx

@@ -19,7 +19,7 @@ describe("Select", () => {
   });
 
   it("should call onChange when clicked", async () => {
-    const valueCallback = jest.fn();
+    const valueCallback = vi.fn();
     const callback = (e: ChangeEvent<HTMLSelectElement>) =>
       valueCallback(e.target.value);
     const { getByLabelText } = render(

package/src/components/Slider/Slider.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { SliderProps } from "./Slider";

package/src/components/Slider/Slider.test.tsx

@@ -55,8 +55,8 @@ describe("Slider", () => {
    */
   describe("events", () => {
     it("should call events on input change", async () => {
-      const onChange = jest.fn();
-      const onChangeEnd = jest.fn();
+      const onChange = vi.fn();
+      const onChangeEnd = vi.fn();
 
       const { container } = render(
         <Slider
@@ -82,8 +82,8 @@ describe("Slider", () => {
     });
 
     it("should not call onChange when value is already min", async () => {
-      const onChange = jest.fn();
-      const onChangeEnd = jest.fn();
+      const onChange = vi.fn();
+      const onChangeEnd = vi.fn();
 
       const { container } = render(
         <Slider
@@ -105,8 +105,8 @@ describe("Slider", () => {
     });
 
     it("should not call onChange when value is already max", async () => {
-      const onChange = jest.fn();
-      const onChangeEnd = jest.fn();
+      const onChange = vi.fn();
+      const onChangeEnd = vi.fn();
 
       const { container } = render(
         <Slider