@kaizen/components 1.61.0 → 1.61.2

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx

@@ -3,14 +3,16 @@
 import React from "react"
 import { useOption } from "@react-aria/listbox"
 import { render, screen } from "@testing-library/react"
+import { vi, beforeEach, Mock } from "vitest"
 import { ItemType } from "../../types"
 import { MultiSelectOption, MultiSelectOptionProps } from "./MultiSelectOption"
+import styles from "./MultiSelectOption.module.scss"
 
-jest.mock("@react-aria/listbox", () => ({
-  useOption: jest.fn(),
+vi.mock("@react-aria/listbox", () => ({
+  useOption: vi.fn(),
 }))
 
-jest.mock("../../context", () => ({
+vi.mock("../../context", () => ({
   useSelectionContext: (): { selectionState: Record<string, unknown> } => ({
     selectionState: {},
   }),
@@ -36,7 +38,7 @@ const MultiSelectOptionWrapper = ({
 describe("<MultiSelectOptionWrapper /> - Visual content", () => {
   describe("Given item is unselected", () => {
     beforeEach(() => {
-      ;(useOption as jest.Mock).mockReturnValue({
+      ;(useOption as Mock).mockReturnValue({
         optionProps: {},
         isSelected: false,
         isDisabled: false,
@@ -56,7 +58,7 @@ describe("<MultiSelectOptionWrapper /> - Visual content", () => {
 
   describe("Given item is disabled", () => {
     beforeEach(() => {
-      ;(useOption as jest.Mock).mockReturnValue({
+      ;(useOption as Mock).mockReturnValue({
         optionProps: {},
         isSelected: false,
         isDisabled: true,
@@ -66,13 +68,13 @@ describe("<MultiSelectOptionWrapper /> - Visual content", () => {
 
     it("has a disabled class", () => {
       const label = screen.getByLabelText("label-mock")
-      expect(label).toHaveClass("isDisabled")
+      expect(label).toHaveClass(styles.isDisabled)
     })
   })
 
   describe("Given count is provided", () => {
     beforeEach(() => {
-      ;(useOption as jest.Mock).mockReturnValue({
+      ;(useOption as Mock).mockReturnValue({
         optionProps: {},
         isSelected: false,
         isDisabled: false,

package/src/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.spec.tsx

@@ -1,14 +1,14 @@
 import React from "react"
-import { screen, waitFor } from "@testing-library/react"
+import { screen, waitFor, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi, Mock } from "vitest"
 import { useSelectionContext } from "../../context"
 import { SearchInput } from "."
 
 const user = userEvent.setup()
 
-jest.mock("../../context", () => ({
-  useSelectionContext: jest.fn(),
+vi.mock("../../context", () => ({
+  useSelectionContext: vi.fn(),
 }))
 
 const SearchInputWrapper = (): JSX.Element => <SearchInput label="label-mock" />
@@ -16,10 +16,10 @@ const SearchInputWrapper = (): JSX.Element => <SearchInput label="label-mock" />
 describe("<SearchInput /> - interaction", () => {
   describe("Given searchQuery is provided", () => {
     it("shows searchQuery as value", async () => {
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         searchQuery: "search-query-mock",
       })
-      renderWithIntl(<SearchInputWrapper />)
+      render(<SearchInputWrapper />)
       await waitFor(() => {
         expect(screen.getByRole("searchbox")).toHaveValue("search-query-mock")
       })
@@ -27,12 +27,12 @@ describe("<SearchInput /> - interaction", () => {
   })
 
   it("triggers setSearchQuery with input value when user types the input", async () => {
-    const spy = jest.fn()
-    ;(useSelectionContext as jest.Mock).mockReturnValue({
+    const spy = vi.fn()
+    ;(useSelectionContext as Mock).mockReturnValue({
       setSearchQuery: spy,
     })
 
-    renderWithIntl(<SearchInputWrapper />)
+    render(<SearchInputWrapper />)
     const search = screen.getByRole("searchbox")
     await user.type(search, "want to search this text")
 
@@ -40,13 +40,13 @@ describe("<SearchInput /> - interaction", () => {
   })
 
   it("triggers setSearchQuery with input value when clear the input", async () => {
-    const spy = jest.fn()
-    ;(useSelectionContext as jest.Mock).mockReturnValue({
+    const spy = vi.fn()
+    ;(useSelectionContext as Mock).mockReturnValue({
       searchQuery: "search-query-mock",
       setSearchQuery: spy,
     })
 
-    renderWithIntl(<SearchInputWrapper />)
+    render(<SearchInputWrapper />)
     const clearButton = screen.getByRole("button")
     await user.click(clearButton)
 

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.spec.tsx

@@ -1,24 +1,24 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { Mock, vi } from "vitest"
 import { useSelectionContext } from "../../../context"
 import { ClearButton } from "."
-
 const user = userEvent.setup()
 
-jest.mock("../../../context", () => ({
-  useSelectionContext: jest.fn(),
+vi.mock("../../../context", () => ({
+  useSelectionContext: vi.fn(),
 }))
 
 describe("<ClearButton /> - interaction", () => {
   describe("Given selection is not empty", () => {
     it("triggers selectionManager.selSelectedKeys() with focused keys filtered out when button is clicked", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const selectedAndFocused = "selectedAndFocused"
       const selectedButNotFocused = "selectedButNotFocused"
       const selectedKeys: string[] = [selectedAndFocused, selectedButNotFocused]
       const filteredKeys: string[] = [selectedAndFocused]
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           collection: {
             getKeys: () => filteredKeys,
@@ -43,10 +43,10 @@ describe("<ClearButton /> - interaction", () => {
 
   describe("Given selection is empty", () => {
     it("does not trigger selectionManager.setSelectedKeys() when clicks on the button", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const filteredKeys: string[] = []
       const selectedKeys: string[] = []
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           collection: {
             getKeys: () => filteredKeys,

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.spec.tsx

@@ -1,26 +1,26 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { Mock, vi } from "vitest"
 import { useSelectionContext } from "../../../context"
 import { SelectAllButton } from "."
-
 const user = userEvent.setup()
 
-jest.mock("../../../context", () => ({
-  useSelectionContext: jest.fn(),
+vi.mock("../../../context", () => ({
+  useSelectionContext: vi.fn(),
 }))
 
 describe("<SelectAllButton /> - interaction", () => {
   describe("Given not all options are selected", () => {
     it("triggers selectionManager.setSelectedKeys() with currently selected and filtered options when button is clicked", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const selectedAndFiltered = "selectedAndFiltered"
       const filteredButNotSelected = "focusedButNotSelected"
       const selectedButNotFiltered = "selectedButNotFiltered"
       const selectedKeys = [selectedAndFiltered, selectedButNotFiltered]
       const filteredKeys = [selectedAndFiltered, filteredButNotSelected]
 
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           collection: {
             getKeys: () => filteredKeys,
@@ -45,12 +45,12 @@ describe("<SelectAllButton /> - interaction", () => {
 
   describe("Given all filtered options are selected", () => {
     it("does not trigger selectionManager.setSelectedKeys() when clicks on the button", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const selectedAndFiltered1 = "selectedAndFiltered1"
       const selectedAndFiltered2 = "selectedAndFocused2"
       const selectedKeys = [selectedAndFiltered1, selectedAndFiltered2]
       const filteredKeys = [selectedAndFiltered1, selectedAndFiltered2]
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           collection: {
             getKeys: () => filteredKeys,
@@ -74,7 +74,7 @@ describe("<SelectAllButton /> - interaction", () => {
 
   describe("Given some options are disabled", () => {
     it("triggers selectionManager.setSelectedKeys() on non-disabled options", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const filtered = "filtered"
       const filteredAndSelected = "filteredAndSelected"
       const filteredAndDisabled = "filteredAndDisabled"
@@ -82,7 +82,7 @@ describe("<SelectAllButton /> - interaction", () => {
       const filteredKeys = [filtered, filteredAndSelected, filteredAndDisabled]
       const disabledKeys = [filteredAndDisabled]
 
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           disabledKeys,
           collection: {

package/src/Filter/FilterSelect/FilterSelect.spec.tsx

@@ -180,7 +180,7 @@ const defaultProps: FilterSelectProps = {
   items: singleMockItems,
 }
 
-/* eslint-disable jest/expect-expect */
+/* eslint-disable vitest/expect-expect */
 describe("FilterSelect generic", () => {
   it("should prevent adding `options` attribute to option", () => {
     /* @ts-expect-error */
@@ -213,4 +213,4 @@ describe("FilterSelect generic", () => {
     })
   })
 })
-/* eslint-enable jest/expect-expect */
+/* eslint-enable vitest/expect-expect */

package/src/Heading/Heading.spec.tsx

@@ -1,37 +1,8 @@
 import * as React from "react"
 import { render } from "@testing-library/react"
-import { AllowedHeadingTags, Heading, HeadingVariants } from "./"
+import { AllowedHeadingTags, Heading, HeadingVariants } from "."
 
 describe("<Heading />", () => {
-  it("renders the correct classes", () => {
-    const headingMock = render(<Heading variant="display-0">Example</Heading>)
-    const headingClasslist = headingMock.getByText("Example").classList
-    expect(headingClasslist).toContain("heading")
-    expect(headingClasslist).toContain("display-0")
-    expect(headingClasslist).toContain("large")
-  })
-
-  it("adds a .small class instead of .large if a Heading 3 is used", () => {
-    const headingMock = render(
-      <Heading variant="heading-3" tag="div">
-        Example
-      </Heading>
-    )
-    expect(headingMock.getByText("Example").classList).toContain("small")
-    expect(headingMock.getByText("Example").classList).not.toContain("large")
-  })
-
-  it("adds a .dark-reduced-opacity class if the color prop is set to that", () => {
-    const headingMock = render(
-      <Heading variant="heading-3" color="dark-reduced-opacity">
-        Example
-      </Heading>
-    )
-    expect(headingMock.getByText("Example").classList).toContain(
-      "dark-reduced-opacity"
-    )
-  })
-
   it("changes rendered HTML element when passed tag", () => {
     const headingMock = render(
       <Heading variant="display-0" tag="div">
@@ -66,7 +37,6 @@ describe("<Heading />", () => {
       it(`renders the correct element for <Heading variant={${variant}} />`, () => {
         const headingMock = render(<Heading variant={variant}>Example</Heading>)
         expect(headingMock.getByText("Example").tagName.toLowerCase()).toBe(el)
-        expect(headingMock.baseElement).toMatchSnapshot()
       })
     })
   })

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.spec.tsx

@@ -1,15 +1,15 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { VideoPlayer } from "./VideoPlayer"
 
 const matchMedia = {
   media: "",
   onchange: null,
-  addListener: jest.fn(),
-  removeListener: jest.fn(),
-  addEventListener: jest.fn(),
-  removeEventListener: jest.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
 }
 const mockPrefersReducedMotion = {
   matches: true,
@@ -19,35 +19,36 @@ const mockDoesNotPreferReducedMotion = {
   matches: false,
   ...matchMedia,
 }
-const mockPlay = jest.fn().mockResolvedValue(undefined)
-const mockLoad = jest.fn()
-const mockPause = jest.fn()
+const mockPlay = vi.fn().mockResolvedValue(undefined)
+const mockLoad = vi.fn()
+const mockPause = vi.fn()
 
 describe("<VideoPlayer />", () => {
   beforeEach(() => {
     window.HTMLMediaElement.prototype.load = mockLoad
     window.HTMLMediaElement.prototype.play = mockPlay
     window.HTMLMediaElement.prototype.pause = mockPause
-    window.matchMedia = jest
+    window.matchMedia = vi
       .fn()
       .mockImplementation(() => mockDoesNotPreferReducedMotion)
     // this will stop throwing the unstable_flushDiscreteUpdates console error cause by react bug
     // https://stackoverflow.com/a/65338472/18285270
     Object.defineProperty(HTMLMediaElement.prototype, "muted", {
-      set: jest.fn(),
+      set: vi.fn(),
     })
   })
 
   afterEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
-  it("renders a video player in the document and autoplay", async () => {
+  it("renders a video player in the document and autoplay", () => {
     render(
       <VideoPlayer
         autoplay
         fallback="illustrations/heart/spot/moods-cautionary.svg"
         source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
       />
     )
     const videoPlayer = screen.getByTestId("kz-video-player")
@@ -55,92 +56,37 @@ describe("<VideoPlayer />", () => {
     expect(mockPlay).toHaveBeenCalled()
   })
 
-  describe("use-reduced-motion", () => {
-    it("respects the use-reduced-motion preferences of the user", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockPrefersReducedMotion)
-      render(
-        <VideoPlayer
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      const videoPlayer = screen.getByTestId("kz-video-player")
-      expect(videoPlayer).not.toHaveAttribute("autoplay")
-      expect(mockPause).toHaveBeenCalled()
-    })
-
-    it("defaults to autoplay when user does not set use-reduced-motion preferences", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockDoesNotPreferReducedMotion)
-      render(
-        <VideoPlayer
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      const videoPlayer = screen.getByTestId("kz-video-player")
-      expect(videoPlayer).toHaveAttribute("autoplay")
-      expect(mockPlay).toHaveBeenCalled()
-    })
-  })
-
-  describe("when the aspect ratio is set as a prop", () => {
-    it("has aspect ratio class", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockDoesNotPreferReducedMotion)
-      const { container } = render(
-        <VideoPlayer
-          aspectRatio="landscape"
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      expect(container.querySelector(".aspectRatioWrapper")).toBeTruthy()
-      expect(container.querySelector(".landscape")).toBeTruthy()
-    })
-  })
-
-  describe("when the aspect ratio is not set as a prop", () => {
-    it("does not have aspect ratio class", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockDoesNotPreferReducedMotion)
-      const { container } = render(
-        <VideoPlayer
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      expect(container.querySelector(".aspectRatioWrapper")).toBeFalsy()
-      expect(container.querySelector(".landscape")).toBeFalsy()
-    })
+  it("respects the use-reduced-motion preferences of the user", () => {
+    window.matchMedia = vi
+      .fn()
+      .mockImplementation(() => mockPrefersReducedMotion)
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).not.toHaveAttribute("autoplay")
+    expect(mockPause).toHaveBeenCalled()
   })
 
-  describe("Pausing/Playing animations", () => {
-    it("restarts the animation when pause button is clicked", () => {
-      const { container, getByRole } = render(
-        <VideoPlayer
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-
-      const videoElement = container.querySelector("video")!
-
-      expect(videoElement.paused).toEqual(true)
-
-      const button = getByRole("button")
-      userEvent.click(button)
-
-      expect(mockPlay).toHaveBeenCalled()
-    })
+  it("defaults to autoplay when user does not set use-reduced-motion preferences", () => {
+    window.matchMedia = vi
+      .fn()
+      .mockImplementation(() => mockDoesNotPreferReducedMotion)
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).toHaveAttribute("autoplay")
+    expect(mockPlay).toHaveBeenCalled()
   })
 })

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stickersheet.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { VideoPlayer } from "./index"
+
+export default {
+  title: "Components/Illustrations/VideoPlayer",
+  parameters: {
+    controls: { disable: true },
+    chromatic: { disable: false },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <StickerSheet isReversed={isReversed} title="Aspect Ratio">
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="default">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="landscape">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              aspectRatio="landscape"
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="portrait">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              aspectRatio="portrait"
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="square">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              aspectRatio="square"
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { userEvent, within, expect, waitFor } from "@storybook/test"
+import { VideoPlayer } from "./index"
+
+const meta = {
+  title: "Components/Illustrations/VideoPlayer",
+  component: VideoPlayer,
+  args: {
+    autoplay: false,
+    fallback: "illustrations/heart/scene/brand-moments-positive-outro",
+    source: "illustrations/heart/scene/brand-moments-positive-outro",
+  },
+} satisfies Meta<typeof VideoPlayer>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const PausePlay: Story = {
+  render: args => <VideoPlayer {...args} />,
+  name: "VideoPlayer: Pause/Play",
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const element = canvas.getByRole("button")
+
+    waitFor(() => {
+      userEvent.click(element)
+      expect(element).toHaveAttribute("aria-label", "Pause animation")
+    })
+
+    waitFor(() => {
+      userEvent.click(element)
+      expect(element).toHaveAttribute("aria-label", "Play animation")
+    })
+  },
+}

package/src/Input/InputRange/InputRange.spec.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { vi } from "vitest"
 import { InputRange } from "./index"
-
 describe("<InputRange />", () => {
   it("fires onChange after interaction", async () => {
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <InputRange
         id="unique-3"

package/src/Input/InputSearch/InputSearch.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { InputSearchProps } from "./InputSearch"
 import { InputSearch } from "."
 
@@ -10,7 +10,7 @@ const user = userEvent.setup()
 const defaultInputProps = {
   id: "someInputId",
   value: "somevalue",
-  onChange: jest.fn(),
+  onChange: vi.fn(),
 }
 
 const renderInput = (
@@ -18,9 +18,7 @@ const renderInput = (
 ): ReturnType<typeof render> => {
   const mergedInputProps = { ...defaultInputProps, ...props }
 
-  return renderWithIntl(
-    <InputSearch {...mergedInputProps} data-testid="someInputId" />
-  )
+  return render(<InputSearch {...mergedInputProps} data-testid="someInputId" />)
 }
 
 describe("<InputSearch />", () => {

package/src/KaizenProvider/KaizenProvider.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render } from "@testing-library/react"
+import { vi } from "vitest"
 import { KaizenProvider, KaizenProviderProps } from "./KaizenProvider"
-
 const KaizenProviderWrapper = ({
   children,
   ...restProps
@@ -9,7 +9,7 @@ const KaizenProviderWrapper = ({
   <KaizenProvider {...restProps}>{children}</KaizenProvider>
 )
 
-jest.mock("./subcomponents/OptionalIntlProvider", () => ({
+vi.mock("./subcomponents/OptionalIntlProvider", () => ({
   OptionalIntlProvider: ({ children }: { children: React.ReactElement }) => (
     <div>{children}</div>
   ),

package/src/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.spec.tsx

@@ -1,9 +1,10 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
 import { IntlProvider } from "react-intl"
+import { vi } from "vitest"
 import { OptionalIntlProvider } from "."
 
-jest.mock("@cultureamp/i18n-react-intl", () => ({
+vi.mock("@cultureamp/i18n-react-intl", () => ({
   StaticIntlProvider: ({ children }: { children: React.ReactElement }) => (
     <div data-testid="mockedIntlProvider">{children}</div>
   ),
@@ -35,5 +36,3 @@ describe("<OptionalIntlProvider>", () => {
     expect(childrenResult).toBeInTheDocument()
   })
 })
-
-/* eslint-enable jest/expect-expect */