@kaizen/components 1.61.1 → 1.61.3

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
-import { screen, waitFor, within } from "@testing-library/react"
+import { screen, waitFor, within, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { DateRange } from "~components/Calendar"
 import { FilterDateRangePickerField, FilterDateRangePickerFieldProps } from "."
 
@@ -36,7 +36,7 @@ const waitForI18nContent = async (): Promise<void> => {
 describe("<FilterDateRangePickerField />", () => {
   describe("Inputs", () => {
     it("has empty inputs when a date range is not provided", async () => {
-      renderWithIntl(<FilterDateRangePickerFieldWrapper />)
+      render(<FilterDateRangePickerFieldWrapper />)
       await waitForI18nContent()
 
       const inputStartDate = screen.getByLabelText("Date from")
@@ -46,7 +46,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("pre-fills the inputs when date range is provided", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-01"),
@@ -63,7 +63,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("allows customising the input labels", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-01"),
@@ -84,10 +84,10 @@ describe("<FilterDateRangePickerField />", () => {
 
     describe("onBlur", () => {
       it("updates start date input and calendar values correctly on blur", async () => {
-        const startDateOnBlur = jest.fn()
-        const endDateOnBlur = jest.fn()
+        const startDateOnBlur = vi.fn()
+        const endDateOnBlur = vi.fn()
 
-        renderWithIntl(
+        render(
           <FilterDateRangePickerFieldWrapper
             selectedRange={{
               from: new Date("2022-05-02"),
@@ -126,10 +126,10 @@ describe("<FilterDateRangePickerField />", () => {
       })
 
       it("updates end date input and calendar values correctly on blur", async () => {
-        const startDateOnBlur = jest.fn()
-        const endDateOnBlur = jest.fn()
+        const startDateOnBlur = vi.fn()
+        const endDateOnBlur = vi.fn()
 
-        renderWithIntl(
+        render(
           <FilterDateRangePickerFieldWrapper
             selectedRange={{
               from: new Date("2022-05-01"),
@@ -169,7 +169,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("updates the calendar month to match the new start date input", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-02"),
@@ -200,7 +200,7 @@ describe("<FilterDateRangePickerField />", () => {
 
   describe("Calendar", () => {
     it("shows the default month as the start month when there isn't a selected value", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           defaultMonth={new Date("2022-05-02")}
         />
@@ -211,7 +211,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("shows the selected start date month as the start month when provided", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-01"),
@@ -225,7 +225,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("shows the current month as the start month when selected start date is invalid", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("potato"),
@@ -242,7 +242,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("updates the range start input when changing the start date", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-15"),
@@ -269,7 +269,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("updates the range end input when changing the end date", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-15"),
@@ -296,7 +296,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("clears the inputs when clearing the calendar value", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-15"),
@@ -332,7 +332,7 @@ describe("<FilterDateRangePickerField />", () => {
 
     describe("Custom validation", () => {
       it("shows validation messages passed in from the consumer", async () => {
-        renderWithIntl(
+        render(
           <FilterDateRangePickerFieldWrapper
             onValidate={{
               dateStart: (): void => undefined,
@@ -359,7 +359,7 @@ describe("<FilterDateRangePickerField />", () => {
 
     describe("Inbuilt validation", () => {
       it("shows inbuilt validation messages for start date", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             inputStartDateProps={{ labelText: "Start date" }}
           />
@@ -385,7 +385,7 @@ describe("<FilterDateRangePickerField />", () => {
       })
 
       it("shows inbuilt validation messages for end date", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             inputEndDateProps={{ labelText: "End date" }}
           />
@@ -408,7 +408,7 @@ describe("<FilterDateRangePickerField />", () => {
       })
 
       it("shows inbuilt validation messages for pre-existing values", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             selectedRange={{
               from: new Date("2022-05-15"),
@@ -436,7 +436,7 @@ describe("<FilterDateRangePickerField />", () => {
           'Date to:Cannot be earlier than the selection in "Date from"'
 
         it("shows error on updating end date input to be before start date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -462,7 +462,7 @@ describe("<FilterDateRangePickerField />", () => {
         })
 
         it("removes error on updating start date input to be before end date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -508,7 +508,7 @@ describe("<FilterDateRangePickerField />", () => {
         })
 
         it("displays only one date when the start date input is set to be before the end date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -539,7 +539,7 @@ describe("<FilterDateRangePickerField />", () => {
         })
 
         it("shows error on updating start date input to be after end date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -566,7 +566,7 @@ describe("<FilterDateRangePickerField />", () => {
         })
 
         it("shows error if the pre-existing end date is before start date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -588,7 +588,7 @@ describe("<FilterDateRangePickerField />", () => {
 
     describe("Combined validation", () => {
       it("shows custom start date validation with inbuilt end date validation", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             onValidate={{
               dateStart: (): void => undefined,
@@ -621,7 +621,7 @@ describe("<FilterDateRangePickerField />", () => {
       })
 
       it("shows custom end date validation with inbuilt start date validation", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             onValidate={{
               dateEnd: (): void => undefined,
@@ -656,7 +656,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("re-validates values when selecting a value using the calendar", async () => {
-      const { container } = renderWithIntl(
+      const { container } = render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-10"),
@@ -687,9 +687,9 @@ describe("<FilterDateRangePickerField />", () => {
   })
 
   it("only returns a valid date to the onRangeChange function", async () => {
-    const onRangeChange = jest.fn()
+    const onRangeChange = vi.fn()
 
-    const { getByLabelText } = renderWithIntl(
+    const { getByLabelText } = render(
       <FilterDateRangePickerFieldWrapper
         selectedRange={{
           from: new Date("2022-05-10"),

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.ts

@@ -1,6 +1,5 @@
 import { act } from "react"
-import { waitFor, renderHook } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { waitFor, renderHook, render } from "@testing-library/react"
 import { useEndDateValidation } from "./useEndDateValidation"
 
 describe("useEndDateValidation()", () => {
@@ -25,9 +24,7 @@ describe("useEndDateValidation()", () => {
 
       expect(result.current.validationMessage?.status).toBe("error")
 
-      const { container } = renderWithIntl(
-        result.current.validationMessage?.message
-      )
+      const { container } = render(result.current.validationMessage?.message)
       await waitFor(() => {
         expect(container).toHaveTextContent(
           "End date:potato is an invalid date"
@@ -57,9 +54,7 @@ describe("useEndDateValidation()", () => {
 
       expect(result.current.validationMessage?.status).toBe("error")
 
-      const { container } = renderWithIntl(
-        result.current.validationMessage?.message
-      )
+      const { container } = render(result.current.validationMessage?.message)
       await waitFor(() => {
         expect(container).toHaveTextContent(
           'Cannot be earlier than the selection in "Start date"'

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.ts

@@ -1,6 +1,5 @@
 import { act } from "react"
-import { waitFor, renderHook } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { waitFor, renderHook, render } from "@testing-library/react"
 import { useStartDateValidation } from "./useStartDateValidation"
 
 describe("useStartDateValidation()", () => {
@@ -23,9 +22,7 @@ describe("useStartDateValidation()", () => {
 
       expect(result.current.validationMessage?.status).toBe("error")
 
-      const { container } = renderWithIntl(
-        result.current.validationMessage?.message
-      )
+      const { container } = render(result.current.validationMessage?.message)
       await waitFor(() => {
         expect(container).toHaveTextContent(
           "Start date:potato is an invalid date"

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.spec.ts

@@ -1,5 +1,4 @@
-import { screen, waitFor } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { screen, waitFor, render } from "@testing-library/react"
 import { validateEndDateBeforeStartDate } from "./validateEndDateBeforeStartDate"
 
 describe("validateEndDateBeforeStartDate()", () => {
@@ -99,7 +98,7 @@ describe("validateEndDateBeforeStartDate()", () => {
 
       expect(validationMessage?.status).toBe("error")
 
-      renderWithIntl(validationMessage?.message)
+      render(validationMessage?.message)
       await waitFor(() => {
         expect(
           screen.getByText(

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

@@ -1,8 +1,7 @@
 import React, { useState } from "react"
 import { Selection } from "@react-types/shared"
-import { waitFor } from "@testing-library/react"
+import { waitFor, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
 import { FilterMultiSelect, FilterMultiSelectProps } from "./FilterMultiSelect"
 import { ItemType } from "./types"
 import { getSelectedOptionLabels } from "./utils"
@@ -74,7 +73,7 @@ const FilterMultiSelectWrapper = ({
 
 describe("<FilterMultiSelect>", () => {
   it("opens the popover using the trigger button", async () => {
-    const { getByRole } = renderWithIntl(<FilterMultiSelectWrapper />)
+    const { getByRole } = render(<FilterMultiSelectWrapper />)
 
     const triggerButton = getByRole("button", { name: "Engineer : Front-End" })
     await user.click(triggerButton)
@@ -85,7 +84,7 @@ describe("<FilterMultiSelect>", () => {
   })
 
   it("selects an unselected option on click", async () => {
-    const { getByRole } = renderWithIntl(<FilterMultiSelectWrapper isOpen />)
+    const { getByRole } = render(<FilterMultiSelectWrapper isOpen />)
 
     const devOpsOption = getByRole("option", {
       name: "Dev-ops",
@@ -99,7 +98,7 @@ describe("<FilterMultiSelect>", () => {
   })
 
   it("deselects a selected option on click", async () => {
-    const { getByRole } = renderWithIntl(<FilterMultiSelectWrapper isOpen />)
+    const { getByRole } = render(<FilterMultiSelectWrapper isOpen />)
 
     const devOpsOption = getByRole("option", {
       name: "Front-End",
@@ -113,7 +112,7 @@ describe("<FilterMultiSelect>", () => {
   })
 
   it("filters out options which do not match the search term", async () => {
-    const { getByRole, getAllByRole } = renderWithIntl(
+    const { getByRole, getAllByRole } = render(
       <FilterMultiSelectWrapper isOpen />
     )
     expect(getAllByRole("option")).toHaveLength(5)
@@ -127,7 +126,7 @@ describe("<FilterMultiSelect>", () => {
 
   describe("Clear button", () => {
     it("deselects all options when unfiltered", async () => {
-      const { getByRole, queryAllByRole } = renderWithIntl(
+      const { getByRole, queryAllByRole } = render(
         <FilterMultiSelectWrapper
           isOpen
           selectedKeys={new Set(["id-fe", "id-devops"])}
@@ -143,7 +142,7 @@ describe("<FilterMultiSelect>", () => {
     })
 
     it("deselects only selected filtered options", async () => {
-      const { getByRole, queryAllByRole } = renderWithIntl(
+      const { getByRole, queryAllByRole } = render(
         <FilterMultiSelectWrapper
           isOpen
           selectedKeys={new Set(["id-fe", "id-devops"])}
@@ -172,7 +171,7 @@ describe("<FilterMultiSelect>", () => {
       options.filter(option => option.hasAttribute("aria-disabled"))
 
     it("selects all non-disabled options when unfiltered", async () => {
-      const { getByRole, queryAllByRole } = renderWithIntl(
+      const { getByRole, queryAllByRole } = render(
         <FilterMultiSelectWrapper isOpen selectedKeys={new Set([])} />
       )
 
@@ -187,7 +186,7 @@ describe("<FilterMultiSelect>", () => {
     })
 
     it("selects only non-disabled filtered options", async () => {
-      const { getByRole, queryAllByRole } = renderWithIntl(
+      const { getByRole, queryAllByRole } = render(
         <FilterMultiSelectWrapper isOpen selectedKeys={new Set([])} />
       )
 

package/src/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.spec.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { FilterTriggerButton } from "~components/Filter/FilterMultiSelect/subcomponents/Trigger"
 import { MenuPopup } from "../../subcomponents/MenuPopup"
 import {
@@ -59,7 +60,7 @@ describe("<MenuTriggerProvider /> - Visual content", () => {
     })
 
     it("fires the onOpenChange callback when the trigger is interacted", async () => {
-      const onOpenChange = jest.fn<void, [boolean]>()
+      const onOpenChange = vi.fn()
       render(<MenuTriggerProviderWrapper isOpen onOpenChange={onOpenChange} />)
 
       const trigger = screen.getByRole("button", {

package/src/Filter/FilterMultiSelect/context/SelectionProvider/SelectionProvider.spec.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react"
 import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { Selection } from "@react-types/shared"
-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 } from "vitest"
 import { FilterMultiSelect } from "../../FilterMultiSelect"
 import { ListBox } from "../../subcomponents/ListBox"
 import { SearchInput } from "../../subcomponents/SearchInput"
@@ -104,7 +104,7 @@ describe("<SelectionProvider>", () => {
   describe("<SelectionProviderWrapper /> - Visual content", () => {
     describe("Given no selectedKeys", () => {
       it("shows all the options unselected", async () => {
-        renderWithIntl(<SelectionProviderWrapper />)
+        render(<SelectionProviderWrapper />)
         await waitFor(() => {
           expect(
             screen.getByRole("option", {
@@ -128,7 +128,7 @@ describe("<SelectionProvider>", () => {
       })
 
       it("labels the listbox with the provided label", async () => {
-        renderWithIntl(<SelectionProviderWrapper />)
+        render(<SelectionProviderWrapper />)
         await waitFor(() => {
           const listBox = screen.getByLabelText("selection-label-mock", {
             selector: "ul",
@@ -140,7 +140,7 @@ describe("<SelectionProvider>", () => {
 
     describe("Given selectedKeys is [option-2-value-mock]", () => {
       it("shows only option 2 is selected", async () => {
-        renderWithIntl(
+        render(
           <SelectionProviderWrapper
             selectedKeys={new Set(["option-2-value-mock"])}
           />
@@ -170,7 +170,7 @@ describe("<SelectionProvider>", () => {
 
     describe("Given selectedKeys is 'all'", () => {
       it("shows all options are selected", async () => {
-        renderWithIntl(<SelectionProviderWrapper selectedKeys="all" />)
+        render(<SelectionProviderWrapper selectedKeys="all" />)
         await waitFor(() => {
           expect(
             screen.getByRole("option", {
@@ -197,7 +197,7 @@ describe("<SelectionProvider>", () => {
 
   describe("<SelectionProviderWrapper /> - Mouse interaction", () => {
     it("selects the option when clicks on a non-selected option", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
       const option1 = screen.getByRole("option", {
         name: "option-1-label-mock",
       })
@@ -215,8 +215,8 @@ describe("<SelectionProvider>", () => {
     })
 
     it("fires onSelectionChange when clicks on a option", async () => {
-      const spy = jest.fn()
-      renderWithIntl(<SelectionProviderWrapper onSelectionChange={spy} />)
+      const spy = vi.fn()
+      render(<SelectionProviderWrapper onSelectionChange={spy} />)
       const option1 = screen.getByRole("option", {
         name: "option-1-label-mock",
       })
@@ -229,7 +229,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("selects all options when clicks on Select all button", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
       const selectAll = screen.getByRole("button", {
         name: "Select all",
       })
@@ -261,8 +261,8 @@ describe("<SelectionProvider>", () => {
     })
 
     it("fires onSelectionChange when clicks on Select all button", async () => {
-      const spy = jest.fn()
-      renderWithIntl(<SelectionProviderWrapper onSelectionChange={spy} />)
+      const spy = vi.fn()
+      render(<SelectionProviderWrapper onSelectionChange={spy} />)
       const selectAll = screen.getByRole("button", {
         name: "Select all",
       })
@@ -275,7 +275,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("clears all the selection when clicks on Clear button", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-2-value-mock"])}
         />
@@ -309,8 +309,8 @@ describe("<SelectionProvider>", () => {
     })
 
     it("fires onSelectionChange when clicks on Clear all button", async () => {
-      const spy = jest.fn()
-      renderWithIntl(
+      const spy = vi.fn()
+      render(
         <SelectionProviderWrapper
           onSelectionChange={spy}
           selectedKeys={new Set(["option-2-value-mock"])}
@@ -328,7 +328,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("de-selects the option when clicks on a selected option", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-2-value-mock"])}
         />
@@ -354,7 +354,7 @@ describe("<SelectionProvider>", () => {
   describe("<SelectionProviderWrapper /> - Keyboard interaction", () => {
     describe("Given no selectedKeys", () => {
       it("focuses on the frist option when tabs onto the list", async () => {
-        renderWithIntl(<SelectionProviderWrapper />)
+        render(<SelectionProviderWrapper />)
         await user.tab()
 
         await waitFor(() => {
@@ -367,7 +367,7 @@ describe("<SelectionProvider>", () => {
 
     describe("Given selectedKeys is [option-2-value-mock, option-3-value-mock]", () => {
       it("focuses the frist selected option when tabs onto the list", async () => {
-        renderWithIntl(
+        render(
           <SelectionProviderWrapper
             selectedKeys={new Set(["option-2-value-mock"])}
           />
@@ -383,7 +383,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("moves the focus down when hits arrow down key", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
       await user.tab()
       await user.keyboard("{ArrowDown}")
 
@@ -395,7 +395,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("keeps the focus at the last element when hits arrow down key on it", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-3-value-mock"])}
         />
@@ -411,7 +411,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("moves the focus up when hits arrow up key", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-3-value-mock"])}
         />
@@ -427,7 +427,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
       await user.tab()
       await user.keyboard("{ArrowUp}")
 
@@ -439,7 +439,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("selects the option when hits enter on a non-selected option", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
 
       await user.tab()
       await user.keyboard("{Enter}")
@@ -455,7 +455,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("de-selects the option when hits enter on a selected option", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-2-value-mock"])}
         />
@@ -475,8 +475,8 @@ describe("<SelectionProvider>", () => {
     })
 
     it("fires onSelectionChange when hits enter on a option", async () => {
-      const spy = jest.fn()
-      renderWithIntl(<SelectionProviderWrapper onSelectionChange={spy} />)
+      const spy = vi.fn()
+      render(<SelectionProviderWrapper onSelectionChange={spy} />)
 
       await user.tab()
       await user.keyboard("{Enter}")
@@ -490,7 +490,7 @@ describe("<SelectionProvider>", () => {
   describe("<SelectionProviderWrapper /> - Search Filtering", () => {
     describe("With no onSearchInputChange callback", () => {
       it("shows only the matched options", async () => {
-        renderWithIntl(<SelectionProviderWrapper />)
+        render(<SelectionProviderWrapper />)
         const searchInput = screen.getByRole("searchbox")
         await user.type(searchInput, "1")
 
@@ -515,9 +515,9 @@ describe("<SelectionProvider>", () => {
     })
     describe("With a onSearchInputChange callback", () => {
       it("Does not filter the matched options", async () => {
-        const onSearchInputChange = jest.fn()
+        const onSearchInputChange = vi.fn()
 
-        renderWithIntl(
+        render(
           <SelectionProviderWrapper onSearchInputChange={onSearchInputChange} />
         )
         const searchInput = screen.getByRole("searchbox")
@@ -544,9 +544,9 @@ describe("<SelectionProvider>", () => {
       })
 
       it("Calls back to the consumer with the search text", async () => {
-        const onSearchInputChange = jest.fn()
+        const onSearchInputChange = vi.fn()
 
-        renderWithIntl(
+        render(
           <SelectionProviderWrapper onSearchInputChange={onSearchInputChange} />
         )
         const searchInput = screen.getByRole("searchbox")
@@ -563,7 +563,7 @@ describe("<SelectionProvider>", () => {
 
   describe("<SelectionProviderWrapper /> - controlling items from the consumer", () => {
     it("renders only items passed", async () => {
-      const { rerender } = renderWithIntl(<SelectionProviderWrapper />)
+      const { rerender } = render(<SelectionProviderWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("option", {